如何解决WebGL 着色器不尊重形状方向
我对 WebGL 非常陌生,我正在修改我在网上找到的一个现有项目以满足我的需求。
我的相机是等距的,我正在渲染两个立方体。我想在“地面”上有一个无限网格,就像在许多 3d 编辑器中一样。
您可以在下面看到网格不是无限的(我知道这是因为顶点仅从 -1 到 1),并且它的方向不正确。它直接在屏幕上呈现,而不考虑发送到 GPU 的变换矩阵。
由于涉及三个相互关联的程序(2个着色器,加上JS),我不知道错误在哪里。这是最相关的代码;该项目很大,所以如果您需要查看其他内容,请告诉我:
let vertices = [
1.0,1.0,0.0,-1.0,0.0
];
let bufferObject = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER,bufferObject);
gl.bufferData(gl.ARRAY_BUFFER,new Float32Array(vertices),gl.STATIC_DRAW);
let attribute = shader.position; // getAttribLocation(...,'position')
gl.bindBuffer(gl.ARRAY_BUFFER,vertices);
gl.enabLevertexAttribArray(attribute);
gl.vertexAttribPointer(attribute,3,gl.FLOAT,false,0); // size of 3 is the only one that renders the quad
// this rotates the plane to be along the 'ground' - even without this,it stands up,and the grid still doesn't respect the orientation
(new Matrix()).rotateX(90).sendToGpu(gl,shader.model); // getUniformlocation(...,'model')
gl.drawArrays(gl.TRIANGLE_STRIP,4); // 4 vertices
顶点着色器:
attribute vec4 position;
attribute vec2 uv;
uniform mat4 model;
uniform mat4 view;
uniform mat4 projection;
varying vec2 vUv;
void main()
{
vUv = uv;
gl_Position = projection * view * model * position;
}
片段着色器:
precision mediump float;
uniform float time;
uniform vec2 mouse;
uniform vec2 resolution;
vec2 offset = vec2(0,0);
vec2 pitch = vec2(32,32);
void main()
{
float lX = gl_FragCoord.x / resolution.x;
float lY = gl_FragCoord.y / resolution.y;
float scaleFactor = 10000.0;
float offX = (scaleFactor * offset[0]) + gl_FragCoord.x;
float offY = (scaleFactor * offset[1]) + (1.0 - gl_FragCoord.y);
if (int(mod(offX,pitch[0])) == 0 || int(mod(offY,pitch[1])) == 0)
{
gl_FragColor = vec4(0.0,0.2);
}
else
{
gl_FragColor = vec4(1.0,0.1);
}
}
有人能指出我正确的方向吗?
解决方法
根据纹理坐标 (vUv
) 而不是 gl_FragCoord.xy
生成网格。
添加纹理坐标属性:
let vertices = [
// x y z u v
1.0,1.0,0.0,-1.0,0.0 0.0,];
let bufferObject = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER,bufferObject);
gl.bufferData(gl.ARRAY_BUFFER,new Float32Array(vertices),gl.STATIC_DRAW);
gl.bindBuffer(gl.ARRAY_BUFFER,vertices);
let attribute = shader.position; // getAttribLocation(...,'position')
gl.enableVertexAttribArray(attribute);
gl.vertexAttribPointer(attribute,3,gl.FLOAT,false,5*4,0);
let attribute_uv = gl.getAttribLocation(...,'uv')
gl.enableVertexAttribArray(attribute_uv);
gl.vertexAttribPointer(attribute_uv,2,3*4);
在片段着色器中通过 offX
而不是 offY
设置 vUV
和 gl_FragCoord.xy
:
// [...]
varying vec2 vUv;
void main()
{
// float offX = (scaleFactor * offset[0]) + gl_FragCoord.x;
// float offY = (scaleFactor * offset[1]) + (1.0 - gl_FragCoord.y);
float scaleFactor = 32.0*8.0;
float offX = scaleFactor * vUv.x;
float offY = scaleFactor * vUv.y;
// [...]
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。