求教：视频到半时候的2个三角形能显示，后面变成6个不显示了

来源：6-3 透视投影

king124

2023-08-30

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        #canvas {
            background-color: gray;
        }

        body::before {
            content: " ";
            display: block;
            width: 400px;
            height: 1px;
            position: absolute;
            left: 0;
            top: 200px;
            background-color: red;
        }

        body::after {
            content: " ";
            display: block;
            width: 1px;
            height: 400px;
            position: absolute;
            left: 200px;
            top: 0;
            background-color: red;
        }
    </style>
    <script src="../../js/index.js"></script>
</head>
<body>
<canvas id="canvas" width="400" height="400">此浏览器不支持canvas</canvas>
</body>
</html>
<script>
    const canvas = document.getElementById("canvas");
    const gl = canvas.getContext("webgl");
    const VERTEX_SHADER_SOURCE = `
        attribute vec4 pointPosition;
        attribute vec4 aColor;
        varying vec4 vColor;

        uniform mat4 mat;
        void main(){
            gl_Position = pointPosition;
            vColor = aColor;
        }
    `;
    const FRAGMENT_SHADER_SOURCE = `
        precision lowp float;
        varying vec4 vColor;
        void main(){
            gl_FragColor = vColor;
        }
    `;
    const program = initShader(gl, VERTEX_SHADER_SOURCE, FRAGMENT_SHADER_SOURCE);

    const attr = gl.getAttribLocation(program, "pointPosition");
    const aColor = gl.getAttribLocation(program, "aColor");
    let mat = gl.getUniformLocation(program, "mat");


    // 创建所有顶点
    let points = new Float32Array([
        0.75, 1.0, 0.6, 1.0, 0.0, 0.0,
        0.25, -1.0, 0.6, 1.0, 0.0, 0.0,
        1.0, -1.0, 0.6, 1.0, 0.0, 0.0,

        0.75, 1.0, 0.5, 0.0, 1.0, 0.0,
        0.25, -1.0, 0.5, 0.0, 1.0, 0.0,
        1.0, -1.0, 0.5, 0.0, 1.0, 0.0,

        0.75, 1.0, 0.4, 0.0, 0.0, 1.0,
        0.25, -1.0, 0.4, 0.0, 0.0, 1.0,
        1.0, -1.0, 0.4, 0.0, 0.0, 1.0,

        -0.75, 1.0, 0.6, 1.0, 0.0, 0.0,
        -0.25, -1.0, 0.6, 1.0, 0.0, 0.0,
        -1.0, -1.0, 0.6, 1.0, 0.0, 0.0,

        -0.75, 1.0, 0.5, 0.0, 1.0, 0.0,
        -0.25, -1.0, 0.5, 0.0, 1.0, 0.0,
        -1.0, -1.0, 0.5, 0.0, 1.0, 0.0,

        -0.75, 1.0, 0.4, 0.0, 0.0, 1.0,
        -0.25, -1.0, 0.4, 0.0, 0.0, 1.0,
        -1.0, -1.0, 0.4, 0.0, 0.0, 1.0
    ]);

    // 创建缓冲区域
    let buffer = gl.createBuffer();


    // buffer绑定到webgl上
    gl.bindBuffer(gl.ARRAY_BUFFER, buffer);

    // 把数据写入到buffer中
    gl.bufferData(gl.ARRAY_BUFFER, points, gl.STATIC_DRAW);

    // 获取类型化数组中每个元素的字节数
    let bytes = points.BYTES_PER_ELEMENT;

    // 把缓冲区数据传到顶点着色器的参数中
    gl.vertexAttribPointer(attr, 3, gl.FLOAT, false, bytes * 6, 0);
    // 激活顶点位置
    gl.enableVertexAttribArray(attr);

    // 把缓冲区数据传到顶点着色器的参数中
    gl.vertexAttribPointer(aColor, 3, gl.FLOAT, false, bytes * 6, bytes * 3);
    // 激活顶点位置
    gl.enableVertexAttribArray(aColor);

    let x = 0.0;
    let y = -0.1;
    let z = 0.2;
    function animation() {
        const vm = getViewMatrix(x, y, z, 0.0, 0.0, 0.0, 0.0, 0.6, 0.0);
        const perspective = getPerspective(150, canvas.width / canvas.height, 100, 1);
        gl.uniformMatrix4fv(mat, false, minMatrix(vm, perspective));
        gl.drawArrays(gl.TRIANGLES, 0, 3 * 6);
        requestAnimationFrame(animation);
    }

    animation();


    // 获取透视投影矩阵，参数：视角（度数），宽高比，远点，近点
    function getPerspective(fov, aspect, far, near) {
        fov = fov * Math.PI / 180;
        return new Float32Array([
            1 / (aspect * Math.tan(fov / 2)), 0, 0, 0,
            0, 1 / (Math.tan(fov / 2)), 0, 0,
            0, 0, -(far + near) / (far - near), -(2 * far * near) / (far - near),
            0, 0, -1, 0
        ]);
    }
</script>

写回答

1回答