WebGL编程指南-15 摄像机视角、视线、上方向概念

本文介绍如何使用视点、观察点及上方向来创建视图矩阵,并通过具体代码示例展示了如何利用这些矩阵来实现三维场景的正确渲染。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

1.demo效果

在这里插入图片描述
如上图,三个不同的三角形展示在三维坐标系中

2.视点,视线,观察点,上方向

视点 指的是摄像机所处位置
视线 指的是摄像机观察的方向
观察点 指的是被观察目标所在的点
上方向 由于在视点与视线确定的情况下,摄像机还是可以沿着视线旋转的,所以还缺少一种信息描述摄像机的状态,那就是像上的方向(上方向)
在这里插入图片描述

3.视图矩阵

我们可以用视点、观察点、上方向者三个矢量创建一个 视图矩阵 ,这个视图矩阵会影响显示在屏幕上的视图,也就是会影响观察者观察到的场景,接下来我们看一下cuon-matrix.js 提供的 Matrix4.setLookAt() 函数

函数功能:根据视点(eyeX, eyeY, eyeZ)、观察点(atX, atY, atZ)、上方向(upX, upY, upZ)
创建视图矩阵,视图矩阵的类型是Matrix4,观察点映射到<canvas>的中心点
-----------------------------------------------------------------------------------
调用示例:Matrix4.setLookAt(eyeX, eyeY, eyeZ, atX, atY, atZ, upX, upY, upZ)
-----------------------------------------------------------------------------------
参数		
			eyeX, eyeY, eyeZ	指定视点
			atX, atY, atZ		指定观察点
			upX, upY, upZ		指定上方向,如果上方向是Y轴正方向,
								  那么(upX,upY,upZ)就是(0,1,0)
-----------------------------------------------------------------------------------			
返回值		无
————————————————

4.demo代码

const VSHADER_SOURCE =
    `
attribute vec4 a_Position;
attribute vec4 a_Color;

uniform mat4 u_ViewMatrix;
varying vec4 v_Color;

void main() {
    gl_Position = u_ViewMatrix * a_Position;
    v_Color = a_Color;
}
`

const FSHADER_SOURCE =
    `
    precision mediump float;

varying vec4 v_Color;
void main() {
    gl_FragColor = v_Color;
}
`

const main = () => {
debugger
    //获取绘制dom
    const canvas = document.getElementById('webgl');

    //获取canvas上下文
    const gl = canvas.getContext('webgl');

    //初始化着色器
    if (!initShaders(gl, VSHADER_SOURCE, FSHADER_SOURCE)) {
        return console.log('Failed to initialize shaders.')
    }

    const initVertexBuffers = (gl) => {

        const u_ViewMatrix = gl.getUniformLocation(gl.program, 'u_ViewMatrix');

        const viewMatrix = new Matrix4();
        viewMatrix.setLookAt(0.20, 0.25, 0.25, 0, 0, 0, 0, 1, 0);

        //类型化数组设置顶点坐标
        const vertices = new Float32Array([
            0.0, 0.5, -0.4, 0.4, 1.0, 0.4,
            -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.0, 0.5, -0.2, 1.0, 0.4, 0.4,
            -0.5, -0.5, -0.2, 1.0, 1.0, 0.4,
            0.5, -0.5, -0.2, 1.0, 1.0, 0.4,

            0.0, 0.5, 0.0, 0.4, 0.4, 1.0,
            -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 n = 9;//点的个数

        //创建缓冲区对象
        const vertexBuffer = gl.createBuffer();
        if (!vertexBuffer) {
            console.log('Failed to create the buffer object');
            return -1
        }

        //将缓冲区对象绑定到目标
        gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
        //向缓冲区对象中写入数据
        gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);

        const a_Position = gl.getAttribLocation(gl.program, 'a_Position');
        const a_Color = gl.getAttribLocation(gl.program, 'a_Color');

        gl.uniformMatrix4fv(u_ViewMatrix, false, viewMatrix.elements)

        //将缓冲区对象分配给a_Position变量
        gl.vertexAttribPointer(a_Position, 3, gl.FLOAT, false, 4 * 6, 0);
       
        //链接a_Position变量与分配给它的缓冲区对象
        gl.enableVertexAttribArray(a_Position);

        gl.vertexAttribPointer(a_Color, 3, gl.FLOAT, false, 4 * 6,  4*3);
        gl.enableVertexAttribArray(a_Color);
        return n
    }

    const n = initVertexBuffers(gl);
    if (n < 0) {
        console.error('n<0')
        return
    }

   
    gl.clearColor(0.0, 0.0, 0.0, 1.0);

    //清空canvas

    gl.clear(gl.COLOR_BUFFER_BIT);

    //绘制一个点
    gl.drawArrays(gl.TRIANGLES, 0, n);


}
main()
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值