WebGL - render depth to fbo texture does not work - opengl-es

For a post processing shader, I need the color and the depth buffer of my framebuffer. Accessing the colorbuffer works fine but I have problems creating the depthbuffer. I always get an INVALID_ENUM error when trying to use texImage2D for the depth texture:
WebGL error INVALID_ENUM in texImage2D(TEXTURE_2D, 0, DEPTH_COMPONENT16, 1536, 502, 0, DEPTH_COMPONENT, UNSIGNED_BYTE, null)
using a renderbuffer instead of a texture works but I want depth in a texture so I can pass it to a shader.
framebuffer with depth texture code:
Framebuffer.prototype.initBufferStuffTexture = function(width, height){
if(this.width == width && this.height == height){
return;
}
this.width = width;
this.height = height;
// remove existing buffers
gl.bindFramebuffer(gl.FRAMEBUFFER, null);
if(this.texture != null){
gl.deleteTexture(this.texture.glid);
this.texture = null;
}
if(this.renderbuffer != null){
gl.deleteRenderbuffer(this.renderbuffer);
this.renderbuffer = null;
}
if(this.framebuffer != null){
gl.deleteFramebuffer(this.framebuffer);
this.framebuffer = null;
}
// create new buffers
this.framebuffer = gl.createFramebuffer();
this.texture = new Texture();
this.texture.glid = gl.createTexture();
this.depth = new Texture();
this.depth.glid = gl.createTexture();
// framebuffer
gl.bindFramebuffer(gl.FRAMEBUFFER, this.framebuffer);
this.framebuffer.width = width;
this.framebuffer.height = height;
// colorbuffer
gl.bindTexture(gl.TEXTURE_2D, this.texture.glid);
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, this.framebuffer.width, this.framebuffer.height, 0, gl.RGBA, gl.UNSIGNED_BYTE, null);
// depthbuffer
gl.bindTexture(gl.TEXTURE_2D, this.depth.glid);
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_COMPONENT16, this.framebuffer.width, this.framebuffer.height, 0, gl.DEPTH_COMPONENT, gl.UNSIGNED_BYTE, null);
// assemble buffers
gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, this.texture.glid, 0);
gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.DEPTH_ATTACHMENT, gl.TEXTURE_2D, this.depth.glid, 0);
this.checkBuffer();
gl.bindTexture(gl.TEXTURE_2D, null);
gl.bindRenderbuffer(gl.RENDERBUFFER, null);
gl.bindFramebuffer(gl.FRAMEBUFFER, null);
}

The OpenGL ES 2.0 specification (against which WebGL was specified) doesn't list GL_DEPTH_COMPONENT (or any of its sized versions) as a valid texture internal format, so it seems not to support depth textures and as the WebGL specification doesn't state anywhere that it behaves differently, it also doesn't support depth textures.
But maybe this link is of help, where depth txtures are emulated in WebGL by packing the depth value into a standard rgba texture.

Related

WebGL - Have Missing Values After Reading From Texture

