webgl，正射投影矩阵

最新推荐文章于 2023-09-14 21:15:56 发布

你大爷的,这都没注册了

最新推荐文章于 2023-09-14 21:15:56 发布

阅读量784

点赞数

分类专栏： webgl three.js 文章标签：矩阵线性代数算法

本文链接：https://blog.csdn.net/webMinStudent/article/details/122163718

版权

webgl 同时被 2 个专栏收录

15 篇文章 0 订阅

订阅专栏

three.js

13 篇文章 1 订阅

订阅专栏

1.正射投影矩阵

正射投影矩阵，牵扯到六个参数

left近裁剪面的左边值
top近裁剪面的上边值
right近裁剪面的右边值
bottom近裁剪面的下边值
near近边界点
far远边界点

在这里插入图片描述
会形成一个立方体的可见区域，在这个立方体的物体，才会绘制出来。
如果物体有有一部分在可视区域立方体外面，一部分在立方体里面，那么就只会在可视区域(立方体)里面的那部分。

所以我们会见到有些物体，被裁剪了，有缺失。

其实是哪个物体的一部分超出了可视区范围。才会出现缺失。
在这里插入图片描述

2.设置正射投影矩阵代码

const projMatrix = new Matrix4();
projMatrix.setOrtho(-1.0, 1.0, -1.0, 1.0, 0.0, 3.0);
// left: -1.0
// right: 1.0
// bottom: -1
// top: 1.0
// near: 0.0
// far: 3.0
// projMatrix就是一个正射投影矩阵了
const u_ProjMatrix = gl.getUniformLocation(gl.program, 'u_ProjMatrix');
gl.uniformMatrix4fv(u_ProjMatrix, false, projMatrix.elements);

3.顶点着色器代码

const VSHADHER_SOURCE =
            'attribute vec4 a_Position;\n' +
            'attribute vec4 a_Color;\n' +
            'varying vec4 c_Color;\n' +
            'uniform mat4 u_ProjMatrix;\n' +
            'uniform mat4 u_ViewMaterix;\n' +
            'void main(){' +
            '       gl_Position = u_ProjMatrix * u_ViewMaterix * a_Position;\n' +
            '       c_Color = a_Color;\n' +
            '}\n';

4.示例代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #canvas {
            height: 400px;
            width: 400px;
        }
    </style>
</head>

