CODEWITHSUNDEEP
webglelm
Ben Pious
Ben Pious

Reputation: 4805

WebGL view breaks page

I'm trying to use Graphics.WebGL, but whenever I add a webGL Element to my page nothing appears, not even the other non-webGL elements I previously added. I'm using elm-server, and there's nothing in its console there to indicate that anything is wrong either -- theres just a blank page; it seems to have silently failed. I've swapped out the webGL code for a regular collage, which does show up, so as far as I know there isn't anything wrong with any of my other code.

Here's a few of the relevant parts of the code

     main = lift2 signalWrapper buttonSelected.signal frameRateSignal

buttonSelected.signal just keeps track of what button has been clicked in a non-webGL portion of the page. frameRateSignal is defined as 

frameRateSignal : Signal Float
frameRateSignal = fps 25

Signal wrapper is 

 signalWrapper signal time = flow right [buttons signal, glView time]

at this point if I swap glView time for collage 500 500 [filled red (rect (50 + x) (50 + x))] things still show up and work in the way one would expect. glView is defined as 

glView time = webgl (50, 50) (scene time)

and scene is defined as 

scene : Float -> [Entity]
scene time = [entity vertexShader fragmentShader fullScreenTriangle (uniforms time)]

The various components of that are 

uniforms : Float -> {perspective : Mat4, camera : Mat4 }
 uniforms t = {perspective = makePerspective 45 1 0.01 100 ,
                 camera = makeLookAt (vec3 0 0 5) (vec3 0 0 0) (vec3 0 1 0)
              }

 fullScreenTriangle : [Triangle Vertex]
 fullScreenTriangle =
     let tovo  = vec3 1 1 0
         tovt  = vec3 0 0 0
         tovth = vec3 0 1 0
         ttvo  = vec3 1 0 0
         ttvt  = vec3 0 1 0
         ttvth = vec3 0 0 0
     in
     [
         (makeVertex tovo, makeVertex tovt, makeVertex tovth),
         (makeVertex ttvo, makeVertex ttvt, makeVertex ttvth)
     ]


 --shaders
 vertexShader : Shader { attr | position:Vec3, color:Vec3}
                       { unif | perspective:Mat4, camera:Mat4}
                       {vcolor:Vec3}
 vertexShader = [glsl|

     attribute vec3 position;
     attribute vec3 color;
     uniform mat4 camera;
     uniform mat4 perspective;
     varying vec3 vcolor;

     void main () {

         gl_Position = perspective * camera * vec4(position,1.0);
         vcolor = color;
     }
 |]

 fragmentShader : Shader {} {unif | perspective:Mat4, camera:Mat4} {vcolor:
 fragmentShader = [glsl|

     varying vec3 vcolor;
     void main () {

         gl_FragColor = vec4(vcolor,1.0);
     }
 |]

Sorry to post so much potentially irrelevant code, but I really have no idea where to go from here -- theres no visible error messages or anything to pursue.

Here's a link to the full code.

Upvotes: 2

Views: 128

Answers (1)

Apanatshka
Apanatshka

Reputation: 5958

I took a look at your code and once I got it to compile, I found that the browsers development console had logged a usable error:

uncaught exception: ERROR: 0:2: '' : No precision specified for (float)

The fragment shader requires you to define floating point precision. Once you define that, your code gives some output.

Given that this error is shown in an unintuitive place and isn't warned about beforehand, I advise you to open an issue on the library's GitHub page.

Upvotes: 2

Related Questions