WebGL之旅（十一）透视投影

最新推荐文章于 2022-09-09 17:24:39 发布
最新推荐文章于 2022-09-09 17:24:39 发布
阅读量1.1k 收藏 4
点赞数
分类专栏： WebGL 文章标签： webgl
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xufeng0991/article/details/76100352
版权

与正射投影不同，透视投影会出近大远小的效果，与人的视觉效果一直，游戏中一般都是使用的透视投影。

示例：

/**
 * 透视投影矩阵
 * xu.lidong@qq.com
 * */

var g_vs = `
attribute vec4 a_Position;
attribute vec4 a_Color;
uniform mat4 u_ViewMat;
uniform mat4 u_ProjMat;
varying vec4 v_Color;
void main() {
    gl_Position = u_ProjMat * u_ViewMat * a_Position;
    v_Color = a_Color;
}`;

var g_fs = `
precision mediump float;
varying vec4 v_Color;
void main(){
    gl_FragColor = v_Color;
}`;

function main() {
    var gl = getGL();
    var shaderProgram = initShader(gl);
    var n = initVertexBuffers(gl, shaderProgram);
    draw(gl, shaderProgram, n);
}

function getGL() {
    var canvas = document.getElementById("container");
    return canvas.getContext("webgl") || canvas.getContext("experimental-webgl");
}

function initShader(gl) {
    var vs = gl.createShader(gl.VERTEX_SHADER);
    gl.shaderSource( vs, g_vs);
    gl.compileShader(vs);

    var fs = gl.createShader(gl.FRAGMENT_SHADER);
    gl.shaderSource( fs, g_fs);
    gl.compileShader(fs);

    var shaderProgram = gl.createProgram();
    gl.attachShader(shaderProgram, vs);
    gl.attachShader(shaderProgram, fs);
    gl.linkProgram(shaderProgram);
    gl.useProgram(shaderProgram);

    return shaderProgram;
}

function initVertexBuffers(gl, shaderProgram) {
    var verticesColors = new Float32Array([
        0.75,  1.0,  -4.0,  0.4,  1.0,  0.4,
        0.25, -1.0,  -4.0,  0.4,  1.0,  0.4,
        1.25, -1.0,  -4.0,  1.0,  0.4,  0.4,

        0.75,  1.0,  -2.0,  1.0,  1.0,  0.4,
        0.25, -1.0,  -2.0,  1.0,  1.0,  0.4,
        1.25, -1.0,  -2.0,  1.0,  0.4,  0.4,

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

        -0.75,  1.0,  -4.0,  0.4,  1.0,  0.4,
        -1.25, -1.0,  -4.0,  0.4,  1.0,  0.4,
        -0.25, -1.0,  -4.0,  1.0,  0.4,  0.4,

        -0.75,  1.0,  -2.0,  1.0,  1.0,  0.4,
        -1.25, -1.0,  -2.0,  1.0,  1.0,  0.4,
        -0.25, -1.0,  -2.0,  1.0,  0.4,  0.4,

        -0.75,  1.0,   0.0,  0.4,  0.4,  1.0,
        -1.25, -1.0,   0.0,  0.4,  0.4,  1.0,
        -0.25, -1.0,   0.0,  1.0,  0.4,  0.4,
    ]);
    var FSIZE = verticesColors.BYTES_PER_ELEMENT;

    var vertexColorBuffer = gl.createBuffer();
    gl.bindBuffer(gl.ARRAY_BUFFER, vertexColorBuffer);
    gl.bufferData(gl.ARRAY_BUFFER, verticesColors, gl.STATIC_DRAW);

    var a_Position = gl.getAttribLocation(shaderProgram, "a_Position");
    gl.vertexAttribPointer(a_Position, 3, gl.FLOAT, false, FSIZE * 6, 0);
    gl.enableVertexAttribArray(a_Position);

    var a_Color = gl.getAttribLocation(shaderProgram, "a_Color");
    gl.vertexAttribPointer(a_Color, 3, gl.FLOAT, false, FSIZE * 6, FSIZE * 3);
    gl.enableVertexAttribArray(a_Color);

    return verticesColors.length / 6;
}