I'm trying to implement a simple program that writes into texture then reads from it based off this post. I expected to get an array of values from 0 to 99, instead I get the output of the code snippet below which skips values such as 4,5,6,7 and adds in extra 0's.
Why do I occasionally have values that are skipped and those 0's, and what can I do to solve this?
Expected:
[0,1,2,3,4,5,6,7,8, ... 97,98,99]
Output:
const gl = document.createElement("canvas").getContext("webgl");
const vs = `
attribute vec4 position;
attribute vec2 texcoord;
varying vec2 v_texcoord;
void main() {
gl_Position = position;
v_texcoord = texcoord;
}
`;
const fs = `
precision highp float;
uniform sampler2D u_srcData;
uniform float u_add;
varying vec2 v_texcoord;
void main() {
vec4 value = texture2D(u_srcData, v_texcoord);
// We can't choose the destination here.
// It has already been decided by however
// we asked WebGL to rasterize.
gl_FragColor = value + u_add;
}
`;
const program = buildProgram(vs,fs)
const size = 100;
// Uint8Array values default to 0
const srcData = new Uint8Array(size);
// let's use slight more interesting numbers
for (let i = 0; i < size; ++i) {
srcData[i] = i;
}
//console.log('srcData:')
//console.log(srcData)
// Put that data in a texture. NOTE: Textures
// are (generally) 2 dimensional and have a limit
// on their dimensions. That means you can't make
// a 1000000 by 1 texture. Most GPUs limit from
// between 2048 to 16384.
// In our case we're doing 10000 so we could use
// a 100x100 texture. Except that WebGL can
// process 4 values at a time (red, green, blue, alpha)
// so a 50x50 will give us 10000 values
const srcTex = gl.createTexture();
gl.bindTexture(gl.TEXTURE_2D, srcTex);
const level = 0;
const width = Math.sqrt(size / 4);
if (width % 1 !== 0) {
// we need some other technique to fit
// our data into a texture.
alert('size does not have integer square root');
}
const height = width;
const border = 0;
const internalFormat = gl.RGBA;
const format = gl.RGBA;
const type = gl.UNSIGNED_BYTE;
gl.texImage2D(
gl.TEXTURE_2D, level, internalFormat,
width, height, border, format, type, srcData);
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_MAG_FILTER, gl.NEAREST);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
// create a destination texture
const dstTex = gl.createTexture();
gl.bindTexture(gl.TEXTURE_2D, dstTex);
gl.texImage2D(
gl.TEXTURE_2D, level, internalFormat,
width, height, border, format, type, null);
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_MAG_FILTER, gl.NEAREST);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
// make a framebuffer so we can render to the
// destination texture
const fb = gl.createFramebuffer();
gl.bindFramebuffer(gl.FRAMEBUFFER, fb);
// and attach the destination texture
gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, dstTex, level);
gl.useProgram(program)
var data = [
//x,y,texX,texY
-1,-1,0,0,
.1,-1,1,0,
-1,1,0,1,
-1,1,0,1,
1,-1,1,0,
1,1,1,1,
]
// buffer
const positionBuffer = gl.createBuffer()
gl.bindBuffer(gl.ARRAY_BUFFER,positionBuffer)
gl.bufferData(gl.ARRAY_BUFFER,new Float32Array(data),gl.STATIC_DRAW)
// pointer
const positionLoc = gl.getAttribLocation(program,'position')
gl.vertexAttribPointer(
positionLoc,
2,
gl.FLOAT,
0,
4*Float32Array.BYTES_PER_ELEMENT,
0*Float32Array.BYTES_PER_ELEMENT
)
gl.enableVertexAttribArray(positionLoc)
const texcoordLoc = gl.getAttribLocation(program,'texcoord')
gl.vertexAttribPointer(
texcoordLoc,
2,
gl.FLOAT,
0,
4*Float32Array.BYTES_PER_ELEMENT,
2*Float32Array.BYTES_PER_ELEMENT
)
gl.enableVertexAttribArray(texcoordLoc)
// gl.activeTexture(gl.TEXTURE0)
gl.bindTexture(gl.TEXTURE_2D,srcTex)
gl.uniform1f(gl.getUniformLocation(program,'u_add'), 0 / 255)
gl.uniform1i(gl.getUniformLocation(program,'u_srcData'),0)
// set the viewport to match the destination size
gl.viewport(0, 0, width, height);
// draw the quad (2 triangles)
const offset = 0;
const numVertices = 6;
gl.drawArrays(gl.TRIANGLES, offset, numVertices);
// pull out the result
const dstData = new Uint8Array(size);
gl.readPixels(0, 0, width, height, format, type, dstData);
console.log('dstData:');
console.log(dstData);
// FUNCTIONS
function buildShader(type,source){
const shader = gl.createShader(type)
gl.shaderSource(shader,source)
gl.compileShader(shader)
if(!gl.getShaderParameter(shader,gl.COMPILE_STATUS)){
throw new Error('ERROR compiling shader type '+type+' Info: '+gl.getShaderInfoLog(shader))
}
return shader
}
function buildProgram(vs,fs){
const program = gl.createProgram()
gl.attachShader(program,buildShader(gl.VERTEX_SHADER,vs))
gl.attachShader(program,buildShader(gl.FRAGMENT_SHADER,fs))
gl.linkProgram(program)
gl.validateProgram(program)
if(!gl.getProgramParameter(program,gl.LINK_STATUS)){
throw new Error('ERROR: linking program. Info: '+gl.getProgramInfoLog(program))
}
if(!gl.getProgramParameter(program,gl.VALIDATE_STATUS)){
throw new Error('ERROR: validating program. Info: '+gl.getProgramInfoLog(program))
}
return program
}
As gman pointed out, had a .1 instead of a 1 in data.

Copying subdata into empty texture in OpenGL ES / WebGL

