webgl添加投影不显示对象
我正在查看web gl,并尝试渲染立方体,但在尝试将投影添加到顶点着色器时遇到问题。我已经添加了一个属性,但是当我使用它来多个modelview和position时,它会停止显示多维数据集。我不知道为什么,想知道是否有人能帮忙?我试着看了几个例子,但都没能成功webgl添加投影不显示对象,webgl,Webgl,我正在查看web gl,并尝试渲染立方体,但在尝试将投影添加到顶点着色器时遇到问题。我已经添加了一个属性,但是当我使用它来多个modelview和position时,它会停止显示多维数据集。我不知道为什么,想知道是否有人能帮忙?我试着看了几个例子,但都没能成功 vertex shader attribute vec3 aVertexPosition; uniform mat4 uMVMatrix; uniform mat4 uPMatrix; void mai
vertex shader
attribute vec3 aVertexPosition;
uniform mat4 uMVMatrix;
uniform mat4 uPMatrix;
void main(void) {
gl_Position = uPMatrix * uMVMatrix * vec4(aVertexPosition, 1.0);
//gl_Position = uMVMatrix * vec4(aVertexPosition, 1.0);
}
fragment shader
#ifdef GL_ES
precision highp float; // Not sure why this is required, need to google it
#endif
uniform vec4 uColor;
void main() {
gl_FragColor = uColor;
}
function init() {
// Get a reference to our drawing surface
canvas = document.getElementById("webglSurface");
gl = canvas.getContext("experimental-webgl");
/** Create our simple program **/
// Get our shaders
var v = document.getElementById("vertexShader").firstChild.nodeValue;
var f = document.getElementById("fragmentShader").firstChild.nodeValue;
// Compile vertex shader
var vs = gl.createShader(gl.VERTEX_SHADER);
gl.shaderSource(vs, v);
gl.compileShader(vs);
// Compile fragment shader
var fs = gl.createShader(gl.FRAGMENT_SHADER);
gl.shaderSource(fs, f);
gl.compileShader(fs);
// Create program and attach shaders
program = gl.createProgram();
gl.attachShader(program, vs);
gl.attachShader(program, fs);
gl.linkProgram(program);
// Some debug code to check for shader compile errors and log them to console
if (!gl.getShaderParameter(vs, gl.COMPILE_STATUS))
console.log(gl.getShaderInfoLog(vs));
if (!gl.getShaderParameter(fs, gl.COMPILE_STATUS))
console.log(gl.getShaderInfoLog(fs));
if (!gl.getProgramParameter(program, gl.LINK_STATUS))
console.log(gl.getProgramInfoLog(program));
/* Create some simple VBOs*/
// Vertices for a cube
var vertices = new Float32Array([
-0.5, 0.5, 0.5, // 0
-0.5, -0.5, 0.5, // 1
0.5, 0.5, 0.5, // 2
0.5, -0.5, 0.5, // 3
-0.5, 0.5, -0.5, // 4
-0.5, -0.5, -0.5, // 5
-0.5, 0.5, -0.5, // 6
-0.5,-0.5, -0.5 // 7
]);
// Indices of the cube
var indicies = new Int16Array([
0, 1, 2, 1, 2, 3, // front
5, 4, 6, 5, 6, 7, // back
0, 1, 5, 0, 5, 4, // left
2, 3, 6, 6, 3, 7, // right
0, 4, 2, 4, 2, 6, // top
5, 3, 1, 5, 3, 7 // bottom
]);
// create vertices object on the GPU
vbo = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, vbo);
gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);
// Create indicies object on th GPU
ibo = gl.createBuffer();
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, ibo);
gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, indicies, gl.STATIC_DRAW);
gl.clearColor(0.0, 0.0, 0.0, 1.0);
gl.enable(gl.DEPTH_TEST);
// Render scene every 33 milliseconds
setInterval(render, 33);
}
var mvMatrix = mat4.create();
var pMatrix = mat4.create();
function render() {
// Set our viewport and clear it before we render
gl.viewport(0, 0, canvas.width, canvas.height);
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
gl.useProgram(program);
// Bind appropriate VBOs
gl.bindBuffer(gl.ARRAY_BUFFER, vbo);
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, ibo);
// Set the color for the fragment shader
program.uColor = gl.getUniformLocation(program, "uColor");
gl.uniform4fv(program.uColor, [0.3, 0.3, 0.3, 1.0]);
//
// code.google.com/p/glmatrix/wiki/Usage
program.uPMatrix = gl.getUniformLocation(program, "uPMatrix");
program.uMVMatrix = gl.getUniformLocation(program, "uMVMatrix");
mat4.perspective(45, gl.viewportWidth / gl.viewportHeight, 1.0, 10.0, pMatrix);
mat4.identity(mvMatrix);
mat4.translate(mvMatrix, [0.0, -0.25, -1.0]);
gl.uniformMatrix4fv(program.uPMatrix, false, pMatrix);
gl.uniformMatrix4fv(program.uMVMatrix, false, mvMatrix);
// Set the position for the vertex shader
program.aVertexPosition = gl.getAttribLocation(program, "aVertexPosition");
gl.enableVertexAttribArray(program.aVertexPosition);
gl.vertexAttribPointer(program.aVertexPosition, 3, gl.FLOAT, false, 3*4, 0); // position
// Render the Object
gl.drawElements(gl.TRIANGLES, 36, gl.UNSIGNED_SHORT, 0);
}
提前感谢您的帮助,这样您的多维数据集就不会显示透视矩阵了,对吗 乍一看,我想你可能是在用近平面剪裁几何体。为透视函数提供近平面和远平面,分别为1.0和10.0。这意味着,要使任何碎片可见,它们必须落在[1,10]的z范围内。立方体每边1个单位,以(0,0,0)为中心,将其从摄影机1个单位“向后”移动。这意味着离相机最近的面实际上将位于0.5 Z,这超出了剪裁范围,因此被丢弃。大约一半的立方体将位于z>1,但此时您将看到立方体的内部。如果已启用背面剔除,则不会看到任何内容 长话短说-你的立方体可能离摄像机太近了。请尝试以下方法:
mat4.translate(mvMatrix,[0.0,-0.25,-3.0])代码>问题在这里:
..., gl.viewportWidth / gl.viewportHeight, ...
gl.viewportWidth
和gl.viewportHeight
都是未定义的值
我想你错过了这两行:
gl.viewportWidth = canvas.width;
gl.viewportHeight = canvas.height;
你会看到很多人这样做:
canvas.width = canvas.clientWidth;
canvas.height = canvas.clientHeight;
gl.viewportWidth = canvas.width;
gl.viewportHeight = canvas.height;
但请注意,WebGL上下文也有以下两种:
谢谢你,胡安。我原以为问题出在投影部分。我改为使用frustum var left=-5.0;var right=5.0;var底部=-5.0;var-top=5.0;var近=1.0;var-far=20.0;var projection=mat4.create();mat4.平截头体(左、右、下、上、近、远、pMatrix);Oops发布了一条消息,很快,这是一个偶然,我补充说,很高兴知道为什么透视计算不能正常工作。Toji也来看看我的代码。在Juan的修复之后,正如您所说,它离阻止整个立方体显示的近平面有点近,请考虑使用requestAnimationFrame()
gl.drawingBufferWidth
gl.drawingBufferHeight