JavaScript-WebGL2学习笔记二-从外部load shader

最新推荐文章于 2024-05-21 09:37:19 发布

kagula086

最新推荐文章于 2024-05-21 09:37:19 发布

阅读量972

点赞数

分类专栏： JavaScript或前端

本文链接：https://blog.csdn.net/lee353086/article/details/79611373

版权

这篇JavaScript WebGL2学习笔记介绍了如何从URL加载Shader，不再直接在代码中定义，同时移除了顶点颜色输入，转而在fragment shader内部计算着色，通过四个源文件实现了一个简单的demo。

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

在前一篇的基础上做了以下修改

[1]shader改为从url中获取

[2]去掉了四个顶点颜色的输入，改为根据顶点同左下角的距离在fragment shader中计算着色.

现在有四个源文件组成这个demo

html文件

<html>
<head>
    <!--
        Date: 2018-3-19
        Author: kagula
        Prologue:
        WebGL2的例子
        Prologue:

        Description:
        显示一个左下角红色，右上角白色的rectangle.

        Original:
        [1]https://my.oschina.net/thesadabc/blog/1592866

        測試環境
        [1]Chrome 65.0.3325.162
        [2]nginx  1.12.2
    -->
    <title>第二个Webgl2程序</title>

    <meta charset="utf-8">
    <!-- gl-matrix version 2.4.0 from http://glmatrix.net/ -->
    <script type="text/javascript" src="/gl-matrix-min.js"></script>

    <script type="text/javascript" src="/kagula/webgl2_helper.js"></script>
</head>

<body>
    <canvas id="glCanvas" width="320" height="200"></canvas>
</body>

</html>

<script>
    main();

    //弄4个顶点, 4個顔色, 用来演示render流程!
    function initBuffers(gl) {
        // Create a buffer for the square's positions.
        const positionBuffer = gl.createBuffer();

        // Select the positionBuffer as the one to apply buffer
        // operations to from here out.
        gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);

        // Now create an array of positions for the square.
        //WebGL最后会把计算好的图像信息投影到左下角{-1,-1}，右上角{1,1}的区域中。
        const positions = [
           1.0, 1.0,
          -1.0, 1.0,
           1.0, -1.0,
          -1.0, -1.0,
        ];

        // Now pass the list of positions into WebGL to build the
        // shape. We do this by creating a Float32Array from the
        // JavaScript array, then use it to fill the current buffer.
        gl.bufferData(gl.ARRAY_BUFFER,
                      new Float32Array(positions),
                      gl.STATIC_DRAW);

        return {
            position: positionBuffer
        };
    }
    
    async function main() {
        //选择器的使用
        //http

最低0.47元/天解锁文章

kagula086

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
JavaScript-WebGL2学习笔记二-从外部load shader

在前一篇的基础上做了以下修改[1]shader改为从url中获取[2]去掉了四个顶点颜色的输入，改为根据顶点同左下角的距离在fragment shader中计算着色.现在有四个源文件组成这个demohtml文件&lt;html&gt;&lt;head&gt; &lt;!-- Date: 2018-3-19 Author: kagula Pr...
复制链接

扫一扫