I have created a texture this way:
var tex = gl.createTexture();
gl.bindTexture(gl.TEXTURE_2D, tex);
gl.texParameteri(...
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, w, h, 0, gl.RGBA, gl.UNSIGNED_BYTE, null);
Then I try to copy subdata from current framebuffer into it:
gl.copyTexSubImage2D(gl.TEXTURE_2D, 0, ox, oy, sx, sy, w, h);
It does not copy anything for the first time. Texture is still empty (contains zeros).
It works, when I call copyTexSubImage2D for the second time. It also works for the first time, if the size of subarea corresponds to the size of the texture.
I want to avoid sending real data at the beginning (takes too long) and copying larger areas than I need also takes too long.
Is it expected behavior, or it is a bug in Chromes WebGL? Is there any other solution?
Let's test
var gl = twgl.getWebGLContext(document.getElementById("c"));
var programInfo = twgl.createProgramInfo(gl, ["vs", "fs"]);
var greenProgramInfo = twgl.createProgramInfo(gl, ["vs", "green-fs"]);
var arrays = {
position: [-1, -1, 0, 1, -1, 0, -1, 1, 0, -1, 1, 0, 1, -1, 0, 1, 1, 0],
};
var bufferInfo = twgl.createBufferInfoFromArrays(gl, arrays);
twgl.setBuffersAndAttributes(gl, programInfo, bufferInfo);
// make a texture for a framebuffer
var fbtex = gl.createTexture();
gl.bindTexture(gl.TEXTURE_2D, fbtex);
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, 256, 256, 0, gl.RGBA, gl.UNSIGNED_BYTE, null);
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.NEAREST);
// create a framebuffer and attach the texture
var fb = gl.createFramebuffer();
gl.bindFramebuffer(gl.FRAMEBUFFER, fb);
gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, fbtex, 0);
// clear texture to green
//gl.clearColor(0, 1, 0, 1);
//gl.clear(gl.COLOR_BUFFER_BIT);
// Just to make sure let's render green instead of clear to green. (both work for me though)
gl.useProgram(greenProgramInfo.program);
twgl.drawBufferInfo(gl, gl.TRIANGLES, bufferInfo);
// now make a texture
var tex = gl.createTexture();
gl.bindTexture(gl.TEXTURE_2D, tex);
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, 256, 256, 0, gl.RGBA, gl.UNSIGNED_BYTE, null);
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.NEAREST);
// copy part of the fbtexture to it
// target, level, xoffset, yoffset, x, y, width, height
gl.copyTexSubImage2D(gl.TEXTURE_2D, 0, 10, 20, 30, 40, 50, 60);
gl.bindFramebuffer(gl.FRAMEBUFFER, null);
// now clear to red
gl.clearColor(1, 0, 0, 1);
gl.clear(gl.COLOR_BUFFER_BIT);
// Now render with the texture
gl.useProgram(programInfo.program);
var uniforms = {
u_texture: tex,
};
twgl.setUniforms(programInfo, uniforms);
twgl.drawBufferInfo(gl, gl.TRIANGLES, bufferInfo);
canvas { border: 1px solid black; }
<script src="//twgljs.org/dist/twgl-full.min.js"></script>
<script id="vs" type="notjs">
attribute vec4 position;
varying vec2 v_texcoord;
void main() {
gl_Position = position;
v_texcoord = position.xy * 0.5 + 0.5;
}
</script>
<script id="fs" type="notjs">
precision mediump float;
uniform sampler2D u_texture;
varying vec2 v_texcoord;
void main() {
gl_FragColor = texture2D(u_texture, v_texcoord);
}
</script>
<script id="green-fs" type="notjs">
precision mediump float;
varying vec2 v_texcoord;
void main() {
gl_FragColor = vec4(0,1,0,1);
}
</script>
<div>If this works there should be a white (transparent) canvas with a green rectangle inside.</div>
<canvas id="c"></canvas>
Seems to work for me. Is it not working for you?

i would like enhanced that code by loading textures from image and using textures in the scene

