Webgl program not displaying shape when run in browser

Question

I'm learning how to work with shaders and I'm currently trying to write a vertex and fragment shaders for a cartoon-style shape. I have example code for a sphere that is colored in, which works properly, so I copied the structure from that file into the one I'm creating. However, when I run my file, only a black background appears on the page without the shape being displayed. I tried comparing the two files to make sure that I had all of the boiler plate code and it seems so, but as I'm extremely new to computer graphics programming, there is probably something important that I'm leaving out. What does my program doing incorrectly or what should be added to it? The code for the program is below:

<script src=lib1.js></script>
<body bgcolor=black>
<center>
<canvas id='canvas1' width='600' height='600'>
</canvas>
</center>
</body>


<script id='vs' type='other'>
   uniform vec3 lightDir;
   varying float intensity;
   void main(){
       vec3 ld;
       intensity = dot(lightDir, gl_Normal);
       gl_Position = ftransform();
   }
</script>


<script id='fs' type='other'>
varying float intensity;
void main(){
    vec4 color;
    if(intensity > 0.95)
        color = vec4(1.0, 0.5, 0.5, 1.0);
    else if(intensity > 0.5)
        color = vec4(0.6, 0.3 , 0.3, 1.0);
    else if(intensity > 0.25)
        color = vec4(0.4 , 0.2, 0.2, 1.0);
    else color = vec4(0.2, 0.1, 0.1, 1.0);

    gl_FragColor = color;
    }
</script>


<script>
start_gl("canvas1", getStringFromScript('vs'), getStringFromScript('fs'));
</script>

What kind of library are you using ? I dont see a definition for the ftransform function you're calling in your vertex shader — LJᛃ
– LJᛃ, Commented Sep 16, 2015 at 3:01
@LJᛃ I didn't notice the fact that the line required another library. I found the code online in a fragment shader example. That is probably why the shape isn't showing up. Now I just need to find a way to implement a new fragment shader with the code js code I have. — loremIpsum1771
– loremIpsum1771, Commented Sep 16, 2015 at 3:19
A look into the dev console should've shown you an error message when compiling your shader. — LJᛃ
– LJᛃ, Commented Sep 16, 2015 at 3:21
The shader you found looks like it came from an old version of full OpenGL. WebGL is based on OpenGL ES 2.0. Both gl_Normal and ftransform() were built-ins in older versions of OpenGL (and still are in the compatibility profile of full OpenGL). — Reto Koradi
– Reto Koradi, Commented Sep 16, 2015 at 4:48

user128511 · Accepted Answer · 2015-09-16 12:41:31Z

1

As @Reto eluded to in the comments there's no such thing as gl_Normal or fTransform in WebGL. Those are from old desktop OpenGL. They are not part of OpenGL ES 2.0 which is what WebGL is based on

Collectives™ on Stack Overflow

Webgl program not displaying shape when run in browser

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related