WebGL自学教程——WebGL示例：10. 透视投影：看起来更真实

最新推荐文章于 2024-05-14 10:26:03 发布

铁文

最新推荐文章于 2024-05-14 10:26:03 发布

阅读量7k

点赞数 1

分类专栏：编程：Web 文章标签： buffer function byte shader null filter

本文链接：https://blog.csdn.net/tiewen/article/details/6906769

版权

编程：Web 专栏收录该内容

46 篇文章 2 订阅

订阅专栏

10. 透视投影：看起来更真实

前面章节中的的投影，都是正视投影，如你看到的立方体，总是方方正正。这和真实世界的情况有所出入：在真实世界，离我们远的那一面会小一点。这是一种透视投影，本章我们就实现它。

我们需要计算一个透视投影矩阵。幸运的是，已近有人在js中为我们实现好了：mat4的perspective函数。该函数通过y方向上可见区域的夹角、纵横比、和近远距离计算透视投影矩阵。投影矩阵需要配合视图矩阵使用。视图矩阵使用mat4.lookAt函数计算。该函数的前三个参数是三个vec3类型，分别表示眼睛的位置、场景中心的位置和从观察者的角度往上的向量；第四个参数可选，用来保存计算好的矩阵。

着色器中需要用到的矩阵已近比较多：阴影矩阵、旋转矩阵和投影矩阵。如果把它们都作为uniform传递给着色器，这并不是好的做法：一来，你要写n个传值语句；二来，着色器中可以使用的uniform的数目是有限的，因而是宝贵的；三来，你需要在着色器中对这些矩阵作出运算，并且很多时候是重复的运算，这造成了资源浪费，是可耻的。较好的做法是在js中就把各种矩阵算好，算出的结果是一个综合的转换矩阵，在顶点着色器中，只需要简单地将该矩阵和顶点位置相乘即可。

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=gb2312">
<script type="text/javascript" src="glMatrix-0.9.5.js"></script>

<script type="text/javascript" src="glt.js"></script> 

<script id="shader-vs" type="x-shader/x-vertex">
attribute vec3 v3Position;
uniform mat4 um4ModelView;
varying vec3 v_texCoord;
uniform int uiShadowMode;

void main(void)
{
    if(uiShadowMode == 0) v_texCoord = v3Position;
    gl_Position = um4ModelView * vec4(v3Position, 1.0);//已近不再计算旋转矩阵、阴影矩阵等；这些矩阵和投影矩阵已经全部合并到um4ModelView中。
}
</script>

<script id="shader-fs" type="x-shader/x-fragment">
#ifdef GL_FRAGMENT_PRECISION_HIGH
    precision highp float;
#else
    precision mediump float;
#endif
uniform samplerCube s_texture;
varying vec3 v_texCoord;
uniform int uiShadowMode;

void main(void)
{
    if(uiShadowMode == 0) gl_FragColor = textureCube(s_texture, v_texCoord);
    else if(uiShadowMode == 1) gl_FragColor = vec4(0.7, 0.7, 0.7, 1.0);
    else gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);
}
</script>

<script>
function ShaderSourceFromScript(scriptID)
{
    var shaderScript = document.getElementById(scriptID);
    if (shaderScript == null) return "";

    var sourceCode = "";
    var child = shaderScript.firstChild;
    while (child)
    {
        if (child.nodeType == child.TEXT_NODE ) sourceCode += child.textContent;
        child = child.nextSibling;
    }

    return sourceCode;
}

var webgl = null;
var vertexShaderObject = null;
var fragmentShaderObject = null;
var programObject = null;
var cubeBuffer = null;
var cubeIndexBuffer = null;
var v3PositionIndex = 0;
var textureObject = null;
var samplerIndex = -1;
var interval = 300;
var angle = 0;
var um4ModelViewIndex = -1;
var leftKeyDown = false;
var rightKeyDown = false;
var angleX = 0;
var upKeyDown = false;
var downKeyDown = false;
var shadowMat4 = null;//预先计算好的阴影矩阵
var uiShadowModeIndex = -1;
var shadowPlaneBuffer = null;
var mousePosition = [0, 0];
var w = 1;
var h = 1;
var perspectiveMat4 = null;//预先计算好的投影矩阵