I'm french and newbie in open and webgl...nobody's perfect:)
I try to enhanced a code from Evan Wallace to make a little game.
But I try to load textures from images to texturing object with no success...
An idea?
Thank you
here's the code:
function loadImage(url, callback) {
var image = new Image();
image.src = url;
image.onload = callback;
return image;
}
function loadImages(urls, callback) {
var images = [];
var imagesToLoad = urls.length;
// Called each time an image finished
// loading.
var onImageLoad = function() {
--imagesToLoad;
// If all the images are loaded call the callback.
if (imagesToLoad == 0) {
callback(images);
}
};
for (var ii = 0; ii < imagesToLoad; ++ii) {
var image = loadImage(urls[ii], onImageLoad);
images.push(image);
}
}
if (gl) {
loadImages([
"178.jpg",
"football.png",
], PathTracer);
}
function PathTracer(images) {
var vertices = [
-1, -1,
-1, +1,
+1, -1,
+1, +1
];
// create vertex buffer
this.vertexBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, this.vertexBuffer);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);
// create framebuffer
this.framebuffer = gl.createFramebuffer();
// create textures
var type = gl.getExtension('OES_texture_float') ? gl.FLOAT : gl.UNSIGNED_BYTE;
this.textures = [];
for(var i = 0; i < 3; i++) {
this.textures.push(gl.createTexture());
gl.bindTexture(gl.TEXTURE_2D, this.textures[i]);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGB, 512, 512, 0, gl.RGB, type, null);
if (i == 2){
//gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, images); nothing append
//gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, 1, 1, 0, gl.RGBA, gl.UNSIGNED_BYTE,new Uint8Array([0, 255, 255, 0])); with that screen blinking
}
}
gl.bindTexture(gl.TEXTURE_2D, null);
// create render shader
this.renderProgram = compileShader(renderVertexSource, renderFragmentSource);
this.renderVertexAttribute = gl.getAttribLocation(this.renderProgram, 'vertex');
gl.enableVertexAttribArray(this.renderVertexAttribute);
// objects and shader will be filled in when setObjects() is called
this.objects = [];
this.sampleCount = 0;
this.tracerProgram = null;
}

OES_texture_float extension use

How to use the OES_texture_float extension?
I do not understand that it is necessary to specify the arguments the function texImage2D.
var fb=gl.createFramebuffer();
gl.bindFramebuffer(gl.FRAMEBUFFER, fb);
var rb=gl.createRenderbuffer();
gl.bindRenderbuffer(gl.RENDERBUFFER, rb);
gl.renderbufferStorage(gl.RENDERBUFFER, gl.DEPTH_COMPONENT16,size[0],size[1]);
gl.framebufferRenderbuffer(gl.FRAMEBUFFER, gl.DEPTH_ATTACHMENT,gl.RENDERBUFFER, rb);
var texture=gl.createTexture();
gl.bindTexture(gl.TEXTURE_2D, texture);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
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[0], size[1],0, gl.RGBA, ???, ???);
gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0,gl.TEXTURE_2D, texture, 0);
What you need to write instead of "???"
Assuming you have the extension enabled, its gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, size[0], size[1],0, gl.RGBA, gl.FLOAT, null);
HOWEVER, there is a BIG CAVEAT. OES_texture_float extension doesnt guarantee that you will be able to render to a floating point texture. It just means you can create and read from float point texture. The actual extension that allows you to render to float is WEBGL_color_buffer_float. BUT browsers do not bother to show this extension if they support it. So you have to do
if (gl.checkFramebufferStatus(gl.FRAMEBUFFER) !== gl.FRAMEBUFFER_COMPLETE){
// cant render
}
to check if you can actually render to float textures after you attach the textures to FBO.
Source: spent hours to figure out why the thing isnt working in IE even though it supports OES_texture_float extension.
Also be aware that you can not use gl.LINEAR filtering with floating point textures unless you also enable the OES_texture_float_linear extension which is not available on most mobile devices as of August 2015

Depth texture on screen

