WebGL深度纹理全白？ [英] WebGL Depth Texture all white?
本文介绍了WebGL深度纹理全白？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我使用chrome中的WEBGL_depth_texture将场景渲染为具有颜色和深度纹理的帧缓冲区。当我显示我的颜色纹理时工作正常，但我的depthtexture全是白色的。不应该像灰色吗？
我的绘制纹理函数：
this.drawTexture = function（）{
//gl.viewport（0，0，this.canvas.width，this.canvas.height）;
gl.clear（gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT）;
gl.bindBuffer（gl.ARRAY_BUFFER，this.vertBuffer）;
gl.vertexAttribPointer（this.VertexPosition，2，gl.FLOAT，false，0，0）;
gl.bindBuffer（gl.ARRAY_BUFFER，this.vertTexCoordBuffer）;
gl.vertexAttribPointer（this.VertexTexture，2，gl.FLOAT，false，0，0）;
gl.bindTexture（gl.TEXTURE_2D，this.depthTexture）;
gl.drawArrays（gl.TRIANGLES，0，6）;
gl.bindTexture（gl.TEXTURE_2D，null）;
初始化：
this.colorTexture = gl.createTexture（）;
gl.bindTexture（gl.TEXTURE_2D，this.colorTexture）;
gl.texParameteri（gl.TEXTURE_2D，gl.TEXTURE_MAG_FILTER，gl.NEAREST）;
gl.texParameteri（gl.TEXTURE_2D，gl.TEXTURE_MIN_FILTER，gl.NEAREST）;
gl.texParameteri（gl.TEXTURE_2D，gl.TEXTURE_WRAP_S，gl.CLAMP_TO_EDGE）;
gl.texParameteri（gl.TEXTURE_2D，gl.TEXTURE_WRAP_T，gl.CLAMP_TO_EDGE）;
gl.texImage2D（gl.TEXTURE_2D，0，gl.RGBA，size，size，0，gl.RGBA，gl.UNSIGNED_BYTE，null）;
this.depthTexture = gl.createTexture（）;
gl.bindTexture（gl.TEXTURE_2D，this.depthTexture）;
gl.texParameteri（gl.TEXTURE_2D，gl.TEXTURE_MAG_FILTER，gl.NEAREST）;
gl.texParameteri（gl.TEXTURE_2D，gl.TEXTURE_MIN_FILTER，gl.NEAREST）;
gl.texParameteri（gl.TEXTURE_2D，gl.TEXTURE_WRAP_S，gl.CLAMP_TO_EDGE）;
gl.texParameteri（gl.TEXTURE_2D，gl.TEXTURE_WRAP_T，gl.CLAMP_TO_EDGE）;
gl.texImage2D（gl.TEXTURE_2D，0，gl.DEPTH_COMPONENT，size，size，0，gl.DEPTH_COMPONENT，gl.UNSIGNED_SHORT，null）;
// var framebuffer = gl.createFramebuffer（）;
this.depthFramebuffer = gl.createFramebuffer（）;
gl.bindFramebuffer（gl.FRAMEBUFFER，this.depthFramebuffer）;
gl.framebufferTexture2D（gl.FRAMEBUFFER，gl.COLOR_ATTACHMENT0，gl.TEXTURE_2D，this.colorTexture，0）;
gl.framebufferTexture2D（gl.FRAMEBUFFER，gl.DEPTH_ATTACHMENT，gl.TEXTURE_2D，this.depthTexture，0）;
顶点着色器：
属性vec2 VertexPosition;
属性vec2 TextureCoord;
不同vec2 vTextureCoord;
void main（）{
gl_Position = vec4（VertexPosition，0，1）;
vTextureCoord = TextureCoord;
}
片段着色器
precision highp float;
uniform sampler2D uSampler;
不同vec2 vTextureCoord;
void main（void）{
vec4 depth = texture2D（uSampler，vTextureCoord）;
gl_FragColor = depth;
解决方案
启用深度测试？
gl.enable（gl.DEPTH_TEST）;
如果不进行深度测试，则不会写入深度纹理。
如果不是这样的话，这是一个可行的例子。
< script src =http://greggman.github.com/webgl-基本面/ webgl的/资源/ webgl的-utils.js>< /脚本>
< script id =vshadertype =whatever>
属性vec4 a_position;
变化vec2 v_texcoord;
void main（）{
gl_Position = a_position;
v_texcoord = a_position.xy * 0.5 + 0.5;
}
< / script>
< script id =fshadertype =whatever>
精度中等浮动;
变化vec2 v_texcoord;
uniform sampler2D u_sampler;
void main（）{
vec4 color = texture2D（u_sampler，v_texcoord）;
gl_FragColor = vec4（color.r，0，0，1）;
}
< / script>
< canvas id =cwidth =300height =300>< / canvas>
< script>
var canvas = document.getElementById（c）;
var gl = getWebGLContext（canvas，{antialias：false}）;
if（！gl）{
alert（no WebGL）;
return;
}
//启用深度纹理。
var depthTextureExtension = gl.getExtension（WEBGL_depth_texture）;
if（！depthTextureExtension）{
alert（深度纹理不支持）;
}
var program = createProgramFromScripts（
gl，[vshader，fshader]，[a_position]）;
gl.useProgram（program）;
var verts = [
1,1,1，
-1,1,0，
-1，-1，-1，
1，1，1，
-1，-1，-1，
1，-1，0，
];
var vertBuffer = gl.createBuffer（）;
gl.bindBuffer（gl.ARRAY_BUFFER，vertBuffer）;
gl.bufferData（gl.ARRAY_BUFFER，new Float32Array（verts），gl.STATIC_DRAW）;
gl.enableVertexAttribArray（0）;
gl.vertexAttribPointer（0，3，gl.FLOAT，false，0，0）;
//创建深度纹理。
var depthTex = gl.createTexture（）;
gl.bindTexture（gl.TEXTURE_2D，depthTex）;
gl.texParameteri（gl.TEXTURE_2D，gl.TEXTURE_WRAP_S，gl.CLAMP_TO_EDGE）;
gl.texParameteri（gl.TEXTURE_2D，gl.TEXTURE_WRAP_T，gl.CLAMP_TO_EDGE）;
gl.texParameteri（gl.TEXTURE_2D，gl.TEXTURE_MIN_FILTER，gl.LINEAR）;
gl.texParameteri（gl.TEXTURE_2D，gl.TEXTURE_MAG_FILTER，gl.LINEAR）;
gl.texImage2D（gl.TEXTURE_2D，0，gl.DEPTH_COMPONENT，16，16，0，
gl.DEPTH_COMPONENT，gl.UNSIGNED_SHORT，null）;
//创建一个framebuffer并附加纹理。
var fb = gl.createFramebuffer（）;
gl.bindFramebuffer（gl.FRAMEBUFFER，fb）;
gl.framebufferTexture2D（gl.FRAMEBUFFER，gl.DEPTH_ATTACHMENT，
gl.TEXTURE_2D，depthTex，0）;
gl.bindTexture（gl.TEXTURE_2D，null）;
console.log（gl.checkFramebufferStatus（gl.FRAMEBUFFER）== gl.FRAMEBUFFER_COMPLETE）;
//使用默认纹理进行渲染，同时渲染深度纹理。
gl.bindTexture（gl.TEXTURE_2D，null）;
//打开深度测试，以便我们可以写入深度纹理。
gl.enable（gl.DEPTH_TEST）;
//渲染到深度纹理
gl.bindFramebuffer（gl.FRAMEBUFFER，fb）;
gl.clear（gl.DEPTH_BUFFER_BIT）;
gl.drawArrays（gl.TRIANGLES，0，6）;
//现在用纹理绘制到画布
gl.bindFramebuffer（gl.FRAMEBUFFER，null）;
gl.bindTexture（gl.TEXTURE_2D，depthTex）;
gl.drawArrays（gl.TRIANGLES，0，6）;
< / script>
以及它的小提琴： http://jsfiddle.net/greggman/q3ane/
I'm using the WEBGL_depth_texture in chrome to render a scene to a framebuffer with a color and depth texture. When I display my color texture works fine, but my depthtexture is all white. Shouldn't it be like gray?
my draw texture function:
this.drawTexture = function() {
//gl.viewport(0, 0, this.canvas.width, this.canvas.height);
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
gl.bindBuffer(gl.ARRAY_BUFFER, this.vertBuffer);
gl.vertexAttribPointer(this.VertexPosition, 2, gl.FLOAT, false, 0, 0);
gl.bindBuffer(gl.ARRAY_BUFFER, this.vertTexCoordBuffer);
gl.vertexAttribPointer(this.VertexTexture, 2, gl.FLOAT, false, 0, 0);
gl.bindTexture(gl.TEXTURE_2D, this.depthTexture);
gl.drawArrays(gl.TRIANGLES, 0, 6);
gl.bindTexture(gl.TEXTURE_2D, null);
init:
this.colorTexture = gl.createTexture();
gl.bindTexture(gl.TEXTURE_2D, this.colorTexture);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, size, size, 0, gl.RGBA, gl.UNSIGNED_BYTE, null);
this.depthTexture = gl.createTexture();
gl.bindTexture(gl.TEXTURE_2D, this.depthTexture);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
gl.texImage2D(gl.TEXTURE_2D, 0, gl.DEPTH_COMPONENT, size, size, 0, gl.DEPTH_COMPONENT, gl.UNSIGNED_SHORT, null);
// var framebuffer = gl.createFramebuffer();
this.depthFramebuffer = gl.createFramebuffer();
gl.bindFramebuffer(gl.FRAMEBUFFER, this.depthFramebuffer);
gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, this.colorTexture, 0);
gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.DEPTH_ATTACHMENT, gl.TEXTURE_2D, this.depthTexture, 0);
vertex shaders:
attribute vec2 VertexPosition;
attribute vec2 TextureCoord;
varying vec2 vTextureCoord;
void main() {
gl_Position = vec4(VertexPosition, 0, 1);
vTextureCoord = TextureCoord;
}
Fragment Shader
precision highp float;
uniform sampler2D uSampler;
varying vec2 vTextureCoord;
void main(void) {
vec4 depth = texture2D(uSampler, vTextureCoord);
gl_FragColor = depth;
}
解决方案
Did you enable depth testing?
gl.enable(gl.DEPTH_TEST);
If depth testing is not on nothing is written to the depth texture.
If that isn't it here's a working example. Work backward from it to your sample.
<script src="http://greggman.github.com/webgl-fundamentals/webgl/resources/webgl-utils.js"></script>
<script id="vshader" type="whatever">
attribute vec4 a_position;
varying vec2 v_texcoord;
void main() {
gl_Position = a_position;
v_texcoord = a_position.xy * 0.5 + 0.5;
}
</script>
<script id="fshader" type="whatever">
precision mediump float;
varying vec2 v_texcoord;
uniform sampler2D u_sampler;
void main() {
vec4 color = texture2D(u_sampler, v_texcoord);
gl_FragColor = vec4(color.r, 0, 0, 1);
}
</script>
<canvas id="c" width="300" height="300"></canvas>
<script>
var canvas = document.getElementById("c");
var gl = getWebGLContext(canvas, {antialias:false});
if (!gl) {
alert("no WebGL");
return;
}
// enable depth textures.
var depthTextureExtension = gl.getExtension("WEBGL_depth_texture");
if (!depthTextureExtension) {
alert("depth textures not supported");
}
var program = createProgramFromScripts(
gl, ["vshader", "fshader"], ["a_position"]);
gl.useProgram(program);
var verts = [
1, 1, 1,
-1, 1, 0,
-1, -1, -1,
1, 1, 1,
-1, -1, -1,
1, -1, 0,
];
var vertBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, vertBuffer);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(verts), gl.STATIC_DRAW);
gl.enableVertexAttribArray(0);
gl.vertexAttribPointer(0, 3, gl.FLOAT, false, 0, 0);
// create a depth texture.
var depthTex = gl.createTexture();
gl.bindTexture(gl.TEXTURE_2D, depthTex);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
gl.texImage2D(gl.TEXTURE_2D, 0, gl.DEPTH_COMPONENT, 16, 16, 0,
gl.DEPTH_COMPONENT, gl.UNSIGNED_SHORT, null);
// Create a framebuffer and attach the textures.
var fb = gl.createFramebuffer();
gl.bindFramebuffer(gl.FRAMEBUFFER, fb);
gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.DEPTH_ATTACHMENT,
gl.TEXTURE_2D, depthTex, 0);
gl.bindTexture(gl.TEXTURE_2D, null);
console.log(gl.checkFramebufferStatus(gl.FRAMEBUFFER) == gl.FRAMEBUFFER_COMPLETE);
// use the default texture to render with while we render to the depth texture.
gl.bindTexture(gl.TEXTURE_2D, null);
// Turn on depth testing so we can write to the depth texture.
gl.enable(gl.DEPTH_TEST);
// Render to the depth texture
gl.bindFramebuffer(gl.FRAMEBUFFER, fb);
gl.clear(gl.DEPTH_BUFFER_BIT);
gl.drawArrays(gl.TRIANGLES, 0, 6);
// Now draw with the texture to the canvas
gl.bindFramebuffer(gl.FRAMEBUFFER, null);
gl.bindTexture(gl.TEXTURE_2D, depthTex);
gl.drawArrays(gl.TRIANGLES, 0, 6);
</script>
And a fiddle for it: http://jsfiddle.net/greggman/q3ane/
这篇关于WebGL深度纹理全白？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
