WEBGL学习【一】初识WEBGL

最新推荐文章于 2025-06-20 13:29:21 发布

高热度网

最新推荐文章于 2025-06-20 13:29:21 发布

阅读量758

点赞数 2

CC 4.0 BY-SA版权

分类专栏： WEBGL学习前端3D学习专区文章标签： webgl 图形

本文为高热度网（http://blog.gaoredu.com/）原创文章，未经博主允许不得转载。更多原创内容请访问http://blog.gaoredu.com/

本文链接：https://blog.youkuaiyun.com/m0_37981569/article/details/78352374

<html lang="zh-CN">

<head>
    <title>NeHe's WebGL</title>
    <meta charset="UTF-8"/>
    <!--引入需要的库文件-->
    <script type="text/javascript" src="Oak3D_v_0_5.js"></script>

    <!--片元着色器；为JavaScript片段指定一个ID编号，后面我可以更具这个ID编号来获取这段片元着色器的JavaScript片段代码-->
    <script id="shader-fs" type="x-shader/x-fragment">
    precision mediump float;
    void main(void) {
        gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);
    }
    </script>

    <!--顶点着色器；后面可以通过ID编号来获取这段顶点着色器代码-->
    <script id="shader-vs" type="x-shader/x-vertex">
    attribute vec3 aVertexPosition;
    uniform mat4 uMVMatrix;
    uniform mat4 uPMatrix;
    void main(void) {
        gl_Position = uPMatrix * uMVMatrix * vec4(aVertexPosition, 1.0);
    }
    </script>


    <script type="text/javascript">

        var gl;
        //初始化WEBGL
        function initGL(canvas) {
            try {
                //获取WEBGL上下文
                gl = canvas.getContext("experimental-webgl");
                //gl这个上下文中存放了一些属性（canvas的宽度、长度和其他相关属性数据）
                //设置我的视口的宽度和高度
                gl.viewportWidth = canvas.width;
                gl.viewportHeight = canvas.height;
            } catch (e) {
            }
            //如果获取失败
            if (!gl) {
                alert("Could not initialise WebGL, sorry :-(");
            }
        }


        //获取我的着色器对象
        function getShader(gl, id) {
            //根据id获取着色器源程序代码
            var shaderScript = document.getElementById(id);