Question

当我将对象渲染到帧缓冲对象然后将生成的纹理的四边形渲染到webgl画布时，会出现一个stange问题。在我的项目中，我试图使用（45投影矩阵）来显示对象。我在绘制函数中使用了一个循环来在45个帧缓冲区中进行渲染，但是当我显示渲染的纹理对象时，它将消失几帧，然后重新出现然后再次消失。甚至更奇怪的是，有时当我运行我的应用程序时，一切都显示完美，没有任何闪烁。

如果有人能说明我提到的症状的原因，我会非常感激。

提前致谢

Answer 1

var shCam1={};
shCam1.init=function()
{
var fragShader   = getShader(gl, "shader-fCam1");
var vertexShader = getShader(gl, "shader-vCam1");

shCam1.prog = gl.createProgram();
gl.attachShader(shCam1.prog, vertexShader);
gl.attachShader(shCam1.prog, fragShader);

gl.linkProgram(shCam1.prog);


if (!gl.getProgramParameter(shCam1.prog, gl.LINK_STATUS)) {
    alert("Could not initialise shaders");
}

gl.useProgram(shCam1.prog);
shCam1.prog.vertices = gl.getAttribLocation(shCam1.prog, "vertex");
gl.enableVertexAttribArray(shCam1.prog.vertices);

shCam1.prog.normal = gl.getAttribLocation(shCam1.prog, "normal");
gl.enableVertexAttribArray(shCam1.prog.normal);

shCam1.prog.radius = gl.getAttribLocation(shCam1.prog, "radius");
gl.enableVertexAttribArray(shCam1.prog.radius);

shCam1.prog.pMatrixUniform1 = gl.getUniformLocation(shCam1.prog,"ProjCam");
shCam1.prog.camPos1 = gl.getUniformLocation(shCam1.prog, "PosCam");
shCam1.prog.focalLoc=gl.getUniformLocation(shCam1.prog, "focal");
shCam1.prog.HeightLoc=gl.getUniformLocation(shCam1.prog, "height");
shCam1.prog.WidthLoc=gl.getUniformLocation(shCam1.prog, "width");
}


shCam1.draw = function()
{
if(!mesh) return;
for(var i=0;i<45;i++){
gl.bindTexture(gl.TEXTURE_2D, null);
gl.bindBuffer(gl.ARRAY_BUFFER, null);
gl.bindFramebuffer(gl.FRAMEBUFFER, null);
gl.bindFramebuffer(gl.FRAMEBUFFER, rtFrameBuffers[i][0]);
gl.viewport(0,0,512,512);
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
gl.useProgram(shCam1.prog);
gl.bindBuffer(gl.ARRAY_BUFFER, mesh.vertexBuffer);
gl.vertexAttribPointer(shCam1.prog.vertices, mesh.vertexBuffer.itemSize,      gl.FLOAT, false, 0, 0);

gl.bindBuffer(gl.ARRAY_BUFFER, mesh.normalBuffer);
gl.vertexAttribPointer(shCam1.prog.normal, mesh.normalBuffer.itemSize,  gl.FLOAT, false, 0, 0);

gl.bindBuffer(gl.ARRAY_BUFFER, mesh.radiusBuffer);
gl.vertexAttribPointer(shCam1.prog.radius, mesh.radiusBuffer.itemSize, gl.FLOAT, false, 0, 0);

if((i==12)||(i==13)||(i==14)||(i==27)||(i==28)||(i==29)||(i==42)||(i==43)||(i==44)){
gl.uniform1f(shCam1.prog.HeightLoc,5616.0);
gl.uniform1f(shCam1.prog.WidthLoc,3744.0);
}
else{
gl.uniform1f(shCam1.prog.HeightLoc,3744.0);
gl.uniform1f(shCam1.prog.WidthLoc,5616.0);
}
gl.uniformMatrix4fv(shCam1.prog.pMatrixUniform1, false,ProjectionMatrix[i]);
gl.uniform3fv(shCam1.prog.camPos1, CameraPosition[i]);
gl.uniform1f(shCam1.prog.focalLoc,Focals[i]); 

gl.drawArrays(gl.POINTS,0,mesh.vertexBuffer.numItems);
} 
}

<script id="shader-vCam1" type="x-shader/x-vertex">
attribute vec3 vertex;
attribute vec3 normal;
uniform mat4 ProjCam; 
uniform vec3 CamPos;
uniform float focal;
uniform float height;
uniform float width;        
attribute float radius;
varying vec3 vN;
varying float splat_radius;
varying float depth;
varying float scale_radius; 
void main(void) {
float n=0.1;
float f=100.0;
float fovy=2.0* atan(0.5*(height/focal));
scale_radius=1.0/(2.0*tan(fovy/2.0));
float dot_product=dot(normalize(vertex-Campos),normal);
if(dot_product>=0.0){
splat_radius=0.0;
gl_Position=vec4(1.0,1.0,1.0,1.0);   
}
else{
splat_radius=radius;
vN=normal;
depth=(ProjCam*vec4(vertex, 1.0)).z;
vec4 Frag_clipSpace=ProjCam*vec4(vertex, 1.0);
vec2 Frag_NdcSpace=(Frag_clipSpace.xy/Frag_clipSpace.z);
float x=Frag_NdcSpace.x/width;
float y=Frag_NdcSpace.y/height;
float tx=x*2.0-1.0;
float ty=1.0-2.0*y;
float invz=(-1.0*Frag_clipSpace.z);
float newz=(invz*(f+n))/(n-f)+(2.0*f*n)/(n-f);
float zndc=newz/Frag_clipSpace.z;
gl_Position = vec4(tx,ty,zndc,1.0);
gl_PointSize=1.0; 
}                           

}



<script id="shader-fCam1" type="x-shader/x-fragment">
#extension GL_EXT_draw_buffers : require
precision mediump float;
varying vec3 vN;
varying float splat_radius;
varying float depth;
varying float scale_radius;
void main(void) {
if(splat_radius<=0.0)
discard;

float proj_radius=splat_radius*0.7*scale_radius/depth;
float x=(gl_FragCoord.x-0.5)/512.0;
float y=(gl_FragCoord.y-0.5)/512.0;

gl_FragData[0]=vec4(proj_radius,normalize(vN));
gl_FragData[1]=vec4(depth,proj_radius,x,y);
}         

</script>

闪烁/消失对象的原因

1 个答案: