javascript – 如何修复3D Serpinski Triangle的透明面

我有一个用Javascript和WebGL编写的3D Serpinski三角形,使用位于：https://github.com/esangel/WebGL/tree/master/Common的Common文件夹

每一面都应该有不同的颜色.三角形渲染和旋转应该如此,但问题是背面是透明的.

我已经尝试在三角函数内部改变baseColors中的vec3,我甚至尝试将另一种颜色推到颜色数组上.我在另一篇文章中读到,当某些多边形被抽出时,可能会发生这种情况.我唯一的猜测是需要重新排列几行代码.

"use strict";

 var canvas;
 var gl;

 var theta = 0.0;
 var dtheta = 0.1;
 var thetaLoc;
 var speed = 50;
 var bufferId;
 var vertices;
 var dir = 1;

var points = [];
var colors = [];

var NumTimesToSubdivide = 3;

window.onload = function init()
{
 canvas = document.getElementById( "gl-canvas" );

 gl = Webglutils.setupWebGL( canvas );
 if (!gl) { alert("WebGL isn't available"); }

 //
 //  Initialize our data for the Sierpinski Gasket
 //

 // First,initialize the vertices of our 3D gasket
 // Four vertices on unit circle
 // Intial tetrahedron with equal length sides

 var vertices = [
     vec3(  0.0000,0.0000,-1.0000 ),vec3(  0.0000,0.9428,0.3333 ),vec3( -0.8165,-0.4714,vec3(  0.8165,0.3333 )
 ];

 divideTetra( vertices[0],vertices[1],vertices[2],vertices[3],NumTimesToSubdivide);

 //
 //  Configure WebGL
 //
 gl.viewport( 0,canvas.width,canvas.height );
 gl.clearColor( 1.0,1.0,1.0 );

 // enable hidden-surface removal

 gl.enable(gl.DEPTH_TEST);

 //  Load shaders and initialize attribute buffers

 var program = initShaders( gl,"vertex-shader","fragment-shader" );
 gl.useProgram( program );

 // Create a buffer object,initialize it,and associate it with the
 //  associated attribute variable in our vertex shader

 var cBuffer = gl.createBuffer();
 gl.bindBuffer( gl.ARRAY_BUFFER,cBuffer );
 gl.bufferData( gl.ARRAY_BUFFER,flatten(colors),gl.STATIC_DRAW );

 var vColor = gl.getAttribLocation( program,"vColor" );
 gl.vertexAttribPointer( vColor,3,gl.FLOAT,false,0 );
 gl.enabLevertexAttribArray( vColor );

 var vBuffer = gl.createBuffer();
 gl.bindBuffer( gl.ARRAY_BUFFER,vBuffer );
 gl.bufferData( gl.ARRAY_BUFFER,flatten(points),gl.STATIC_DRAW );

 var vPosition = gl.getAttribLocation( program,"vPosition" );
 gl.vertexAttribPointer( vPosition,0 );
 gl.enabLevertexAttribArray(vPosition);

 thetaLoc = gl.getUniformlocation(program,"theta");
 gl.uniform1f(thetaLoc,theta);

 render();
};

function triangle( a,b,c,color )
{

 // add colors and vertices for one triangle

 var baseColors = [
     vec3(1.0,0.0,0.0),vec3(0.0,1.0),vec3(1.0,0.0)
 ];

 colors.push( baseColors[color] );
 points.push( a );
 colors.push( baseColors[color] );
 points.push( b );
 colors.push( baseColors[color] );
 points.push(c);

 //colors.push(baseColors[color]);
// points.push(a);


}

function tetra( a,d )
{
 // tetrahedron with each side using
 // a different color

 triangle( a,0 );
 triangle( a,d,1 );
 triangle( a,2 );
 triangle( b,3 ); //bcd
}

function divideTetra( a,count )
{
 // check for end of recursion

 if ( count === 0 ) {
     tetra( a,d );
 }

 // find midpoints of sides
 // divide four smaller tetrahedra

 else {
     var ab = mix( a,0.5 );
     var ac = mix( a,0.5 );
     var ad = mix( a,0.5 );
     var bc = mix( b,0.5 );
     var bd = mix( b,0.5 );
     var cd = mix( c,0.5 );

     --count;

     divideTetra(  a,ab,ac,ad,count );
     divideTetra( ab,bc,bd,count );
     divideTetra( ac,cd,count );
     divideTetra( ad,count );
 }
}


function render()
{


 gl.clear( gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
 //gl.drawArrays(gl.TRIANGLES,points.length);

 theta += dir * dtheta * (speed / 100);
 gl.uniform1f(thetaLoc,theta);

 gl.drawArrays(gl.TRIANGLES,points.length);
 requestAnimFrame(render);
}

这是HTML：

Meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
varying vec4 color;
    uniform float theta;

    void
    main()
    {
    gl_Position = vec4(vPosition,1.0);
    color = vec4(vColor,1.0);

    float s = sin( theta );
    float c = cos( theta );

    gl_Position.x = -s * vPosition.z + c * vPosition.x;
    gl_Position.z =  s * vPosition.x + c * vPosition.z;
    gl_Position.z = 0.0;
    gl_Position.w = 1.0;
    }
varying vec4 color;

    void
    main()
    {

    gl_FragColor = color;
    }
browser doesn't support the HTML5 canvas element


三角形的背面是透明的,但是如果你看一下baseColors数组,你会看到背面有一个额外的颜色.


最佳答案
我不是WebGL专家,但看起来你在顶点着色器中覆盖了gl_Position.z的值.

gl_Position.x = -s * vPosition.z + c * vPosition.x;
gl_Position.z =  s * vPosition.x + c * vPosition.z;
gl_Position.z = 0.0; // <--- REMOVE THIS LINE
gl_Position.w = 1.0;

正确删除该线会使四面体全部呈现四边形.

                
                                原文地址：https://www.jb51.cc/js/429295.html
                                 版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。

javascript – 如何修复3D Serpinski Triangle的透明面

相关推荐