Can't get OpenGL code to work properly

Question

I'm very new to OpenGL, GLSL and WebGL. I'm trying to get this sample code to work in a tool like http://shdr.bkcore.com/ but I can't get it to work.

Vertex Shader:

void main()
{ 
    gl_Position = gl_ModelViewProjectionMatrix * gl_Vertex;
    gl_TexCoord[0] = gl_MultiTexCoord0;
}

Fragment Shader:

precision highp float;
uniform float time;
uniform vec2 resolution;
varying vec3 fPosition;
varying vec3 fNormal;

uniform sampler2D tex0;

void main()
{
  float border = 0.01;
  float circle_radius = 0.5;
  vec4 circle_color = vec4(1.0, 1.0, 1.0, 1.0);
  vec2 circle_center = vec2(0.5, 0.5);

  vec2 uv = gl_TexCoord[0].xy;
  vec4 bkg_color = texture2D(tex0,uv * vec2(1.0, -1.0));

  // Offset uv with the center of the circle.
  uv -= circle_center;
  float dist = sqrt(dot(uv, uv));

  if ( (dist > (circle_radius+border)) || (dist < (circle_radius-border)) )
gl_FragColor = bkg_color;
else
gl_FragColor = circle_color;
}

I figured that this code must be from an outdated version of the language, so I changed the vertex shader to:

precision highp float;
attribute vec2 position;
attribute vec3 normal;

varying vec2 TextCoord;
attribute vec2 textCoord;

uniform mat3 normalMatrix;
uniform mat4 modelViewMatrix;
uniform mat4 projectionMatrix;
varying vec3 fNormal;
varying vec3 fPosition;

void main()
{

  gl_Position = vec4(position, 0.0, 1.0);
  TextCoord = vec2(textCoord);
}

That seemed to fix the error messages about undeclared identifiers and not being able to "convert from 'float' to highp 4-component something-or-other", but I have no idea if, functionally, this will do the same thing as the original intended.

Also, when I convert to this version of the Vertex Shader I have no idea what I'm supposed to do with this line in the Fragment Shader:

vec2 uv = gl_TexCoord[0].xy;

How do I convert this line to fit in with the converted vertex shader and how can I be sure that the vertex shader is even converted correctly?

I think gl_TexCoord is not supported in web shaders, I also tried Glsl Sandbox and Shader Toy and gl_TexCoord line gave error. — Berke Cagkan Toptas
Include in that list gl_ModelViewProjectionMatrix, gl_Vertex, and gl_MultiTexCoord0. All of those are old out of data OpenGL things that don't exist in OpenGL ES or WebGL. Basically there was the original OpenGL without shaders. When shaders were added they kind of tried to mix shaders with the old stuff and many of those gl_XXX variables are accessing the old stuff. When OpenGL ES came along they got rid of all the old stuff. Now everything is 100% up to the user. You decide on the data, that names, everything. See (webglfundamentals.org)? — gman
It's also not clear even if you fixed the code that it would work on any of those sites. It's doing work with textures. AFAICT Shrd Editor and glsl sandbox don't support textures. Shader toy allows some but the shader above doesn't appear to be designed for the shader toy uses shaders. Using just a different color for texture it looks like this. — gman

solidpixel solidpixel · Accepted Answer · 2015-05-06T13:54:58

gl_TexCoord is from desktop OpenGL, and not part of OpenGL ES. You'll need to create a new user-defined vec2 varying to hold the coordinate value.

Can't get OpenGL code to work properly

1 Answers