function draw(gl, shaderProgram, n) {
    var u_ProjMat = gl.getUniformLocation(shaderProgram, "u_ProjMat");
    var projMat = getPerspectiveProjection(60, 1280/720, 1, 100);
    gl.uniformMatrix4fv(u_ProjMat, false, projMat);

    var u_ViewMat = gl.getUniformLocation(shaderProgram, "u_ViewMat");
    var viewMat = lookAt(0, 0, 6, 0, 0, -100, 0, 1, 0);
    gl.uniformMatrix4fv(u_ViewMat, false, viewMat);

    gl.clearColor(0.0, 0.0, 0.0, 1.0);
    gl.clear(gl.COLOR_BUFFER_BIT);
    gl.drawArrays(gl.TRIANGLES, 0, n);
}

function getPerspectiveProjection(fov, aspect, near, far) {
    var fovy = Math.PI * fov / 180 / 2;
    var s = Math.sin(fovy);
    var rd = 1 / (far - near);
    var ct = Math.cos(fovy) / s;

    return new Float32Array([
        ct / aspect, 0, 0, 0,
        0, ct, 0, 0,
        0, 0, -(far + near) * rd, -1,
        0, 0, -2 * near * far * rd, 0,
    ]);
}

/**
 *  以下代码为lookAt的实现
 * */

/**
 * 由平移向量获取平移矩阵
 * */
function getTranslationMatrix(x, y, z) {
    return new Float32Array([
        1.0, 0.0, 0.0, 0.0,
        0.0, 1.0, 0.0, 0.0,
        0.0, 0.0, 1.0, 0.0,
        x, y, z, 1.0,
    ]);
}

/**
 * 由旋转弧度和旋转轴获取旋转矩阵
 * */
function getRotationMatrix(rad, x, y, z) {
    if (x > 0) {
        // 绕x轴的旋转矩阵
        return new Float32Array([
            1.0, 0.0, 0.0, 0.0,
            0.0, Math.cos(rad), -Math.sin(rad), 0.0,
            0.0, Math.sin(rad), Math.cos(rad), 0.0,
            0.0, 0.0, 0.0, 1.0,
        ]);
    } else if (y > 0) {
        // 绕y轴的旋转矩阵
        return new Float32Array([
            Math.cos(rad), 0.0, -Math.sin(rad), 0.0,
            0.0, 1.0, 0.0, 0.0,
            Math.sin(rad), 0.0, Math.cos(rad), 0.0,
            0.0, 0.0, 0.0, 1.0,
        ]);
    } else if(z > 0) {
        // 绕z轴的旋转矩阵
        return new Float32Array([
            Math.cos(rad), Math.sin(rad), 0.0, 0.0,
            -Math.sin(rad), Math.cos(rad), 0.0, 0.0,
            0.0, 0.0, 1.0, 0.0,
            0.0, 0.0, 0.0, 1.0,
        ]);
    } else {
        // 没有指定旋转轴，报个错，返回一个单位矩阵
        console.error("error: no axis");
        return new Float32Array([
            1.0, 0.0, 0.0, 0.0,
            0.0, 1.0, 0.0, 0.0,
            0.0, 0.0, 1.0, 0.0,
            0.0, 0.0, 0.0, 1.0,
        ]);
    }
}

/**
 * 视图矩阵
 * */
function lookAt(eyeX, eyeY, eyeZ, centerX, centerY, centerZ, upX, upY, upZ) {
    var zAxis = subVector([centerX, centerY, centerZ], [eyeX, eyeY, eyeZ]);
    var N = normalizeVector(zAxis);

    var xAxis = crossMultiVector(N, [upX, upY, upZ]);
    var U = normalizeVector(xAxis);

    var V = crossMultiVector(U, N);

    // 旋转的逆矩阵
    var r = new Float32Array([
        U[0], V[0], -N[0], 0,
        U[1], V[1], -N[1], 0,
        U[2], V[2], -N[2], 0,
        0, 0, 0, 1
    ]);
    // 平移的逆矩阵
    var t = getTranslationMatrix(-eyeX, -eyeY, -eyeZ);

    return multiMatrix44(r, t);
}
/**
 * 由缩放因子获取缩放矩阵
 * */
function getScaleMatrix(xScale, yScale, zScale) {
    return new Float32Array([
        xScale, 0.0, 0.0, 0.0,
        0.0, yScale, 0.0, 0.0,
        0.0, 0.0, zScale, 0.0,
        0.0, 0.0, 0.0, 1.0,
    ]);
}

/**
 * 向量点乘
 * */
