JavaScript-WebGL2学习笔记三-纹理

最新推荐文章于 2024-06-26 17:19:25 发布

kagula086

最新推荐文章于 2024-06-26 17:19:25 发布

阅读量834

点赞数

分类专栏： JavaScript或前端

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

版权

这篇博客详细介绍了JavaScript结合WebGL2进行纹理处理的学习笔记，通过分析四个关键文件——html源文件、webgl2_helper.js辅助库、简单的顶点着色器simple.vs和片段着色器simple.fs，深入探讨了WebGL2中纹理的使用方法。

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

这个例子还是由四个文件组成

html源文件清单

<html>
<head>
    <!--
        Date: 2018-3-19
        Author: kagula

        Description:
        相对于上一个例子
        [1]去掉了透视投影变换.
        [2]添加了纹理显示
        [3]添加了打印投影后的纹理数据.

        Original:
        [1]《利用WebGL2 实现Web前端的GPU计算》
        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个顶点, 用来演示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://www.runoob.com/jsref/met-document-queryselector.html
        const canvas = document.querySelector("#glCanvas");

        // Initialize the GL context
        //為了获取WebGL2上下文,getContext方法传入的参数是"webgl2"

最低0.47元/天解锁文章

kagula086

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
JavaScript-WebGL2学习笔记三-纹理

这个例子还是由四个文件组成html源文件清单&lt;html&gt;&lt;head&gt; &lt;!-- Date: 2018-3-19 Author: kagula Description: 相对于上一个例子 [1]去掉了透视投影变换. [2]添加了纹理显示 [3]添加...
复制链接

扫一扫