'vTexCoord vs v_texcoord in shader examples
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;
}
Solution 1:[1]
There is no standard name for the attribute or varying for texture co-ordinates in GLSL. There are some inputs and outputs with special names, like gl_Position and gl_FragCoord for example, but everything else is up to you. The important thing is just that the names match between shaders (the output from the vertex shader must have exactly the same name, including capitalisation, as the input to the fragment shader), and also between your shaders and your non-shader code which specifies names.
However, the framework or engine you're using may have its own standard names. I don't know about p5.js.
I think the error message you got was because your varying had a very slightly different name between the vertex and fragment shader.
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|---|
| Solution 1 | Andrea |
