webgl深さバッファ
4028 ワード
従来の絵2 dキャンバスは、後に描いたものが先に描いた上に覆われていますが、3次元の図形を描くときは制御しにくいです.
深度バッファの役割は、色の階層を区別し、隠された色を表示しないようにすることです.
深度バッファが強く、使いやすい
深さバッファ(テスト)をオンにします.テストに注意してください.
gl.enable(gl.DEPTH_TEST);
深度キャッシュのクリア(Clear Depth Cache)
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
転載先:https://www.cnblogs.com/honghong87/p/9760174.html
深度バッファの役割は、色の階層を区別し、隠された色を表示しないようにすることです.
深度バッファが強く、使いやすい
深さバッファ(テスト)をオンにします.テストに注意してください.
gl.enable(gl.DEPTH_TEST);
深度キャッシュのクリア(Clear Depth Cache)
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
Hidden Surface Removal & Depth Test
attribute vec4 a_Position;
attribute vec4 a_Color;
uniform mat4 u_ProjMatrix;
uniform mat4 u_ViewMatrix;
varying vec4 v_Color;<br>
void main() {
gl_Position = u_ProjMatrix * u_ViewMatrix * a_Position;
v_Color = a_Color;
}
precision mediump float;
varying vec4 v_Color;
void main() {
gl_FragColor = v_Color;
}
var VERTEX_SHADER_SOURCE = document.getElementById('vertex-shader').text;
var FRAGMENT_SHADER_SOURCE = document.getElementById('fragment-shader').text;
var canvas = document.getElementById("canvas");
var gl = canvas.getContext('webgl');
if (!initShaders(gl, VERTEX_SHADER_SOURCE, FRAGMENT_SHADER_SOURCE)) {
alert('Failed to init shaders');
}
var vertices = new Float32Array([
// Three triangles on the right side
0.75, 1.0, 0.0, 0.4, 0.4, 1.0, //
0.25, -1.0, 0.0, 0.4, 0.4, 1.0,
1.25, -1.0, 0.0, 1.0, 0.4, 0.4,
0.75, 1.0, -2.0, 1.0, 1.0, 0.4, //
0.25, -1.0, -2.0, 1.0, 1.0, 0.4,
1.25, -1.0, -2.0, 1.0, 0.4, 0.4,
0.75, 1.0, -4.0, 0.4, 1.0, 0.4, //
0.25, -1.0, -4.0, 0.4, 1.0, 0.4,
1.25, -1.0, -4.0, 1.0, 0.4, 0.4,
// Three triangles on the left side
-0.75, 1.0, 0.0, 0.4, 0.4, 1.0, //
-1.25, -1.0, 0.0, 0.4, 0.4, 1.0,
-0.25, -1.0, 0.0, 1.0, 0.4, 0.4,
-0.75, 1.0, -2.0, 1.0, 1.0, 0.4, //
-1.25, -1.0, -2.0, 1.0, 1.0, 0.4,
-0.25, -1.0, -2.0, 1.0, 0.4, 0.4,
-0.75, 1.0, -4.0, 0.4, 1.0, 0.4, //
-1.25, -1.0, -4.0, 0.4, 1.0, 0.4,
-0.25, -1.0, -4.0, 1.0, 0.4, 0.4
]);
initVertexBuffers(gl, vertices);
var u_ViewMatrix = gl.getUniformLocation(gl.program, 'u_ViewMatrix');
var u_ProjMatrix = gl.getUniformLocation(gl.program, 'u_ProjMatrix');
var viewMatrix = new Matrix4();
viewMatrix.setLookAt(0, 0, 5, 0, 0, -100, 0, 1, 0);
var projMatrix = new Matrix4();
projMatrix.setPerspective(30, canvas.width / canvas.height, 1, 100);
gl.uniformMatrix4fv(u_ViewMatrix, false, viewMatrix.elements);
gl.uniformMatrix4fv(u_ProjMatrix, false, projMatrix.elements);
// , z
// gl.enable(gl.DEPTH_TEST);
gl.clearColor(0.0, 0.0, 0.0, 1.0);
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
gl.drawArrays(gl.TRIANGLES, 0, 18);
function initVertexBuffers(gl, vertices) {
var vertexBuffer = gl.createBuffer();
if (!vertexBuffer) {
console.log('Failed to create buffer object');
return -1;
}
gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);
var FSIZE = vertices.BYTES_PER_ELEMENT;
var a_Position = gl.getAttribLocation(gl.program, 'a_Position');
gl.vertexAttribPointer(a_Position, 3, gl.FLOAT, false, 6 * FSIZE, 0);
gl.enableVertexAttribArray(a_Position);
var a_Color = gl.getAttribLocation(gl.program, 'a_Color');
gl.vertexAttribPointer(a_Color, 3, gl.FLOAT, false, 6 * FSIZE, 3 * FSIZE);
gl.enableVertexAttribArray(a_Color);
}
転載先:https://www.cnblogs.com/honghong87/p/9760174.html