为什么我的WebGL着色器不让我使用变化?
问题描述:
当我尝试我的顶点和片段着色器链接到一个程序,WebGL的抛出Varyings with the same name but different type, or statically used varyings in fragment shader are not declared in vertex shader: textureCoordinates
为什么我的WebGL着色器不让我使用变化?
我在我的两个顶点和片段着色器varying vec2 test
,并不能看到任何理由为什么编译器将无法在两者中找到相同的varying
。
顶点着色器:
varying vec2 test;
void main(void) {
gl_Position = vec4(0.0, 0.0, 0.0, 0.0);
test = vec2(1.0, 0.0);
}
片段着色器:
precision highp float;
varying vec2 test;
void main(void) {
gl_FragColor = vec4(test.xy, 0.0, 1.0);
}
测试代码:
const canvas = document.createElement('canvas');
gl = canvas.getContext('webgl')
let vert = gl.createShader(gl.VERTEX_SHADER);
gl.shaderSource(vert, "varying vec2 test;\nvoid main(void) {\n gl_Position = vec4(0.0, 0.0, 0.0, 0.0);\n test = vec2(1.0, 0.0);\n}");
gl.compileShader(vert);
let frag = gl.createShader(gl.FRAGMENT_SHADER);
gl.shaderSource(frag, "precision highp float;\nvarying vec2 test;\nvoid main() {\n\tgl_FragColor = vec4(test.xy, 0.0, 1.0);\n}");
gl.compileShader(frag);
let program = gl.createProgram();
gl.attachShader(program, vert);
gl.attachShader(program, frag);
gl.linkProgram(program);
gl.useProgram(program);
答
只是一个猜测,但我不知道是否是因为你没有使用纹理坐标在您的片段着色器中。名称&类型匹配得很好,所以我不认为这是问题。我已经做在这里同样的事情:
破片:
// The fragment shader is the rasterization process of webgl
// use float precision for this shader
precision mediump float;
// the input texture coordinate values from the vertex shader
varying vec2 vTextureCoord;
// the texture data, this is bound via gl.bindTexture()
uniform sampler2D texture;
// the colour uniform
uniform vec3 color;
void main(void) {
// gl_FragColor is the output colour for a particular pixel.
// use the texture data, specifying the texture coordinate, and modify it by the colour value.
gl_FragColor = texture2D(texture, vec2(vTextureCoord.s, vTextureCoord.t)) * vec4(color, 1.0);
}
韦尔:
// setup passable attributes for the vertex position & texture coordinates
attribute vec3 aVertexPosition;
attribute vec2 aTextureCoord;
// setup a uniform for our perspective * lookat * model view matrix
uniform mat4 uMatrix;
// setup an output variable for our texture coordinates
varying vec2 vTextureCoord;
void main() {
// take our final matrix to modify the vertex position to display the data on screen in a perspective way
// With shader code here, you can modify the look of an image in all sorts of ways
// the 4th value here is the w coordinate, and it is called Homogeneous coordinates, (x,y,z,w).
// It effectively allows the perspective math to work. With 3d graphics, it should be set to 1. Less than 1 will appear too big
// Greater than 1 will appear too small
gl_Position = uMatrix * vec4(aVertexPosition, 1);
vTextureCoord = aTextureCoord;
}
+0
我修改了我的原始问题以包含代码失败的最小工作示例。即使我使用变化,它似乎也失败了。 –
答
问题是由v51.something到52.0.2743.82更新Chrome OSX版解析(64位)奇怪。
你使用什么浏览器? Chrome for Windows v51.0.2704.103m(64位)没有出现任何错误。这是我正在执行的[确切代码](http://pastebin.com/6EXAetZ2)。 – Exide
@Exide更新我的浏览器修复了这个问题。奇怪的。 –