function dotMultiVector(v1, v2) {
    var res = 0;
    for (var i = 0; i < v1.length; i++) {
        res += v1[i] * v2[i];
    }
    return res;
}

/**
 * 向量叉乘
 * */
function crossMultiVector(v1, v2) {
    return [
        v1[1] * v2[2] - v1[2] * v2[1],
        v1[2] * v2[0] - v1[0] * v2[2],
        v1[0] * v2[1] - v1[1] * v2[0]
    ];
}

/**
 * 向量减法
 * */
function subVector(v1, v2){
    return [v1[0] - v2[0], v1[1] - v2[1], v1[2] - v2[2]];
}

/**
 * 向量加法
 * */
function addVector(v1, v2){
    return [v1[0] + v2[0], v1[1] + v2[1], v1[2] + v2[2]];
}

/**
 * 向量归一化
 * */
function normalizeVector(v) {
    var len = Math.sqrt(v[0] * v[0] + v[1] * v[1] + v[2] * v[2]);
    return (len > 0.00001) ? [v[0]/len, v[1]/len, v[2]/len] : [0, 0, 0];
}

/**
 * 4 x 4 矩阵的转置
 * */
function transposeMatrix(mat) {
    var res = new Float32Array(16);
    for (var i = 0; i < 4; i++) {
        for (var j = 0; j < 4; j++) {
            res[i * 4 + j] = mat[j * 4 + i];
        }
    }
    return res;
}

/**
 * 4 x 4 矩阵乘法
 * */
function multiMatrix44(m1, m2) {
    var mat1 = transposeMatrix(m1);
    var mat2 = transposeMatrix(m2);

    var res = new Float32Array(16);
    for (var i = 0; i < 4; i++) {
        var row = [mat1[i * 4], mat1[i * 4 + 1], mat1[i * 4 + 2], mat1[i * 4 + 3]];
        for (var j = 0; j < 4; j++) {
            var col = [mat2[j], mat2[j + 4], mat2[j + 8], mat2[j + 12]];
            res[i * 4 + j] = dotMultiVector(row, col);
        }
    }
    return transposeMatrix(res);
}

上列中，前后绘制了分三排绘制了9个三角形，可以看到，距离视点越远的三角形越小，如图：

这里写图片描述

从图中可以看到，遮挡关系是不正确的，前面的物品被后面的遮挡住了，修改draw函数如下：

function draw(gl, shaderProgram, n) {
    var u_ProjMat = gl.getUniformLocation(shaderProgram, "u_ProjMat");
    var projMat = getPerspectiveProjection(60, 1280/720, 1, 100);
    gl.uniformMatrix4fv(u_ProjMat, false, projMat);

    var u_ViewMat = gl.getUniformLocation(shaderProgram, "u_ViewMat");
    var viewMat = lookAt(0, 0, 6, 0, 0, -100, 0, 1, 0);
    gl.uniformMatrix4fv(u_ViewMat, false, viewMat);

    gl.clearColor(0.0, 0.0, 0.0, 1.0);
    gl.enable(gl.DEPTH_TEST);// 开启深度测试
    gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);// 增加清空深度缓冲区
    gl.drawArrays(gl.TRIANGLES, 0, n);
}

然后就正确了，如图：

这里写图片描述

WebGL之旅:

参考书：《WebGL编程指南》

