Question

我尝试为着色器增加深度，倾斜和偏航支持。

这是我的代码。它有效，但是z的值无效。可能是0或1或介于两者之间的任何值，都没有可见的变化。所以，没有深度。

我发现的所有示例都使用矩阵来计算旋转。我更喜欢自己计算所有顶点和纹理坐标。

    m4 = twgl.m4;

    _webgl.vertex_shader = `
        attribute vec4 position;
        attribute vec2 texcoord;
        uniform vec4 u_resolution;

        varying vec3 v_texcoord;

        void main() {
            gl_Position = position ;
            v_texcoord = vec3(texcoord.xy, 1) ;
        }
    `;

    _webgl.fragment_shader = `
        precision mediump float ;

        varying vec3 v_texcoord ;
        uniform sampler2D tex ;
        uniform float alpha ;

        void main()
        {
            gl_FragColor = texture2DProj( tex , v_texcoord );
            gl_FragColor.a *= alpha ;
            gl_FragColor.rgb *= alpha ;
        }
    `;

    gl_.programInfo = twgl.createProgramInfo( gl , [_webgl.vertex_shader,_webgl.fragment_shader] );
    gl_.program = gl_.programInfo.program ;
    gl.useProgram( gl_.program );

    gl.disable( gl.DEPTH_TEST );
    gl.blendFunc( gl.SRC_ALPHA , gl.ONE_MINUS_SRC_ALPHA );
    gl.blendFunc( gl.ONE , gl.ONE_MINUS_SRC_ALPHA );
    gl.enable( gl.BLEND ) ;
    gl_.resolutionLocation = gl.getUniformLocation( gl_.program , "u_resolution" );
    _webgl.webglalpha = gl.getUniformLocation( gl_.program , "alpha" );
    gl.uniform1f( _webgl.webglalpha, 1 );
    _webgl.current_opacity = 1 ;

    gl_.positionLocation = gl.getAttribLocation( gl_.program , "position" );
    gl_.texcoordLocation = gl.getAttribLocation( gl_.program , "texcoord" );
    gl_.posBuffer = gl.createBuffer();
    gl_.texcoordBuffer = gl.createBuffer();

    gl.enableVertexAttribArray( gl_.positionLocation );
    gl.bindBuffer( gl.ARRAY_BUFFER , gl_.posBuffer );
    gl.vertexAttribPointer( gl_.positionLocation, 3, gl.FLOAT, false, 0, 0 );

    gl.enableVertexAttribArray( gl_.texcoordLocation );
    gl.bindBuffer( gl.ARRAY_BUFFER, gl_.texcoordBuffer );
    gl.vertexAttribPointer( gl_.texcoordLocation , 2, gl.FLOAT, false, 0, 0 );

在渲染期间，对于屏幕上可见的每个图片，我将顶点的xyz坐标推入 _webgl_draw__position 数组中，并将纹理的xy推入 _webgl_draw__texcoord 数组中。

要计算每个对象“ e”的坐标，请执行以下操作：
（cam是当前相机）
（我尚未计算z。我只是将z手动设置为0以外的其他值，然后再尝试为偏航和俯仰旋转添加数学。）

e.x_relative_to_camera = e.x - cam.x ;
e.y_relative_to_camera = e.y - cam.y ;
e.z_relative_to_camera = e.z - cam.z ;
e.distance = get_distance_between_points_3d( cam.x , cam.y , cam.z , e.x , e.y , e.z ) ;

e.angle_from_camera_on_xz = get_angle_from_points( cam.x , cam.z , e.x_relative_to_camera , e.z_relative_to_camera )-90 ;
e.angle_from_view_xz = _difference_between_angles_( cam.angle_left_right , e.angle_from_camera_on_xz );
e.x_on_screen = (e.angle_from_view_xz/(cam.FOV/2)) * half_of_game_width ;

e.angle_from_camera_on_yz = get_angle_from_points( cam.y , cam.z , e.y_relative_to_camera , e.z_relative_to_camera )-90 ;
e.angle_from_view_yz = _difference_entre_angles_( cam.angle_top_bottom , e.angle_from_camera_on_yz );
e.y_on_screen = (e.angle_from_view_yz/(cam.FOV/2)) * half_of_game_width ;

e.scaling_on_screen = cam.distance_at_which_scaling_is_1 / e.z_relative_to_camera ;

例如，它可用于以下四边形： -0.13199636340141296，-0.21341681480407715、0
0.13605406880378723，-0.21341681480407715，0
-0.13199636340141296，-0.6469348073005676、0
-0.13199636340141296，-0.6469348073005676、0
0.13605406880378723，-0.21341681480407715，0
0.13605406880378723，-0.6469348073005676，0

然后，最后一次渲染所有内容：

gl.bindBuffer( gl.ARRAY_BUFFER , gl_.posBuffer );
gl.bufferData( gl.ARRAY_BUFFER, _webgl_draw__position , gl.STATIC_DRAW );

gl.bindBuffer( gl.ARRAY_BUFFER, gl_.texcoordBuffer );
gl.bufferData( gl.ARRAY_BUFFER, _webgl_draw__texcoord , gl.STATIC_DRAW );

gl.drawArrays( gl.TRIANGLES, 0, _webgl_draw__position.length/3 );

我想念什么？

为我的着色器增加俯仰和偏航支持

0 个答案: