WebGL着色器使用

已于 2024-07-01 14:38:32 修改
阅读量407 收藏 1
点赞数 1
CC 4.0 BY-SA版权
分类专栏： WebGL 文章标签： webgl 着色器
于 2020-07-14 16:30:37 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_20535249/article/details/107341096

WebGL着色器使用

1.编译 2.链接 3.使用 4.绘图

第 ① 步：编译着色器

1.1着色器源码：

let vShader_source = `

    attribute vec4 aPosition;

     uniform mat4 uModelViewMatrix;
     uniform mat4 uProjectionMatrix;

     attribute float size; //每个顶点的大小
     void main(){
         // gl_Position =  uModelViewMatrix * aPosition;
         gl_Position = uProjectionMatrix * uModelViewMatrix * aPosition;
         gl_PointSize = size;

     }`;

let fShader_source = `

     precision mediump float;
     uniform bool uBoolFrame;
     uniform vec4 vColor;
     void main(){
         if(uBoolFrame){
             gl_FragColor = vec4(1.0,0.0,0.0,1.0);
         }
         else{
             gl_FragColor = vColor;
         }
         
     }`;

1.2编译着色器：

 //------>>>第1步：编译着色器
 //顶点着色器
  let vShader = gl.createShader(gl.VERTEX_SHADER);
  gl.shaderSource(vShader, vShader_source);
  gl.compileShader(vShader);

  if (!gl.getShaderParameter(vShader, gl.COMPILE_STATUS)) {
      console.error('----->>>vShader 编译错误:', gl.getShaderInfoLog(vShader));
  }



  //片元着色器
  let fShader = gl.createShader(gl.FRAGMENT_SHADER);
  gl.shaderSource(fShader, fShader_source);
  gl.compileShader(fShader);

  if (!gl.getShaderParameter(fShader, gl.COMPILE_STATUS)) {
      console.error('----->>>fShader 编译错误:', gl.getShaderInfoLog(fShader));
  }

第 ② 步：链接着色器程序

//------>>>第2步：链接着色器程序
 const shaderProgram = gl.createProgram();
  gl.attachShader(shaderProgram, vShader);
  gl.attachShader(shaderProgram, fShader);
  gl.linkProgram(shaderProgram);

  if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) {
      console.error('------>>>着色器链接失败: ' + gl.getProgramInfoLog(program));
  }

第 ③ 步：使用着色器程序

 //------>>>第3步：使用着色器程序
  gl.useProgram(shaderProgram);

第 ④ 步：绘图

  gl.drawElements(gl.TRIANGLES, 36, gl.UNSIGNED_SHORT, 0);

附：使用着色器的简单案例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>WebGL</title>
    <style>
        table {
            position: absolute;
            right: 0;
        }
    </style>
    <!-- <script src="./gl-matrix.js"></script> -->
    <script src="./gl-matrix-min.js"></script>  //从http://glmatrix.net/获取 v2.6.1
</head>