丿寒风
关注
专栏目录
WebGL透视投影
dabaooooq的博客
09-14 391
在透视投影下，产生的三维场景看上去更是有深度感，更加自然，因为我们平时观察真实世界用的也是透视投影。在大多数情况下，比如三维射击类游戏中，我们都应当采用透视投影。在下图的场景中，道路两边都有成排的树木。树应该都是差不多高的，但是在照片上，越远的树看上去越矮。同样，道路尽头的建筑看上去比近处的树矮，但实际上那座建筑比树高很多。这种“远处的东西看上去小”的效果赋予了照片深度感，或称透视感。我们的眼睛就是这样观察世界的。有趣的是，孩童的绘画往往会忽视这一点。在正射投影的可视空间中，不管三角形与视点的距离是远是近，
Three 之 three.js （webgl）透视视角和正交视角，以及透视转正交的视角切换
热门推荐
仙魁XAN
05-02 1万+
Three 之 three.js （webgl）透视视角和正交视角，以及透视转正交的视角切换 目录 Three 之 three.js （webgl）透视视角和正交视角，以及透视转正交的视角切换 一、简单介绍 二、实现原理 三、正投影和透视投影简单解释 四、透视相机（PerspectiveCamera） 五、正交相机（OrthographicCamera） 六、threejs中透视投影相机转换正交投影相机基本原理与代码实现 七、案例实现 八、案例代码下载 一、简单介绍 T...
七、WebGL入门，正交投影，坐标变换初探
a23366192007的博客
03-09 3360
我们之前几节当中，绘制的物体的位置坐标的范围是[-1,1]，超过这个范围的部分将不可见，那么如何看到范围之外的部分呢，这就需要用到投影操作。 说到投影，我们就不得不说下WebGL里面的6大坐标系（同OpenGL）: 1. Object or model coordinates(物体或模型坐标系) 2. World coordinates（世界坐标系） 3. Eye (or Ca
webgl的透视投影矩阵
webMinStudent的博客
01-03 673
1.将webgl的可视空间设置为透视投影矩阵 2.什么是透视投影矩阵 它能实现一种效果，近大远小的效果。因为我们用人眼去观察世界的效果，也是近大远小。 使用cuon-matrix.js来创建一个透视投影矩阵。 const projMatrix = new Matrix4(); // 创建一个4*4的矩阵 projMatrix.setPerspective(30, canvas.width / canvas.height, 1, 1000); // 设置矩阵为透视投影矩阵 垂直视角，及可视空间顶面 和
WebGL编程指南09-组合变换
weixin_46773434的博客
09-09 345
顾名思义组合变换就是，缩放+平移+旋转。
webGL 投影
naooomi的专栏
12-28 846
OpenGL中的投影变换 投影变换相当于选择相机的镜头或则说调整相机的焦距，并把确定的物体投影到胶片上 投影变换确定了视野的大小或视图体的大小 确定哪些物体在视野之内，以及它们的形状和大小 看到的结果投影到投影平面上 投影变换的分类 透视投影   类似于在现实生活中观察事物，越远的物体显示的越小。如观察一条比笔直的马路，边界在很远处近似于交汇于一点。 正交投影   这种方式平行地
webgl学习之路（三）——透视投影矩阵的推导过程
mmmMMM12345的博客
07-01 1106
关于透视投影矩阵的讲解，网上有不少教程，但是有一点大家基本上都没有讲清楚：就是z轴坐标（这里的Z轴相当于景深）的推导过程，基本上是一笔带过。 下面先从头开始讲推导过程，再慢慢说Z轴的推导过程。 透视投影如下图： 透视投影的过程如下：所观察的物体在一个半截面的方锥形中，设坐标为P，将P投影到近截面上，坐标为P’；如下图： 推导P'很简单，就是几何概念相似三角形，推导过程如下图： 大家注意，P’处的Z'坐标就是从视点O到近截面的距离。 但是大家可以考虑这样一个问题：那所有的物体在近截面的
正投影和透视投影相机对比demo.zip
11-28
在WebGL和ThreeJS框架中，两种常见的相机类型是正投影（Orthographic Projection）和透视投影（Perspective Projection），这两种投影方式在创建不同的视觉效果时各有优缺点。下面将详细解释这两种相机类型及其在...
Three 之 three.js （webgl）透视视角和正交视角，以及透视转正交的视角切换代码
05-02
参考博文：Three 之 three.js （webgl）透视视角和正交视角，以及透视转正交的视角切换 https://blog.csdn.net/u014361280/article/details/124544320?spm=1001.2014.3001.5501 一、简单介绍 Three js 开发的一些...
projector:使用 HTML5 和 WebGL 交互式绘制 MD 投影 + 分子查看器
06-04
投影仪 使用 HTML5 和 WebGL 交互式绘制 MD 投影 + 分子查看器 安装： python setup.py install 依赖项： mdtraj： : 混音带： : 麻木的 scipy 学习 烧瓶 皮尔鲁
立方体线框模型透视投影 （计算机图形学实验）
05-16
计算机图形学实验 立方体线框模型透视投影 的可执行文件，亲测可运行，若需报告可以联系我，期待和各位交流
图形学实验-立方体线框模型透视投影
05-03
图形学实验-立方体线框模型透视投影图形学实验-立方体线框模型透视投影图形学实验-立方体线框模型透视投影
计算机图形学透视投影变换实验报告
04-19
实验内容 1.在世界坐标系中定义一个立方体（由6个面组成），并给定观察点在世界坐标系中的位置(a,b,c)以及观察坐标系的方位角θ，俯仰角φ和姿态角α，另外再给定投影面离观察点的距离D，在屏幕上画出立方体的透视投影图形。 2.学习透视投影变换的基本原理。 利使用VC6++ MFC编程，实现透视投影算法。
透视投影
SlimApp
12-12 1368
透视投影最显著的特征就是透视缩短，物体距离照相机越远，它在最终图像中看上去就越小。这是因为透视投影的视景体可以看成是一个金字塔的平截头体（顶部被一个平行于底面的平面截除）。位于视景体之内的物体被投影到金字塔的顶点，也就是照相机或观察点的位置。靠近观察点的物体看上去更大一些，因为和远处的物体相比，它们占据了视景体中相对较大的区域。这种投影方法常用于动画、视觉模拟以及其他要求某种程度的现实感的应用领域
WebGL自学教程——WebGL示例：10. 透视投影：看起来更真实
tiewen的专栏
10-26 7065
10. 透视投影：看起来更真实 　      前面章节中的的投影，都是正视投影，如你看到的立方体，总是方方正正。这和真实世界的情况有所出入：在真实世界，离我们远的那一面会小一点。这是一种透视投影，本章我们就实现它。      我们需要计算一个透视投影矩阵。幸运的是，已近有人在js中为我们实现好了：mat4的perspective函数。该函数通过y方向上可见区域的夹角、纵横比、和近远距离计算透
WebGL实践篇（六）透视投影下的三维图形及其投影矩阵
weixin_44207506的博客
04-21 961
一 透视投影的实现 我们日常观看三维物体的方式就是透视投影，而透视投影符合“近大远小”的原则，那该如何实现呢？方法就是将裁剪控件中的X和Y除以Z即可。Z就是深度值，也就是说距屏幕的远近。随着Z值变大X和Y的值就会变小，那么绘制出来的图形也会变小，距离也就变远了。那Z值的范围是-1到1，如何控制距离远近呢？就可以利用一个因子factor与Z相乘来控制距离啦。 二 透视投影在顶点着色器中的体现 1.将factor因子加入到着色器当中 <script id="vertex-shader-3D"
WebGL入门(十九)-三维视图通过调整正射投影矩阵/盒状可视空间实现三角形的显示与消失
点燃火柴的博客
03-23 820
三维视图正射投影矩阵1.demo效果2.相关知识点2.1 正射投影2.2 Matrix4.setOrtho()函数3. demo代码 1.demo效果 如上，通过上下键调整正投影矩阵参数far的值，通过左右键调整正投影矩阵near的值，重新设置可视空间，实现页面中的三角形消失与复现 2.相关知识点 2.1 正射投影 对于人类而言，只能看到眼前的东西，这就是我们所说的可视范围，在WebGL中同样有可视范围，它包括水平视角、垂直视角和可视深度，我们根据这三个要素定义了 可视空间 ，对于不在可视空间的图形，通常
webgl，正射投影矩阵
webMinStudent的博客
12-27 824
1.正射投影矩阵 正射投影矩阵，牵扯到六个参数 left近裁剪面的 左边值 top近裁剪面的 上边值 right近裁剪面的 右边值 bottom近裁剪面的 下边值 near近边界点 far远边界点 会形成一个立方体的可见区域，在这个立方体的物体，才会绘制出来。 如果物体有有一部分在可视区域立方体外面，一部分在立方体里面，那么就只会在可视区域(立方体)里面的那部分。 所以我们会见到有些物体，被裁剪了，有缺失。 其实是哪个物体的一部分超出了可视区范围。才会出现缺失。 2.设置正射投影矩阵代码 cons
WebGL 三维正射投影
玄魂工作室
08-01 247
本文来自：https://webglfundamentals.org/webgl/lessons/zh_cn/webgl-3d-orthographic.html------------...
掌握WebGL：3D图形编程之旅
本书详细讲解了WebGL的基础知识，包括设置3D场景、坐标系统、视口和投影、颜色和光照模型、纹理映射、着色语言（如GLSL）以及如何进行几何变换等。此外，还涵盖了WebGL与其他Web技术（如JavaScript和CSS3）的集成，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值