<body>
    <canvas id="canvas"></canvas>
    <script src="../lib/cuon-matrix.js"></script>
    <script>
        const gl = canvas.getContext('webgl')
        // console.log(gl, 'gl')
        const VSHADHER_SOURCE =
            'attribute vec4 a_Position;\n' +
            'attribute vec4 a_Color;\n' +
            'varying vec4 c_Color;\n' +
            'uniform mat4 u_ProjMatrix;\n' +
            'uniform mat4 u_ViewMaterix;\n' +
            'void main(){' +
            '       gl_Position = u_ProjMatrix * u_ViewMaterix * a_Position;\n' +
            '       c_Color = a_Color;\n' +
            '}\n';
        const FSHADER_SOURCE =
            '#ifdef GL_ES\n' +
            'precision mediump float;\n' +
            '#endif\n' +
            'varying vec4 c_Color;\n' +
            'void main(){\n' +
            '   gl_FragColor = c_Color;\n' +
            '}\n';
        const createShader = (type, souce) => {
            const shader = gl.createShader(type);
            gl.shaderSource(shader, souce);
            gl.compileShader(shader);
            const info = gl.getShaderParameter(shader, gl.COMPILE_STATUS);
            if (!info) {
                const err = gl.getShaderInfoLog(shader);
                // alert(err === '');
                gl.deleteShader(shader)
                console.log('编译报错信息为' + err);
                return null;
            }
            return shader;
        }
        // console.log(createShader(gl.VERTEX_SHADER, VSHADHER_SOURCE))
        // console.log(createShader(gl.FRAGMENT_SHADER, FSHADER_SOURCE));
        const createProgram = (vshader, fshader) => {
            const vertexshader = createShader(gl.VERTEX_SHADER, vshader); //创建顶点着色器
            const fragmentShader = createShader(gl.FRAGMENT_SHADER, fshader); // 创建片着色器
            if (!vertexshader || !fragmentShader) {
                console.log('创建着色器失败');
                gl.deleteShader(fragmentShader);
                gl.deleteShader(vertexshader);
                return null;
            }
            const program = gl.createProgram();
            gl.attachShader(program, vertexshader);
            gl.attachShader(program, fragmentShader);
            gl.linkProgram(program);
            const linkState = gl.getProgramParameter(program, gl.LINK_STATUS);
            if (!linkState) {
                const err = gl.getProgramInfoLog(program);
                console.log('获取链接报错信息', err)
                gl.deleteShader(fragmentShader)
                gl.deleteShader(vertexshader)
                gl.deleteProgram(program);
                return null
            }
            return program;
        }
        const program = createProgram(VSHADHER_SOURCE, FSHADER_SOURCE)
        // console.log(program, 'program')
        gl.useProgram(program)
        gl.program = program;
        var viewMatrix = new Matrix4();
        viewMatrix.setLookAt(0.20, 0.25, 0.25, 0.0, 0.0, 0.0, 0.0, 1.0, 0.0)
        const u_ViewMaterix = gl.getUniformLocation(gl.program, 'u_ViewMaterix');
        // console.log(u_ViewMaterix, 'u_ViewMaterix');
        gl.uniformMatrix4fv(u_ViewMaterix, false, viewMatrix.elements);
        const initBuffers = () => {
            var verticesColors = new Float32Array([
                // Vertex coordinates and color(RGBA)
                0.0, 0.5, -0.4, 0.4, 1.0, 0.4, // The back green one
                -0.5, -0.5, -0.4, 0.4, 1.0, 0.4,
                0.5, -0.5, -0.4, 1.0, 0.4, 0.4,

                0.5, 0.4, -0.2, 1.0, 0.4, 0.4, // The middle yellow one
                -0.5, 0.4, -0.2, 1.0, 1.0, 0.4,
                0.0, -0.6, -0.2, 1.0, 1.0, 0.4,

                0.0, 0.5, 0.0, 0.4, 0.4, 1.0,  // The front blue one 
                -0.5, -0.5, 0.0, 0.4, 0.4, 1.0,
                0.5, -0.5, 0.0, 1.0, 0.4, 0.4,
            ]);
            
            const size = verticesColors.BYTES_PER_ELEMENT;
            const n = 9;
            const vertexColorbuffer = gl.createBuffer();
            const a_Position = gl.getAttribLocation(gl.program, 'a_Position');
            console.log(a_Position, 'a_Position')
            const a_Color = gl.getAttribLocation(gl.program, 'a_Color');
            console.log(a_Color, 'a_Color')
            gl.bindBuffer(gl.ARRAY_BUFFER, vertexColorbuffer);
            gl.bufferData(gl.ARRAY_BUFFER, verticesColors, gl.STATIC_DRAW);
            gl.vertexAttribPointer(a_Position, 3, gl.FLOAT, false, size * 6, 0);
            gl.enableVertexAttribArray(a_Position);
            gl.vertexAttribPointer(a_Color, 3, gl.FLOAT, false, size * 6, size * 3)
            gl.enableVertexAttribArray(a_Color);
            // 正射投影矩阵
            const projMatrix = new Matrix4();
            projMatrix.setOrtho(-1.0, 1.0, -1.0, 1.0, 0.0, 3.0)
            const u_ProjMatrix = gl.getUniformLocation(gl.program, 'u_ProjMatrix');
            // console.log(u_ProjMatrix, 'u_ProjMatrix')
            // gl.uniformMatrix4fv(u_ProjMatrix, false, u_ProjMatrix.elements);
            gl.uniformMatrix4fv(u_ProjMatrix, false, projMatrix.elements);
            // gl.enableVertexAttribArray(u_ProjMatrix);
            // 正射投影矩阵
            gl.clearColor(0.0, 0.0, 0.0, 1.0);
            gl.clear(gl.COLOR_BUFFER_BIT);
            gl.drawArrays(gl.TRIANGLES, 0, n)
            gl.bindBuffer(gl.ARRAY_BUFFER, null);


        }
        initBuffers();
        document.onkeydown = function(e) {
            keydown(e);
        }
        let x = 0.20;
        let y = 0.25;
        const keydown = (e) => {

            if (e.keyCode === 38) {
                // 向上键
                x += 0.01;
            } else if (e.keyCode === 40) {
                // 向下键
                x -= 0.01;
            } else if (e.keyCode === 37) {
                // 左键
                y -= 0.01;
            } else if (e.keyCode === 39) {
                // 右键
                y += 0.01;
            }
            var viewMatrix = new Matrix4();
            viewMatrix.setLookAt(x, y, 0.25, 0, 0, 0, 0, 1, 0);
            gl.uniformMatrix4fv(u_ViewMaterix, false, viewMatrix.elements);
            gl.clear(gl.COLOR_BUFFER_BIT);
            gl.drawArrays(gl.TRIANGLES, 0, 9)
        }
    </script>
</body>

</html>

你大爷的,这都没注册了

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
webgl，正射投影矩阵

1.正射投影矩阵正射投影矩阵，牵扯到六个参数left近裁剪面的左边值top近裁剪面的上边值right近裁剪面的右边值bottom近裁剪面的下边值near近边界点far远边界点会形成一个立方体的可见区域，在这个立方体的物体，才会绘制出来。如果物体有有一部分在可视区域立方体外面，一部分在立方体里面，那么就只会在可视区域(立方体)里面的那部分。所以我们会见到有些物体，被裁剪了，有缺失。其实是哪个物体的一部分超出了可视区范围。才会出现缺失。2.设置正射投影矩阵代码cons
复制链接

扫一扫