<body>

    <table>
        <tr>
            <th>
                长: <input id='long' onchange="change()" type="number" value="100">
            </th>
        </tr>
        <tr>
            <th>
                宽: <input id='width' onchange="change()" type="number" value="100">
            </th>
        </tr>
        <tr>
            <th>
                高: <input id='height' onchange="change()" type="number" value="100">
            </th>
        </tr>
    </table>



    <canvas id="canvas" width="400" height="400"> </canvas>

    <script>

        let vShader_source = `

            attribute vec4 aPosition;

            uniform mat4 uModelViewMatrix;
            uniform mat4 uProjectionMatrix;

            attribute float size; //每个顶点的大小
            void main(){
                // gl_Position =  uModelViewMatrix * aPosition;
                gl_Position = uProjectionMatrix * uModelViewMatrix * aPosition;
                gl_PointSize = size;

            }`;

        let fShader_source = `

            precision mediump float;
            uniform bool uBoolFrame;
            uniform vec4 vColor;
            void main(){
                if(uBoolFrame){
                    gl_FragColor = vec4(1.0,0.0,0.0,1.0);
                }
                else{
                    gl_FragColor = vColor;
                }
                
            }`;


        const modelViewMatrix = mat4.create();

        window.onload = function main() {

            let canvas = document.getElementById('canvas');
            let gl = canvas.getContext('webgl');

            gl.clearColor(0.5, 1.0, 0.5, 1.0);
            gl.clear(gl.COLOR_BUFFER_BIT);


            //------>>>第1步：编译着色器
            //顶点着色器
            let vShader = gl.createShader(gl.VERTEX_SHADER);
            gl.shaderSource(vShader, vShader_source);
            gl.compileShader(vShader);

            if (!gl.getShaderParameter(vShader, gl.COMPILE_STATUS)) {
                console.error('----->>>vShader 编译错误:', gl.getShaderInfoLog(vShader));
            }



            //片元着色器
            let fShader = gl.createShader(gl.FRAGMENT_SHADER);
            gl.shaderSource(fShader, fShader_source);
            gl.compileShader(fShader);

            if (!gl.getShaderParameter(fShader, gl.COMPILE_STATUS)) {
                console.error('----->>>fShader 编译错误:', gl.getShaderInfoLog(fShader));
            }



            //------>>>第2步：链接着色器程序
            const shaderProgram = gl.createProgram();
            gl.attachShader(shaderProgram, vShader);
            gl.attachShader(shaderProgram, fShader);
            gl.linkProgram(shaderProgram);

            if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) {
                console.error('------>>>着色器链接失败: ' + gl.getProgramInfoLog(program));
            }


            //------>>>第3步：使用着色器程序
            gl.useProgram(shaderProgram);



            //修改size
            gl.vertexAttrib1f(gl.getAttribLocation(shaderProgram, 'size'), 10.0);


            //使用顶点缓冲区上传顶点数据
            //1.创建
            let vertexBuffer = gl.createBuffer();
            //2.绑定
            gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
            //3.写入数据
            let vertices = new Float32Array([
                // 前
                -1.0, -1.0, 1.0,
                1.0, -1.0, 1.0,
                1.0, 1.0, 1.0,
                -1.0, 1.0, 1.0,

                // 后
                -1.0, -1.0, -1.0,
                -1.0, 1.0, -1.0,
                1.0, 1.0, -1.0,
                1.0, -1.0, -1.0,

                // 上
                -1.0, 1.0, -1.0,
                -1.0, 1.0, 1.0,
                1.0, 1.0, 1.0,
                1.0, 1.0, -1.0,

                // 下
                -1.0, -1.0, -1.0,
                1.0, -1.0, -1.0,
                1.0, -1.0, 1.0,
                -1.0, -1.0, 1.0,

                // 右
                1.0, -1.0, -1.0,
                1.0, 1.0, -1.0,
                1.0, 1.0, 1.0,
                1.0, -1.0, 1.0,

                // 左
                -1.0, -1.0, -1.0,
                -1.0, -1.0, 1.0,
                -1.0, 1.0, 1.0,
                -1.0, 1.0, -1.0,
            ]);
            gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);
            //4.分配给变量
            let aPosition_Location = gl.getAttribLocation(shaderProgram, 'aPosition');
            gl.vertexAttribPointer(aPosition_Location, 3, gl.FLOAT, false, 0, 0);
            //5.开启变量
            gl.enableVertexAttribArray(aPosition_Location);




            const indexBuffer = gl.createBuffer();
            gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, indexBuffer);

            const indices = new Uint16Array([
                0, 1, 2, 0, 2, 3,    // 前
                4, 5, 6, 4, 6, 7,    // 后
                8, 9, 10, 8, 10, 11,   // 上
                12, 13, 14, 12, 14, 15,   // 下
                16, 17, 18, 16, 18, 19,   // 右
                20, 21, 22, 20, 22, 23,   // 左
            ]);

            gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, indices, gl.STATIC_DRAW);




            mat4.translate(modelViewMatrix, modelViewMatrix, [0.0, 0.0, -8.0]);
            gl.uniformMatrix4fv(gl.getUniformLocation(shaderProgram, 'uModelViewMatrix'), false, modelViewMatrix); //第三个参数指是否转置矩阵，必须为false

            const projectionMatrix = mat4.create();
            mat4.perspective(projectionMatrix, 45 * Math.PI / 180, 1, 0.001, 100.0);
            gl.uniformMatrix4fv(gl.getUniformLocation(shaderProgram, 'uProjectionMatrix'), false, projectionMatrix);




            //------>>>第4步：绘图
            const uModelViewMatrix_Location = gl.getUniformLocation(shaderProgram, 'uModelViewMatrix');
            const uBoolFrame_Location = gl.getUniformLocation(shaderProgram, 'uBoolFrame');



            function render() {
                requestAnimationFrame(render);

                gl.clearDepth(1.0);
                gl.enable(gl.DEPTH_TEST);
                gl.depthFunc(gl.LEQUAL);
                gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);


                mat4.rotate(modelViewMatrix, modelViewMatrix, Math.PI / 200, [0, 1, 0]);
                mat4.rotate(modelViewMatrix, modelViewMatrix, Math.PI / 300, [1, 0, 0]);
                mat4.rotate(modelViewMatrix, modelViewMatrix, Math.PI / 400, [0, 0, 1]);
                gl.uniformMatrix4fv(uModelViewMatrix_Location, false, modelViewMatrix);

                gl.drawElements(gl.TRIANGLES, 36, gl.UNSIGNED_SHORT, 0);

                //绘制线框
                gl.uniform1i(uBoolFrame_Location, 1);
                gl.drawElements(gl.LINE_LOOP, 36, gl.UNSIGNED_SHORT, 0);
                gl.uniform1i(uBoolFrame_Location, 0);


            }
            render();



            // 两秒变色
            let vColor_Location = gl.getUniformLocation(shaderProgram, 'vColor');
            // setInterval(() => {
            //     gl.uniform4f(vColor_Location, Math.random(), Math.random(), Math.random(), 1.0);
            // }, 2000);

            let i = 0;
            setInterval(() => {
                i++;
                if (i >= 200) {
                    i = 0;
                }
                gl.uniform4f(vColor_Location, 1 - i/200, 0.0, i/200, 1.0);
            }, 10);




        }



        //修改长、宽、高
        const initModelViewMatrix = mat4.create();
        mat4.translate(initModelViewMatrix, initModelViewMatrix, [0.0, 0.0, -8.0]);
        function change() {

            let long = document.getElementById('long').value;
            let width = document.getElementById('width').value;
            let height = document.getElementById('height').value;


            mat4.scale(modelViewMatrix, initModelViewMatrix, [long / 100, width / 100, height / 100]);

            console.log(`长：${long},宽：${width},高：${height}`);

        }



    </script>
