I am learning shaders working through examples here. https://itp-xstory.github.io/p5js-shaders/#/./docs/examples/basic_gradient_texcoord
The code mentions the use of
attribute vec2 aTexCoord; as texCoordinates sent from the cpu, then tries to assign a varying vec2 vTextCoord to share with the fragment. I'm not sure if these namings are specific to shaders with p5 or not, but I feel like it is because when I try to run it with glslViewer I get the following errors
Error linking shader: WARNING: Output of vertex shader 'v_position' not read by fragment shader
WARNING: Output of vertex shader 'v_texcoord' not read by fragment shader
ERROR: Input of fragment shader 'v_texCoord' not written by vertex shader
I then changed the names (based on the errors) to v_texcoord for the varying and attribute vec4 vTexCoord; instead of aTexCoord and it works in the viewer.
Is vTexCoord the name of this attribute normally and v_texcoord a standard varying? Or is it based on my version of GL_SL? Searching for documentation with these names and I haven't come up with a clear answer. Below is my code that works...
.vert
#ifdef GL_ES
precision mediump float;
#endif
attribute vec3 aPosition;
// attribute vec2 aTexCoord; // from example does not work
// varying vec2 vTexCoord; // from example does not work
attribute vec4 vTexCoord; // works
// attribute vec4 vPosition;
varying vec2 v_texcoord; // works
void main() {
// copy the texture coordinates
// vTexCoord = aTexCoord;
v_texcoord = vTexCoord.st;
// Copy the position data into a vec4, adding 1.0 as the w parameter
vec4 positionVec4 = vec4(aPosition, 1.0);
positionVec4.xy = positionVec4.xy * 2.0 - 1.0;
gl_Position = positionVec4;
}
.frag
#ifdef GL_ES
precision mediump float;
#endif
uniform vec2 u_resolution;
// varying vec2 vTexCoord; does not work
varying vec2 v_texcoord;
void main() {
vec2 uv = v_texcoord;
vec4 color = vec4(uv.x, uv.y, uv.x + uv.y, 1.0);
gl_FragColor = color;
}