Exception thrown with GLSL app running in browser with Emscripten

Hello All!

I am currently in the process of trying to get my OF app to run in the browser. I’m using the excellent Emscripten to achieve this. I followed the tutorial on the OF website to setup my emscripten environment.

My project compiles with emmake successfully. However, when I run it in Chrome, I get an error that an exception is thrown. I am not very familiar with JS and web coding in general, so any help here would be appreciated. Below is the error from the JS console:
Uncaught abort(5) at Error
at jsStackTrace (http://localhost:6931/GenerativeVideoMesh.js:1:26709)
at stackTrace (http://localhost:6931/GenerativeVideoMesh.js:1:26892)
at abort (http://localhost:6931/GenerativeVideoMesh.js:24:169617)
at Array.C4c (http://localhost:6931/GenerativeVideoMesh.js:17:33706)
at QRc (http://localhost:6931/GenerativeVideoMesh.js:13:670940)
at OZc (http://localhost:6931/GenerativeVideoMesh.js:13:829116)
at lfa (http://localhost:6931/GenerativeVideoMesh.js:5:139110)
at Et (http://localhost:6931/GenerativeVideoMesh.js:6:303560)
at _s (http://localhost:6931/GenerativeVideoMesh.js:6:282381)
at Array.wi (http://localhost:6931/GenerativeVideoMesh.js:6:54373)

My app leverages multiple aspects of OF. It uses ofVideGrabber to get vides from the webcam, ofxCV to perform facial recognition, and ofShader to run GLSL shaders on the screen.

I realize that this isn’t enough info, so here is a link to the github repo of the project.

Any help is much appreciated! :slightly_smiling:


I only watched the shaders, it seems you are using the version of GLSL 150
This can not work in a browser because the support is just OpenglES 2.x,
and then try to run your program without shader, so as to rule out other errors.

@kashim Thank you for the reply!
How should I change my shaders to use OpenGL ES? Is it version 120?

It is close to 120, take a look at this:

I’m not sure I understand. Should I drop this file into my project and use it to encapsulate the shader, or something else?

what I mean is to look content of my example GLSL,
to see the differences with GLSL 150 contained in your project.

as the use of “gl_FragColor” for the output of the fragment shader, and “gl_Position” for vertex.
verify the use of “precision highp float;” or “precision mediump float;”