function LoadData()
{
    var jsCubeData = [
        0.3, 0.3, 0.3,
        0.3, -0.3, 0.3,
        -0.3, -0.3, 0.3,
        -0.3, 0.3, 0.3,
        0.3, 0.3, -0.3,
        0.3, -0.3, -0.3,
        -0.3, -0.3, -0.3,
        -0.3, 0.3, -0.3
    ];

    cubeBuffer = webgl.createBuffer();
    webgl.bindBuffer(webgl.ARRAY_BUFFER, cubeBuffer);
    webgl.bufferData(webgl.ARRAY_BUFFER, new Float32Array(jsCubeData), webgl.STATIC_DRAW);

    var jsCubeIndex = [
        //前
        1,2,3,
        3,4,1,

        //后
        5,8,7,
        7,6,5,

        //左
        4,3,7,
        7,8,4,

        //右
        5,6,2,
        2,1,5,

        //上
        5,1,4,
        4,8,5,

        //下
        2,6,7,
        7,3,2
    ];
    for(var i=0; i<jsCubeIndex.length; ++i) --jsCubeIndex[i];

    cubeIndexBuffer = webgl.createBuffer();
    webgl.bindBuffer(webgl.ELEMENT_ARRAY_BUFFER, cubeIndexBuffer);
    webgl.bufferData(webgl.ELEMENT_ARRAY_BUFFER, new Uint8Array(jsCubeIndex), webgl.STATIC_DRAW);


    textureObject = webgl.createTexture();
    webgl.bindTexture(webgl.TEXTURE_CUBE_MAP, textureObject);
    webgl.texImage2D(webgl.TEXTURE_CUBE_MAP_POSITIVE_X, 0, webgl.RGB, webgl.RGB, webgl.UNSIGNED_BYTE, document.getElementById('myTexture1'));
    webgl.texImage2D(webgl.TEXTURE_CUBE_MAP_NEGATIVE_X, 0, webgl.RGB, webgl.RGB, webgl.UNSIGNED_BYTE, document.getElementById('myTexture2'));
    webgl.texImage2D(webgl.TEXTURE_CUBE_MAP_POSITIVE_Y, 0, webgl.RGB, webgl.RGB, webgl.UNSIGNED_BYTE, document.getElementById('myTexture3'));
    webgl.texImage2D(webgl.TEXTURE_CUBE_MAP_NEGATIVE_Y, 0, webgl.RGB, webgl.RGB, webgl.UNSIGNED_BYTE, document.getElementById('myTexture4'));
    webgl.texImage2D(webgl.TEXTURE_CUBE_MAP_POSITIVE_Z, 0, webgl.RGB, webgl.RGB, webgl.UNSIGNED_BYTE, document.getElementById('myTexture5'));
    webgl.texImage2D(webgl.TEXTURE_CUBE_MAP_NEGATIVE_Z, 0, webgl.RGB, webgl.RGB, webgl.UNSIGNED_BYTE, document.getElementById('myTexture6'));

    var jsShadowPlaneData = [-1.0, -1.0, 1.0,   -1.0,-0.25,-1.0,   1.0,-0.25,-1.0,   1.0, -1.0, 1.0];
    shadowPlaneBuffer = webgl.createBuffer();
    webgl.bindBuffer(webgl.ARRAY_BUFFER, shadowPlaneBuffer );
    webgl.bufferData(webgl.ARRAY_BUFFER, new Float32Array(jsShadowPlaneData ), webgl.STATIC_DRAW);

    shadowMat4 = mat4.create();
    gltMakeShadowMatrix([[-1, -1, 1], [1, -1, 1], [0, -0.25, -1]], [-1, 1, 0, 1], shadowMat4);//预先计算好阴影矩阵，这样就不用重复计算

运行效果如下：

铁文

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
WebGL自学教程——WebGL示例：10. 透视投影：看起来更真实

10. 透视投影：看起来更真实　前面章节中的的投影，都是正视投影，如你看到的立方体，总是方方正正。这和真实世界的情况有所出入：在真实世界，离我们远的那一面会小一点。这是一种透视投影，本章我们就实现它。我们需要计算一个透视投影矩阵。幸运的是，已近有人在js中为我们实现好了：mat4的perspective函数。该函数通过y方向上可见区域的夹角、纵横比、和近远距离计算透
复制链接

扫一扫