From 779d2288a26056d10051b747115b3fde95987ef9 Mon Sep 17 00:00:00 2001 From: lijie67 Date: Wed, 20 Apr 2022 16:30:33 +0800 Subject: [PATCH] Site updated: 2022-04-20 16:30:32 --- 2022/03/webgl-shader/index.html | 8 ++++---- index.html | 4 ++-- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/2022/03/webgl-shader/index.html b/2022/03/webgl-shader/index.html index 11b2aa6..47e6be4 100644 --- a/2022/03/webgl-shader/index.html +++ b/2022/03/webgl-shader/index.html @@ -87,9 +87,9 @@

-

不会3D的厨师不是一个好司机，这个时代不卷就只能去开滴滴。 在元宇宙概念的背景下，上级领导也要求做点技术储备，在学习了一段时间3D框架后，也顺便了解下webGL的原理。

+

不会3D的厨师不是一个好司机，这个时代不卷就只能去开滴滴。 在元宇宙概念的背景下，上级领导也要求做点技术储备，在学习了一些常用的Web3D框架（babylonjs,threejs)后, 好奇于它们的底层原理，所以去了解下webGL的知识，本文主要介绍WebGl中着色器的原理。

webGL

webGL其实是一个很底层的图像引擎，主要提供的能力就是接收输入的图形的顶点坐标，程序在GPU中帮你画出图形(光珊化)和上色后输出到浏览器，在GPU运行的程序则是一种OpenGL着色语言(GLGS)，一个webGL程序大概是如下步骤、其中最关键的还是着色器部分。

-

+

下面的一些代码基本都会省略api调用部分

着色器

简单点的说着色器就干两件事：

    @@ -114,8 +114,8 @@

    给片元着色器传值

    前面片元着色器颜色是固定，但在实际程序中，我们可能会给每个三角形设置不同颜色，或者贴图的时候需要传纹理坐标，那么如何传值呢？同样我们需要创建一个buffer,使用关键字varying将数据通过顶点着色器再传到片元着色器，如下代码：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    //顶点颜色
    const colors = Float32Array([
        0.1, 0.0 , 0.0, 0.1,  //red
        0.1, 1.0 , 0.1, 0.1,  //green
        0.1, 0.0 , 0.1, 0.1,  //blue
    ])

    //顶点着色器
    const vsSource = `
        //属性值，从缓冲中获取数据
        attribute vec4 position;
        //缓冲区取color数据
        attribute vec4 colors;
        //定义varying数据
        varying vec4 v_color;
        void main(void) {
            gl_Position = position;
            v_color = colors;
        }`;

    //片元着色器
    const fsSource = `
        varying vec4 v_color;
        void main(void) {
          gl_FragColor = v_color;
        }`

    -

    从代码上看我们还是用attribute从缓冲区取数据，然后通过varying关键字定义了v_color，在顶点着色器中赋值，最后片元着色器也是通过varying 取到颜色值。我们给三角形三个顶点设置了不同颜色，每个片元的值是由顶点的线性插值得到，所以看到的是下面的渐变的颜色。

    -

    执行顺序

    根据下图，我们再来梳理下着色器的执行流程，首先在缓冲区中获得数据，顶点着色器根据坐标输出图形（三角形），这一步可以叫做图元装配，确定形状后，我们就知道图形中存在多少片元（像素），每个像素都会调用一次片元着色器进行上色。

    +

    从代码上看我们还是用attribute从缓冲区取数据，然后通过varying关键字定义了v_color，在顶点着色器中赋值，最后片元着色器也是通过varying 取到颜色值。我们给三角形三个顶点设置了不同颜色，每个片元的值是由顶点的线性插值得到，所以看到的是下面的渐变的颜色。

    +

    执行顺序

    根据下图，我们再来梳理下着色器的执行流程，首先在缓冲区中获得数据，顶点着色器根据坐标输出图形（三角形），这一步可以叫做图元装配，确定形状后，我们就知道图形中存在多少片元（像素），每个像素都会调用一次片元着色器进行上色。

    顶点索引

    我们知道再复杂的模型的是由三角形的组成的，前面我们画一个平面是使用了两个三角6个顶点来画的，但其实两个三角中其中其实是有两个顶点是重复的，所以我们可以使用gl.drawElemnt来代替gl.drawArrays，前者支持通过索引来指定顶点，这样可以减少我们顶点传输量，一个平面可能就只减少了两个点，但如果图形复杂就减少很多内存了。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16

    //平面顶点
    const position = [
      -1.0, -1.0,  1.0    //顶点0
       1.0, -1.0,  1.0,   //顶点1
       1.0,  1.0,  1.0,   //顶点2
      -1.0,  1.0,  1.0,   //顶点3
    ]
    //索引指定使用哪个顶点
    const index = [
        0,  1,  2, 0,  2,  3 //下标
     ]
    //api部分
    gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, index);
    gl.drawElements(gl.TRIANGLES, 36);

    diff --git a/index.html b/index.html index 9fe8f91..3732ec8 100644 --- a/index.html +++ b/index.html @@ -94,8 +94,8 @@

    - 不会3D的厨师不是一个好司机，这个时代不卷就只能去开滴滴。 在元宇宙概念的背景下，上级领导也要求做点技术储备，在学习了一段时间3D框架后，也顺便了解下webGL的原理。 -webGLwebGL其实是一个很底层的图像引擎，主要提供的能力就是接收输入的图形的顶点坐标，程序在GPU中帮你画出图形(光珊... + 不会3D的厨师不是一个好司机，这个时代不卷就只能去开滴滴。 在元宇宙概念的背景下，上级领导也要求做点技术储备，在学习了一些常用的Web3D框架（babylonjs,threejs)后, 好奇于它们的底层原理，所以去了解下webGL的知识，本文主要介绍WebGl中着色器的原理。 +webGLweb...