Question

我正在创建一个简单的WebGL程序，该程序创建一个绕Z轴旋转的立方体。问题在于，当旋转它的某些面时，它们的另一侧会覆盖其他面，而您看不到立方体的每一面。我在网上寻找解决方案，但情况变得更糟。它们使人脸剔除成为可能，但对他们而言似乎有效，但对我而言，却不行。谁能告诉我我需要在代码中添加些什么才能修复人脸覆盖问题？

完整源代码：

var canvas = document.getElementById("canvas");
var gl = canvas.getContext("webgl");
var a = 24;
var positions = [
  -0.5, -0.5, 0.0,
  0.5, -0.5, 0.0,
  0.5, 0.5, 0.0,
  -0.5, 0.5, 0.0,
  -0.5, -0.5, 0.5,
  0.5, -0.5, 0.5,
  0.5, 0.5, 0.5,
  -0.5, 0.5, 0.5,
  //0.5, 0.5, 1.0,
];

var indices = [
  0, 1, 2,  0, 2, 3, // Front
  0, 4, 7,  0, 3, 7, // Side 1
  1, 5, 6,  1, 2, 6, // Side 2
  4, 5, 6,  6, 7, 4  // Back
];

var rotation_angle = 1;
var radians = (rotation_angle * Math.PI)/180;
var rotation = [Math.sin(radians), 0.0, Math.cos(radians)];

var _buffer = gl.createBuffer();
var i_buffer = gl.createBuffer();

var vertexShader = gl.createShader(gl.VERTEX_SHADER);
gl.shaderSource(vertexShader, `
precision mediump float;
attribute vec3 position;
uniform vec3 rotation;

varying vec3 f_col;


void main(){

  vec2 newPos = vec2(
    position.x * rotation.x - position.z * rotation.z,

    position.x * rotation.z + position.z * rotation.x
  );
  gl_Position = vec4(newPos.x, position.y, newPos.y, 1.0);
  f_col = position;
}
`);
gl.compileShader(vertexShader);

// Check if it compiled

var success2 = gl.getShaderParameter(vertexShader, gl.COMPILE_STATUS);
if (!success2) {
  // Something went wrong during compilation; get the error
  throw "could not compile shader:" + gl.getShaderInfoLog(vertexShader);
}

var fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
gl.shaderSource(fragmentShader, `
precision mediump float;
varying vec3 f_col;

void main() {
  gl_FragColor = vec4(f_col.x, 0.2, f_col.z, 1.0);
}
`);

gl.compileShader(fragmentShader);

var success1 = gl.getShaderParameter(fragmentShader, gl.COMPILE_STATUS);
if (!success1) {
  // Something went wrong during compilation; get the error
  throw "could not compile shader:" + gl.getShaderInfoLog(fragmentShader);
}

var program = gl.createProgram();

// Attach pre-existing shaders
gl.attachShader(program, vertexShader);
gl.attachShader(program, fragmentShader);
gl.linkProgram(program);

var attributeLoc = gl.getAttribLocation(program, "position");
gl.bindBuffer(gl.ARRAY_BUFFER, _buffer);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(positions), 
gl.STATIC_DRAW);
gl.vertexAttribPointer(attributeLoc, 3, gl.FLOAT, false, 0, 0);
gl.enableVertexAttribArray(attributeLoc);
gl.useProgram(program);

var rotation_location = gl.getUniformLocation(program, "rotation");

gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, i_buffer);
gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint16Array(indices), 
gl.STATIC_DRAW);

function loop() {
  gl.clearColor(0.75, 0.85, 0.8, 1);
  gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
  //gl.drawArrays(gl.TRIANGLE_FAN, 0, 8);
  gl.drawElements(gl.TRIANGLES, a, gl.UNSIGNED_SHORT, 0);
  //gl.drawArrays(gl.TRIANGLE_STRIP, 1, 3);
  rotation_angle++;
  var radians = (rotation_angle * Math.PI)/180;
  var rotation = [Math.sin(radians), 0.0, Math.cos(radians)];

  gl.uniform3fv(rotation_location, rotation);
  requestAnimationFrame(loop);
}

loop();

<canvas id="canvas" width="500" height="500"></canvas>

WebGL旋转立方体替代面

0 个答案: