最新公告
  • 欢迎您光临起源地模板网,本站秉承服务宗旨 履行“站长”责任,销售只是起点 服务永无止境!立即加入钻石VIP
  • 前端也要懂图形化: 浅谈 WebGL 技术

    正文概述 掘金(ELab)   2021-05-27   776

    WebGL概述

    WebGL是一项结合了HTML5和JavaScript,用来在网页上绘制和渲染复杂三维图形的技术。WebGL通过JavaScript操作OpenGL接口的标准,把三维空间图像显示在二维的屏幕上。

    WebGL与OpenGL

    OpenGL本身是一套规范,不是API,通过OpenGL来统一各个显卡厂家实现操作图形、图像的实现标准。WebGL的技术规范继承自OpenGL ES,从2.0版本开始,OpenGL支持可编程着色器方法,这个支持可以让我们通过着色器语言编写着色器程序,代表我们可以精确控制每个像素的位置和颜色。在OpenGL2.0规范中,GPU可以执行着色器程序,根据着色器程序生成像素数据,最终显示在屏幕上。

    前端也要懂图形化: 浅谈 WebGL 技术

    WebGL程序的结构

    相对于传统网页,支持WebGL的浏览器底层接入了OpenGL/OpenGL ES标准,WebGL通过实现标准支持着色器语言编程语言GLSL ES,在我们实际开发过程中,GLSL ES通常是以字符串的形式存在JavaScript中,我们可以通过JavaScript修改GLSL ES字符串来改变着色器程序。

    前端也要懂图形化: 浅谈 WebGL 技术

    着色器

    着色器是WebGL依赖的实现图像渲染的一种绘图机制。WebGL在GPU中运行,因此需要使用能够在GPU上运行的代码,这样的代码需要提供成对的方法,他们分别是顶点着色器片元着色器

    顶点着色器

    顶点着色器的作用是计算顶点的位置,根据计算出的一系列顶点位置,WebGL可以对点, 线和三角形在内的一些图元进行光栅化处理。WebGL中显示的物体由一系列顶点组成,每个顶点都有位置和颜色等信息,在默认的情况下,所有像素的颜色都由线性插值计算得来,自动形成平滑渐变。

    下面是顶点着色器的示例代码,顶点着色器通过a_Positiona_PointSize分别接收并设置顶点的位置和大小,通过a_Color从程序获取颜色并通过v_Color传递给片元着色器。其中,gl_Positiongl_PointSize是着色器的内置变量,分别代表顶点的位置和大小,因此这段代码的作用是设置顶点的位置和大小,同时接收程序传入的颜色a_Color并把它传递给片元着色器。

    在着色器内,一般命名以gl_开头的变量是着色器的内置变量,除此之外webgl__webgl还是着色器保留字,自定义变量不能以webgl__webgl开头。变量声明一般包含<存储限定符><数据类型><变量名称>,以attribute vec4 a_Position为例,attribute表示存储限定符,vec是数据类型,a_Position为变量名称。

    const vs_source = `
    
        attribute vec4 a_Position;
    
        attribute float a_PointSize;
    
        attribute vec4 a_Color;
    
        varying vec4 v_Color;
    
        void main() {
    
            gl_Position = a_Position;
    
            gl_PointSize = a_PointSize;
    
            v_Color = a_Color;
    
        }
    
    `;
    

    片元着色器

    片元着色器的作用是计算出当前绘制图元中每个像素的颜色值,逐片元控制片元的颜色和纹理等渲染。关于片元,片元包含颜色、深度和纹理等信息,片元相对像素多出许多信息,从直观表现上看两者都是像素点。关于图元,图元是指WebGL中可以直接绘制7种基本图形,它们分别是:

    • 孤立点:gl.POINTS
    • 孤立线段:gl.LINES
    • 连续线段:gl.LINE_STRIP
    • 连续线圈:gl.LINE_LOOP
    • 孤立三角形:gl.TRIANGLES
    • 三角带:gl.TRIANGLE_STRIP
    • 三角扇:gl.TRIANGLE_FAN

    前端也要懂图形化: 浅谈 WebGL 技术前端也要懂图形化: 浅谈 WebGL 技术前端也要懂图形化: 浅谈 WebGL 技术前端也要懂图形化: 浅谈 WebGL 技术

    前端也要懂图形化: 浅谈 WebGL 技术前端也要懂图形化: 浅谈 WebGL 技术前端也要懂图形化: 浅谈 WebGL 技术

    下面是片元着色器的示例代码,首先设置了float为中等精度,然后通过v_Color接收来自顶点着色器的颜色并将其设置给内置变量gl_FragColor,其中通过内置变量gl_FragColor来确定顶点像素颜色。

    关于精度可以详见WebGL着色器精度设置。

    const fs_source = `
    
        precision mediump float;
    
        varying vec4 v_Color;
    
        void main() {
    
            gl_FragColor = v_Color;
    
        }
    
    `;
    

    存储限定符

    在上面例子中,我们在声明变量时,除了指定变量类型外,还使用了存储限定符。在GLSL中,应该根据变量用途使用存储限定符修饰。一般常用到三种存储限定符:

    attribute 属性

    attribute只能用于顶点着色器,用来存储顶点着色器中每个顶点的输入,包括顶点位置坐标、纹理坐标和颜色等信息。

    通常情况下我们会使用缓冲,缓冲是程序发送给GPU的数据,attribute用来从缓冲中获取所需数据,并将它提供给顶点着色器。程序可以指定每次顶点着色器运行时读取缓冲的规则。

    使用缓冲设置顶点信息

    生成缓冲代码

    // 创建缓冲对象
    
    const vertexBuffer = gl.createBuffer();
    

    将数据写入缓冲

    // 缓冲数据
    
    const vertices = new Float32Array([
    
     -0.5, 0.5, 10.0, 1.0, 0.0, 0.0, 1.0,
    
     -0.5, -0.5, 20.0, 0.0, 1.0, 0.0, 1.0,
    
     0.5, 0.5, 30.0, 0.0, 0.0, 1.0, 1.0
    
    ]);
    
    // 绑定缓冲对象
    
    gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
    
    // 将缓冲数据填充缓冲对象
    
    gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);
    

    设置缓冲读取规则和启用缓冲对象

     // 调用顶点缓冲,将缓冲数据中一组7个数据中的前2个数据传给a_Position
    
     gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, SIZE * 7, 0);
    
     // 调用顶点缓冲,将缓冲数据中一组7个数据中的第3(偏移2个数据取1一个)个数据传给a_PointSize
    
     gl.vertexAttribPointer(a_PointSize, 1, gl.FLOAT, false, SIZE * 7, SIZE * 2);
    
     // 调用顶点缓冲,将缓冲数据中一组7个数据中的第4-7(偏移3个数据取4个)个数据传给a_Color
    
     gl.vertexAttribPointer(a_Color, 4, gl.FLOAT, false, SIZE * 7, SIZE * 3);
    
     // 激活a_Position使用缓冲数组,下同
    
     gl.enableVertexAttribArray(a_Position);
    
     gl.enableVertexAttribArray(a_PointSize);
    
     gl.enableVertexAttribArray(a_Color);
    

    uniform 全局变量

    uniform可以存在顶点着色器和片元着色器,用来存储图元处理过程中保持不变的值,例如颜色。值得一提的是,顶点着色器和片元着色器共享了 uniform 变量的命名空间,如果在顶点着色器和片段着色器中都声明了同名 uniform 变量,二者声明的类型和着色器的精度必须一致。

    varying 可变量

    varying一般同时存在顶点着色器和片元着色器中,它的作用是从顶点着色器向片元着色器传输数据,在图元装配后,WegGL会对图元光栅化,在光栅化过程中,varying声明的变量的值会进行内插,使varying变量的值线性(默认)变化。

    一个简单的例子:彩色三角形

    在这段代码中,指定三角形的三个点,分别位于画布的左上角、左下角和右上角,他们的颜色分别为红色、绿色和蓝色,大家可以运行示例代码查看效果。

    // 顶点着色器
    
    const vs_source = `
    
      attribute vec4 a_Position;
    
      attribute float a_PointSize;
    
      attribute vec4 a_Color;
    
      varying vec4 v_Color;
    
      void main() {
    
        gl_Position = a_Position;
    
        gl_PointSize = a_PointSize;
    
        v_Color = a_Color;
    
      }
    
    `;
    
     
    
    // 片元着色器
    
    const fs_source = `
    
      precision mediump float;
    
      varying vec4 v_Color;
    
      void main() {
    
        gl_FragColor = v_Color;
    
      }
    
    `;
    
     const canvas = document.getElementById('app');
    
     const gl = canvas.getContext('webgl');
    
     
    
     function initShader() {
    
       // 创建shader
    
       const vs_shader = gl.createShader(gl.VERTEX_SHADER);
    
       gl.shaderSource(vs_shader, vs_source);
    
       gl.compileShader(vs_shader);
    
       if (!gl.getShaderParameter(vs_shader, gl.COMPILE_STATUS)) {
    
         const error = gl.getShaderInfoLog(vs_shader);
    
         console.log('Failed to compile vs_shader:' + error);
    
         gl.deleteShader(vs_shader);
    
         return;
    
       }
    
       const fs_shader = gl.createShader(gl.FRAGMENT_SHADER);
    
       gl.shaderSource(fs_shader, fs_source);
    
       gl.compileShader(fs_shader);
    
       if (!gl.getShaderParameter(fs_shader, gl.COMPILE_STATUS)) {
    
         const error = gl.getShaderInfoLog(fs_shader);
    
         console.log('Failed to compile fs_shader:' + error);
    
         gl.deleteShader(fs_shader);
    
         return;
    
       }
    
       // 创建program
    
       const program = gl.createProgram();
    
       gl.attachShader(program, vs_shader);
    
       gl.attachShader(program, fs_shader);
    
       gl.linkProgram(program);
    
       if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
    
         const error = gl.getProgramInfoLog(program);
    
         console.log('无法链接程序对象:' + error);
    
         gl.deleteProgram(program);
    
         gl.deleteShader(fs_shader);
    
         gl.deleteShader(vs_shader);
    
         return;
    
       }
    
       gl.useProgram(program);
    
       gl.program = program;
    
       // 获取着色器变量位置和赋值
    
       const a_Position = gl.getAttribLocation(gl.program, 'a_Position');
    
       if (a_Position < 0) {
    
         console.log('Failed to get the storage location of a_Position');
    
         return;
    
       }
    
       const a_Color = gl.getAttribLocation(gl.program, 'a_Color');
    
       if (a_Color < 0) {
    
         console.log('Failed to get the storage location of a_Color');
    
         return;
    
       }
    
       // 使用缓冲区表示多个值
    
      const vertices = new Float32Array([
    
        -0.5, 0.5, 1.0, 0.0, 0.0, 1.0,
    
        -0.5, -0.5, 0.0, 1.0, 0.0, 1.0,
    
        0.5, 0.5, 0.0, 0.0, 1.0, 1.0
    
      ])
    
      const SIZE = vertices.BYTES_PER_ELEMENT;
    
       const vertexBuffer = gl.createBuffer();
    
       gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
    
       gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);
    
       gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, SIZE * 6, 0);
    
       gl.vertexAttribPointer(a_Color, 4, gl.FLOAT, false, SIZE * 6, SIZE * 2);
    
       gl.enableVertexAttribArray(a_Position);
    
       gl.enableVertexAttribArray(a_Color);
    
     }
    
     initShader();
    
     
    
     gl.clearColor(0.0, 0.0, 0.0, 1.0);
    
     gl.clear(gl.COLOR_BUFFER_BIT);
    
     
    
     gl.drawArrays(gl.TRIANGLES, 0, 3);
    

    我们分别只设置了三个点的颜色,但是渲染出来的图形却是彩色的三角形,造成这样的结果的原因是因为v_Color在传递的过程中经过了内插。以左上角点和右上角点对比,代表rgb颜色三个值线性向目标值变化,内插过程将颜色分配给光栅化后每个片元(像素)颜色,造成了颜色渐变。

    前端也要懂图形化: 浅谈 WebGL 技术前端也要懂图形化: 浅谈 WebGL 技术

    WebGL渲染过程

    以上面例子为例,三角形的有3个点,需要执行3次顶点着色器,把3个点位置存储在图形装配区域。顶点着色器执行完毕后,三个点的坐标都已经处在图形装配区,开始装配图形,由于我们设置的是gl.TRIANGLES,图形装配出一个三角形。随后会进行光栅化,将装配好的图像转化成片元组合,也就是像素点,varying变量的插值也在这一过程中进行。光栅化后,程序调用片元着色器,假定光栅化后有10个片元,那么片元着色器将执行10次,每次调用处理一个片元,片元着色器计算该片元的颜色并写入颜色缓冲区,当最后一个片元被处理完成,浏览器就会显示出最终的结果。

    前端也要懂图形化: 浅谈 WebGL 技术

    图片渲染

    通过顶点信息绘制像素点功能很强大,但对于复杂图形不够好用,通常我们需要渲染图片,这样就需要纹理映射了,这就是为什么在WebGL中,我们更倾向把图片描述为纹理的原因。

    纹理映射

    纹理映射原理很简单,就是将一张图片映射到一个几何图形的表面。由于在WebGL中,WebGL能直接绘制的图形只有点、线和三角形,因此在纹理映射中,图片被映射到由两个三角形组成的矩形。

    纹理映射具体步骤:

    1. 准备映射的纹理图图像,纹理图像应该满足2的幂次方

    图片分辨率为非2的幂次方(104 * 104),图片不能被渲染,并提示图片分辨率可能不是2的幂次方

    前端也要懂图形化: 浅谈 WebGL 技术

    图片分辨率为2的幂次方(256 * 256),正常显示

    前端也要懂图形化: 浅谈 WebGL 技术

    1. 为几何图形配置映射方式,顶点坐标和纹理坐标对应,需要注意,构建顺序与新增顶点的奇偶性相关。(假设v0代表第一个顶点
    • 如果新增顶点时奇数,顶点排列顺序为:T = [n-1 n-2 n];
    • 如果新增顶点为偶数,顶点排列顺序为:T = [n-2 n-1 n];

    下面顶点组成的三角形分别为:T1 = [v0, v1, v2],T2 = [v2, v1, v3]

      // 顶点坐标、纹理坐标,绘制顺序:左上->左下->右上->右下
    
      const vertices = new Float32Array([
    
        -0.5, 0.5, 0.0, 1.0,   // v0
    
        -0.5, -0.5, 0.0, 0.0,  // v1
    
        0.5, 0.5, 1.0, 1.0,    // v2
    
        0.5, -0.5, 1.0, 0.0,   // v3
    
      ]);
    

    当把第一个坐标和第二个坐标互换时,绘制

      // 顶点坐标、纹理坐标,绘制顺序:左下->左上->右上->右下
    
      const vertices = new Float32Array([
    
        -0.5, -0.5, 0.0, 0.0,  // v0
    
        -0.5, 0.5, 0.0, 1.0,   // v1
    
        0.5, 0.5, 1.0, 1.0,    // v2
    
        0.5, -0.5, 1.0, 0.0,   // v3
    
      ]);
    

    前端也要懂图形化: 浅谈 WebGL 技术

    1. 加载纹理图像,对其进行一些配置,以在WebGL中使用,分别有如下操作

      1. 创建纹理对象
      2. 图片Y轴反转,因为图片坐标系y轴垂直向下,而纹理坐标系(st坐标系)t轴垂直向上,在我们的例子中,顶点坐标和纹理坐标是相反的,所以在纹理存储像素中需要对y轴翻转

    假如未未进行y轴反转

    前端也要懂图形化: 浅谈 WebGL 技术

    1. 激活指定纹理单元

    2. 绑定纹理对象到纹理单元

    3. 设置纹理过滤,纹理过滤是指,当绘制范围(顶点坐标组成的矩形区域)与纹理本身大小不匹配时,如何获取纹理颜色。需要注意的是,设置错误的过滤可能会导致渲染失败

      1. gl.TEXTURE_MAP_FILTER放大方法,纹理撑满至绘制范围
      2. gl.TEXTURE_MIN_FILTER缩小方法,纹理缩小至绘制范围
      3. gl.TEXTURE_WRAP_S水平填充,纹理大小不变,左右填充
      4. gl.TEXTURE_WRAP_T垂直填充,纹理大小不变,上下填充

    过滤设置错误,假如画布大小400 * 400,顶点坐标范围-0.5~0.5对应大小200 * 200,图片大小256 * 256,纹理比绘制范围大,但是过滤仅设置了gl.TEXTURE_MAG_FILTER,获取纹理颜色失败,控制台又输出了熟悉的错误:图片不能被渲染,是否未设置合适纹理过滤

    前端也要懂图形化: 浅谈 WebGL 技术

    前端也要懂图形化: 浅谈 WebGL 技术

    1. 将图像绑定到纹理
    2. 将纹理单元传递给着色器中的采样器
    1. 在片元着色器中将相应的像素从纹理中抽取出来,并将像素的颜色赋给片元

    以上操作相关的代码片段如下

    // 顶点着色器
    
     const vs_source = `
    
       attribute vec4 a_Position;
    
       attribute vec2 a_TexCoord;
    
       varying vec2 v_TexCoord;
    
       void main() {
    
        gl_Position = a_Position;
    
        v_TexCoord = a_TexCoord;
    
       }
    
    `;
    
     
    
     // 片元着色器
    
    const fs_source = `
    
      precision mediump float;
    
      uniform sampler2D u_Sampler;
    
      varying vec2 v_TexCoord;
    
      void main() {
    
        gl_FragColor = texture2D(u_Sampler, v_TexCoord);
    
      }
    
    `;
    
    
    
    ...
    
    
    
    function initShader() {
    
      ...
    
      
    
      // 顶点坐标和纹理坐标
    
      const vertices = new Float32Array([
    
        -0.5, 0.5, 0.0, 1.0,
    
        -0.5, -0.5, 0.0, 0.0,
    
        0.5, 0.5, 1.0, 1.0,
    
        0.5, -0.5, 1.0, 0.0,
    
      ]);
    
       
    
      ...
    
    }
    
    
    
    const texture = gl.createTexture();
    
    const u_Sample = gl.getUniformLocation(gl.program, 'u_Sample');
    
     
    
    const img = new Image();
    
    img.onload = function () {
    
      // 加载纹理图像,对其进行一些配置,以在WebGL中使用
    
      // 纹理像素存储y轴反转
    
      gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, 1);
    
      // 激活纹理单元0
    
      gl.activeTexture(gl.TEXTURE0);
    
      // 绑定纹理
    
      gl.bindTexture(gl.TEXTURE_2D, texture);
    
      // 设置过滤的过滤方式,这里仅设置了gl.TEXTURE_MIN_FILTER,也可以设置多种过滤
    
      gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
    
      // 生成纹理
    
      gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGB, gl.RGB, gl.UNSIGNED_BYTE, img);
    
      // 将纹理单元0传递给采样器
    
      gl.uniform1i(u_Sample, 0);
    
     
    
      gl.clearColor(0.0, 1.0, 0.0, 1.0);
    
      gl.clear(gl.COLOR_BUFFER_BIT);
    
      
    
      // 绘图顺序跟点有关
    
      gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
    
    }
    
    img.src = 'power-of-2-image';
    

    ❤️ 谢谢支持

    以上便是本次分享的全部内容,希望对你有所帮助^_^

    喜欢的话别忘了 分享、点赞、收藏 三连哦~。

    欢迎关注公众号 ELab团队 收货大厂一手好文章~


    起源地下载网 » 前端也要懂图形化: 浅谈 WebGL 技术

    常见问题FAQ

    免费下载或者VIP会员专享资源能否直接商用?
    本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。更多说明请参考 VIP介绍。
    提示下载完但解压或打开不了?
    最常见的情况是下载不完整: 可对比下载完压缩包的与网盘上的容量,若小于网盘提示的容量则是这个原因。这是浏览器下载的bug,建议用百度网盘软件或迅雷下载。若排除这种情况,可在对应资源底部留言,或 联络我们.。
    找不到素材资源介绍文章里的示例图片?
    对于PPT,KEY,Mockups,APP,网页模版等类型的素材,文章内用于介绍的图片通常并不包含在对应可供下载素材包内。这些相关商业图片需另外购买,且本站不负责(也没有办法)找到出处。 同样地一些字体文件也是这种情况,但部分素材会在素材包内有一份字体下载链接清单。
    模板不会安装或需要功能定制以及二次开发?
    请QQ联系我们

    发表评论

    还没有评论,快来抢沙发吧!

    如需帝国cms功能定制以及二次开发请联系我们

    联系作者

    请选择支付方式

    ×
    迅虎支付宝
    迅虎微信
    支付宝当面付
    余额支付
    ×
    微信扫码支付 0 元