I am trying to obtain depth texture on my screen and I am getting a blank screen always. I am not sure what I am doing wrong. I have seen some posts about drawing the FBO to a "quad" but I am not clear on how to do so.
Here is my code (I am using depth texture extension as shown here http://blog.tojicode.com/2012/07/using-webgldepthtexture.html):
function initGLTextureFrameBuffer()
{
var depthTextureExt = gl.getExtension("WEBKIT_WEBGL_depth_texture");
if (!depthTextureExt) return;
rttFramebuffer = gl.createFramebuffer();
gl.bindFramebuffer(gl.FRAMEBUFFER, rttFramebuffer);
rttFramebuffer.width = 512;
rttFramebuffer.height = 512;
colorTexture = gl.createTexture();
gl.bindTexture(gl.TEXTURE_2D, 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, rttFramebuffer.width,rttFramebuffer.height, 0, gl.RGBA, gl.UNSIGNED_BYTE, null);
depthTexture = gl.createTexture();
gl.bindTexture(gl.TEXTURE_2D, 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, rttFramebuffer.width, rttFramebuffer.height, 0, gl.DEPTH_COMPONENT, gl.UNSIGNED_SHORT, null);
gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, colorTexture, 0);
gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.DEPTH_ATTACHMENT, gl.TEXTURE_2D, depthTexture,0);
gl.bindTexture(gl.TEXTURE_2D, null);
gl.bindFramebuffer(gl.FRAMEBUFFER, null);
}
Here is my rendering function :
function drawOverlayTriangles()
{
gl.enableVertexAttribArray(shaderProgram.aVertexPosition);
gl.enableVertexAttribArray(shaderProgram.aTextureCoord);
gl.vertexAttrib1f(shaderProgram.aHasTexture, 1.0);
gl.vertexAttrib1f(shaderProgram.aisdepth, 1.0);
gl.bindBuffer(gl.ARRAY_BUFFER, imageTextureCoord);
gl.vertexAttribPointer(shaderProgram.aTextureCoord, 2, gl.FLOAT, false, 0, 0);
//Matrix upload
gl.uniformMatrix4fv(shaderProgram.uMVMatrix, false, pMVMatrix);
gl.uniformMatrix4fv(shaderProgram.uPMatrix, false, perspM);
gl.bindFramebuffer(gl.FRAMEBUFFER, rttFramebuffer);
gl.bindTexture(gl.TEXTURE_2D, depthTexture);
gl.uniform1i(shaderProgram.dTexture, 0);
gl.clearColor(0,0,0,1);
gl.clear(gl.DEPTH_BUFFER_BIT | gl.COLOR_BUFFER_BIT);
for (var i = 0; i < overlay.numElements; i++) {
// Upload overlay vertices
gl.bindBuffer(gl.ARRAY_BUFFER, overlayVertices[i]);
gl.vertexAttribPointer(shaderProgram.aVertexPosition, 3, gl.FLOAT, false, 0, 0);
// Upload overlay colors
gl.bindBuffer(gl.ARRAY_BUFFER, overlayTriangleColors[i]);
gl.vertexAttribPointer(shaderProgram.aVertexColor, 4, gl.FLOAT, false, 0, 0);
// Draw overlay
gl.drawArrays(gl.TRIANGLES, 0, overlay.elementNumVertices[i]);
}
gl.bindTexture(gl.TEXTURE_2D, null);
gl.bindFramebuffer(gl.FRAMEBUFFER, null);
gl.disableVertexAttribArray(shaderProgram.aVertexPosition);
gl.disableVertexAttribArray(shaderProgram.aVertexColor);
gl.vertexAttrib1f(shaderProgram.aisdepth, 0.0);
}
Here is my fragment shader code:
varying vec4 vColor;
varying float vHasTexture;
varying vec2 vTextureCoord;
varying float visdepth;
varying vec4 position_1;
varying float DEPTH;
uniform sampler2D uTexture;
uniform float uTextureAlpha;
uniform sampler2D dTexture;
void main(void) {
if (vHasTexture < 0.5 && visdepth < 0.5)
gl_FragColor = vColor;
if (vHasTexture > 0.5)
{
vec4 textureColor = texture2D(uTexture, vec2(vTextureCoord.s, vTextureCoord.t));
gl_FragColor = vec4(textureColor.rgb, textureColor.a * uTextureAlpha);
}
if (visdepth > 0.5)
{
float z = texture2D(dTexture, vec2(vTextureCoord.s, vTextureCoord.t)).r;
float n = 1.0;
float f = 30.0;
float c = (2.0 * n) / (f + n - z * (f - n));
gl_FragColor.rgb = vec3(c);
}
}
I will be grateful for any help because I have been trying to do this for a week with no luck.
It looks like you are trying to read from and write to the depth texture in the same pass. You have:
gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.DEPTH_ATTACHMENT, gl.TEXTURE_2D, depthTexture,0);
and
gl.bindFramebuffer(gl.FRAMEBUFFER, rttFramebuffer);
gl.bindTexture(gl.TEXTURE_2D, depthTexture);
This will give you undefined results. You need a two pass algorithm. In the first pass you render to the framebuffer you created. In the second pass you render to the default framebuffer (gl.bindFramebuffer(gl.FRAMEBUFFER, 0);) with the depth texture bound for reading.
Alternatively, if you only care about displaying the depth values as color (rather than using depth as an input to another rendering pass) you can replace the line
float z = texture2D(dTexture, vec2(vTextureCoord.s, vTextureCoord.t)).r;
with
float z = gl_FragCoord.z;
That way you are not reading from the same depth texture you are currently writing to. The built in variable gl_FragCoord is the window coordinates of the current fragment. https://www.opengl.org/sdk/docs/man/html/gl_FragCoord.xhtml
In this case you would just render to the default framebuffer instead of rendering to the framebuffer you created.

Resources