WEBGL学习【八】模型视图投影矩阵

最新推荐文章于 2024-05-05 18:57:14 发布

小牛itbull

最新推荐文章于 2024-05-05 18:57:14 发布

阅读量602

点赞数

分类专栏： WEBGL学习前端3D学习专区

本文为博主原创文章，未经博主允许不得转载。更多学习资料请访问我爱科技论坛:https://www.52tech.tech

本文链接：https://blog.csdn.net/m0_37981569/article/details/78473425

版权

<!DOCTYPE HTML><html lang="en"><head> <title>WEBGL高级编程----绘制三维场景（变换矩阵）</title> <meta charset="utf-8"> &...

摘要由CSDN通过智能技术生成

<!--探讨WEBGL中不同图形的绘制方法:[待测试2017.11.6]-->
<!DOCTYPE HTML>
<html lang="en">
<head>
    <title>WEBGL高级编程----绘制三维场景（变换矩阵）</title>
    <meta charset="utf-8">
    <!--顶点着色器-->
    <script id="shader-vs" type="x-shader/x-vertex">
      attribute vec3 aVertexPosition;
      attribute vec4 aVertexColor;

      uniform mat4 uMVMatrix;
      uniform mat4 uPMatrix;

      varying vec4 vColor;

      void main() {
        vColor = aVertexColor;
        gl_Position = uPMatrix * uMVMatrix * vec4(aVertexPosition, 1.0);
      }

    </script>

    <!--片元着色器-->
    <script id="shader-fs" type="x-shader/x-fragment">
      precision mediump float;

      varying vec4 vColor;
      void main() {
        gl_FragColor = vColor;
      }

    </script>

    <!--引入我的库文件-->
    <script src="./lib/webgl-debug.js"></script>

    <script type="text/javascript">
        var gl;
        var canvas;
        var shaderProgram;

        //绘制桌子的场景模型
        //地板的顶点位置和索引
        var floorVertexPositionBuffer;
        var floorVertexIndexBuffer;

        //立方体的顶点位置和索引
        var cubeVertexPositionBuffer;
        var cubeVertexIndexBuffer;

        //我的模型 视图 投影矩阵
        var modelViewMatrix;
        var projectionMatrix;

        //模型视图的矩阵栈
        var modelViewMatrixStack;



        //创建我的上下文句柄
        function createGLContext(canvas) {
            var names = ["webgl", "experimental-webgl"];
            var context = null;
            for (var i = 0; i < names.length; i++) {
                try {
                    context = canvas.getContext(names[i]);
                } catch (e) {
                }
                if (context) {
                    break;
                }
            }
            if (context) {
                context.viewportWidth = canvas.width;
                context.viewportHeight = canvas.height;
            } else {
                alert("Failed to create WebGL context!");
            }
            return context;
        }

        //从JavaScript代码中通过DOM加载着色器
        function loadShaderFromDOM(id) {
            var shaderScript = document.getElementById(id);

            // If we don't find an element with the specified id
            // we do an early exit
            if (!shaderScript) {
                return null;
            }

            // Loop through the children for the found DOM element and
            // build up the shader source code as a string
            var shaderSource = "";
            var currentChild = shaderScript.firstChild;
            while (currentChild) {
                if (currentChild.nodeType == 3) { // 3 corresponds to TEXT_NODE
                    shaderSource += currentChild.textContent;
                }
                currentChild = currentChild.nextSibling;
            }

            var shader;
            if (shaderScript.type == "x-shader/x-fragment") {
                shader = gl.createShader(gl.FRAGMENT_SHADER);
            } else if (shaderScript.type == "x-shader/x-vertex") {
                shader = gl.createShader(gl.VERTEX_SHADER);
            } else {
                return null;
            }

            gl.shaderSource(shader, shaderSource);
            gl.compileShader(shader);

            if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
                alert(gl.getShaderInfoLog(shader));
                return null;
            }
            r

最低0.47元/天解锁文章

小牛itbull

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
WEBGL学习【八】模型视图投影矩阵

<!DOCTYPE HTML><html lang="en"><head> <title>WEBGL高级编程----绘制三维场景（变换矩阵）</title> <meta charset="utf-8"> &...
复制链接

扫一扫