</body>

</html>
webgl 着色器_如何在WebAssembly中使用WebGL着色器
cumi7754的博客
07-19 2300
webgl 着色器by Dan Ruta 通过Dan Ruta 在WebAssembly中使用WebGL着色器 (Using WebGL shaders in WebAssembly) WebAssembly is blazing fast for number crunching, game engines, and many other things, but nothing can qu...
创建播放和分享像素在线WebGL着色器编辑器
08-09
1. **源代码编辑**：用户可以使用内置的代码编辑器编写GLSL（OpenGL Shading Language）代码，这是WebGL着色器的编程语言。 2. **预览与调试**：编辑器会实时渲染出着色器的效果，便于开发者检查代码的正确性。同时...
glslEditor：简单的WebGL片段着色器编辑器
02-04
基于友好GLSL Shader编辑器，与 （C ++ / OpenGL ES）和 （JS / WebGL）兼容。 最初被开发为器嵌入式编辑。 但是现在已经成长为一个独立的Web应用程序。 由于与该生态系统的其他应用程序（例如直接从控制台在RaspberryPi中运行的兼容，因此与其他项目（如进行交互，允许用户仅通过一个按钮即可将着色器导出到框架。 您可以直接在使用它，也可以通过包含以下两个build文件在自己的网站上托管一个文件： glslEditor.css和glslEditor.js ： < link type =" text/css " rel =" stylesheet " hr
理解WebGL中的顶点着色器和片元着色器
最新发布
weixin_56334307的博客
06-29 391
WebGL是一种基于OpenGL ES的JavaScript API，它允许我们在网页上直接渲染3D图形而无需任何插件。WebGL的核心是着色器编程，它主要包含两种着色器：顶点着色器(Vertex Shader)和片元着色器(Fragment Shader)。顶点着色器负责处理每个顶点的位置，它决定了顶点在屏幕上的最终位置。而片元着色器则负责计算每个像素的颜色值。这两个着色器共同工作，构成了WebGL渲染管线的核心部分。
webgl着色器
啦啦啦啦
04-04 483
webgl着色器的原理 注意：着色器使用类似于C的OpenGL ES 着色器语言（GLSL ES）来编写的。因为着色器程序代码必须预先处理成单个字符串的形式，所以我们用+号将多行字符串连城一个长字符串。每一行以\n结束，这是由于当着色器内部出错时，就能获取出错的行号，这对于检查源代码中的错误很有帮助。但是，\n并不是必须的，你自己编写着色器时，也可以不用它。 初始化着色器的执行流程...
WebGL 着色器
Kristen的博客
05-19 438
WebGL着色器 在上一篇内容中，我们主要讲述了WebGL最基本的一些概念和实现路径。而上一篇中我们也提到了WebGL中非常重要的一个概念，WebGL着色器。 正如前文讲到的，在WebGL中的每次绘制，我们都会需要两个着色器，分别是顶点着色器和片段着色器。每个着色器都是一个函数。顶点着色器和片段着色器都是链接在程序中的。一个典型的 WebGL 程序都会包含很多这样的着色器程序。 顶点着色器 顶点着色器的任务就是产生投影矩阵的坐标。其形式如下： void main() { gl_Position = d
05 WebGL初始化着色器
现在学习也不晚
04-26 1954
初始化着色器函数initShaders()被定义在了cuon.util.js中 使用： initShaders(gl, vshader, fshader); 参数： gl  指定渲染的上下文 vshader  指定顶点着色器程序代码(字符串) fshader  指定片元着色器程序代码（字符串） 返回值： true  初始化着色器成功 false  初始化着色器失败 顶点
WebGL着色器——数组
01-20
本文将深入探讨WebGL着色器中的数组使用和数据传递。 首先，WebGL着色器允许声明数组类型变量，但与JavaScript或C不同的是，它们仅支持一维数组，不支持多维数组。数组的声明语法如下： ```glsl 数组元素的数据...
ShaderEditor:实时 GLSL WebGL 着色器编辑器
06-15
实时 WebGL 着色器编辑器 这是一个 JavaScript 库，旨在提供与Firefox DevTools Shader Editor相同的功能：在浏览器中实时修改着色器的源代码，无需重新加载，易于包含且完全与实现无关。 使用函数钩子修改...
WebH5视频滤镜的百搭解决方案-WebGL着色器.docx
10-26
通过使用WebGL着色器，我们可以实现高度定制化的视频滤镜效果，这些效果远远超出了CSS3滤镜所能达到的范围。尽管WebGL的学习曲线相对较高，但它为Web开发者提供了无限的可能性，特别是在图像处理领域。未来，随着Web...
04 WebGL绘图之着色器
现在学习也不晚
04-26 2655
WebGL不同于canvas 2D的绘图方式，WebGL需要去调用OpenGL的接口的着色器去绘图。所以，我们需要学习WebGL的着色器进行绘图。WebGL的着色器分为两种：1.顶点着色器（Vertex shader）：顶点着色器是用来描述顶点特性（如位置、颜色等）的程序。顶点（Vertex）是指二维或三维空间中的一个点，比如二维或三维图形的端点或交点。2.片元着色器（Fragment shade...
WebGL着色器程序
oLaoJiang1的博客
08-30 371
我们通常使用三角形来构建网格。因为WebGL使用GPU加速计算，有关这些三角形中的信息一般从CPU传送到GPU，这需要大量的通信开销。 WebGL提供了一个解决方案以降低通信开销。由于它使用ES SL(嵌入式系统着色语言)在GPU上运行，我们编写所有程序需要使用着色器程序的客户端系统上的图形元素(这是我们使用OpenGL ES着色语言/GLSL来写程序)。 这些着色器是GPU和用于编写着色器程序的...
WebGL编程（2）-学习总结之着色器
凌风子夜
08-22 642
着色器语言类似于C语言，必须包含一个main函数，void 表示这个函数不会有返回值，并且不能为main函数指定参数。 两种着色器： 1.顶点着色器（vertext shader）： 用于描述顶点特性（位置，大小）。 2.片元着色器（fragment shader）： 用于逐片元处理，显示在屏幕上，如处理光照，颜色等，片元可以理解为像素。 顶点着色器内置变量 变量名 说明 类型 g...
WebGL Shader着色器GLSL语言
weixin_45086164的博客
08-04 1725
WebGL Shader着色器GLSL语言
WebGL着色器& GLSL入门
新缸中之脑
03-28 855
我们已经讨论了着色器和 GLSL，但还没有真正给它们任何具体细节。我想我希望通过示例可以清楚地说明这一点，但为了以防万一，让我们尝试使其更清楚。正如其工作原理中所述，WebGL 每次绘制内容时都需要 2 个着色器。顶点着色器和片段着色器。每个着色器都是一个函数。顶点着色器和片段着色器链接在一起形成着色器程序（或只是程序）。一个典型的 WebGL 应用程序会有很多着色器程序。推荐：用快速搭建3D场景。
WebGL - 着色器扫盲
奇怪的人类
07-15 1013
全文都是知识点归纳和摘抄，没有个人理解！
WebGL着色器快速教程
新缸中之脑
08-11 3448
现在我们已经将着色器、所有坐标和图像加载到 GPU 中，我们已经准备好实际运行着色器程序并让它将我们的图像绘制到画布上。这告诉 WebGL 使用我们的点数组和纹理坐标数组来绘制三角形。这里的数字6意味着我们数组中的每 6 个数字定义一个三角形。每个三角形都有 3 个角，每个角（或顶点）都有一个 x 和 y 坐标。...
WebGL笔记 第二章 着色器
你好，乔先生
10-14 358
WebGL着色器介绍
掌握WebGL着色器：使用three.js制作教程
在使用three.js制作WebGL着色器时，通常需要以下步骤： 1. 创建场景（Scene）：场景是一个容器，用于存储和组织在3D空间中要渲染的所有物体。 2. 创建相机（Camera）：相机定义了3D世界是如何投影到2D屏幕上的。在...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值