内卷年代，是该学学 WebGL 了

谦宇 2023-03-28 原文

前言

大部分公司的都会有可视化的需求，但是用echarts，antv等图表库，虽然能快速产出成果，但是还是要知道他们底层其实用canvas或svg来做渲染，canvas浏览器原生支持，h5天然支持的接口，而svg相比矢量化，但是对大体量的点的处理没有canvas好，但是可以操作dom等优势。canvas和svg我们一般只能做2d操作，当canvas.getContext('webgl')我们就能获取webgl的3d上下文，通过glsl语言操作gpu然后渲染了。理解webgl，可以明白h5的很多三维的api底层其实都是webgl实现，包括对canvas和svg也会有新的认知。

canvas和webgl的区别

canvas和webgl都可以做二维三维图形的绘制。底层都会有对应的接口获取。cancvas一般用于二维canvas.getContext("2d")，三维一般可以通过canvas.getContext('webgl')

窥探WebGL

理解建模

如果你有建模软件基础的话，相信3dmax、maya、su等软件你一定不会陌生，本质其实就是点、线、面来组成千变万化的事物。打个比方球体就是无数个点连成线然后每三根线形成面，当然有常见的四边形，其实也是两个三边形组成，为什么不用四边形，因为三边形更稳定、重心可计算、数据更容易测算。

所以核心也就是点、线、三角面

了解WebGL

WebGL可以简单理解为是openGL的拓展，让web端通过js可以有强大的图形处理能力。当然为了与显卡做交互你必须得会glsl语言。

GLSL

glsl着色器语言最重要的就是顶点着色器和片元着色器。简单理解为一个定位置一个添颜色。

简单绘制一个点

webgl会有大量的重复性前置工作，也就是创建着色器 -> 传入着色器源码 -> 编译着色器 -> 创建着色器程序 -> 绑定、连接、启用着色器 -> 可以绘制了！

一般而言我们是不会重复写这个东西，封装好了直接调用就行。

function initShader (gl, VERTEX_SHADER_SOURCE, FRAGMENT_SHADER_SOURCE) {
    const vertexShader = gl.createShader(gl.VERTEX_SHADER);

    const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);

    gl.shaderSource(vertexShader, VERTEX_SHADER_SOURCE);
    gl.shaderSource(fragmentShader, FRAGMENT_SHADER_SOURCE);

    //编译着色器
    gl.compileShader(vertexShader);
    gl.compileShader(fragmentShader);

    //创建程序对象
    const program = gl.createProgram();

    gl.attachShader(program, vertexShader);
    gl.attachShader(program, fragmentShader);

    gl.linkProgram(program);
    gl.useProgram(program);

    return program;
}

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

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="./initShader.js"></script>
</head>

<body>
  <canvas id="canvas" width="300" height="400">
    不支持canvas
  </canvas>
</body>

<script>
  const ctx = document.getElementById('canvas')
  const gl = ctx.getContext('webgl')

  //着色器： 通过程序用固定的渲染管线，来处理图像的渲染，着色器分为两种,顶点着色器：顶点理解为坐标，片元着色器：像素

  //顶点着色器源码
  const VERTEX_SHADER_SOURCE = `
    void main() {
      gl_Position = vec4(0.0, 0.0, 0.0, 1.0);
      gl_PointSize = 10.0;
    }  
  `
  //片元着色器源码
  const FRAGMENT_SHADER_SOURCE = `
    void main() {
      gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
    }   
  `
  //创建着色器
  const program = initShader(gl, VERTEX_SHADER_SOURCE, FRAGMENT_SHADER_SOURCE)

  //执行绘制
  gl.drawArrays(gl.POINTS, 0, 1)
  //gl.drawArrays(gl.LINES, 0, 1)
  //gl.drawArrays(gl.TRIANGLES, 0, 1)

</script>

</html>

绘制效果如下：

相信看了上面有段代码会有疑惑

gl_position代表坐标，vec4就一个存放个4个float的浮点数的容量，定义坐标，分别对应x、y、z、w，也就是三维坐标，但是w就等于比例缩放xyz而已，一般在开发中，我们的浏览器的坐标要跟这个做个转换对应上，gl_POintSize是点的大小，注意是浮点数

gl_flagColor渲染的像素是红色，是因为这类似于比例尺的关系需要做个转换， (R值/255，G值/255，B值/255，A值/1） ->（1.0, 0.0, 0.0, 1.0)

绘制动态点

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

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="./initShader.js"></script>
</head>

<body>
  <canvas id="canvas" width="300" height="400">
    不支持canvas
  </canvas>
</body>

<script>
  const canvas = document.getElementById('canvas')
  const gl = canvas.getContext('webgl')
    
  const VERTEX_SHADER_SOURCE = `
    precision mediump float;
    attribute vec2 a_Position;
    attribute vec2 a_Screen_Size;
    void main(){
      vec2 position = (a_Position / a_Screen_Size) * 2.0 - 1.0; 
      position = position * vec2(1.0, -1.0);
      gl_Position = vec4(position, 0, 1);
      gl_PointSize = 10.0;
    }  
  `
  const FRAGMENT_SHADER_SOURCE = `
   precision mediump float;
   uniform vec4 u_Color;
   void main() {
    vec4 color = u_Color / vec4(255, 255, 255, 1);
    gl_FragColor = color; 
   }
  `
  //前置工作，着色器可以渲染了！
  const program = initShader(gl, VERTEX_SHADER_SOURCE, FRAGMENT_SHADER_SOURCE)

  //获取glsl的变量对应的属性做修改
  var a_Position = gl.getAttribLocation(program, 'a_Position');
  var a_Screen_Size = gl.getAttribLocation(program, 'a_Screen_Size');
  var u_Color = gl.getUniformLocation(program, 'u_Color');
  gl.vertexAttrib2f(a_Screen_Size, canvas.width, canvas.height); //给glsl的属性赋值两个浮点数
  
  //给个默认背景颜色
  gl.clearColor(0, 0, 0, 1.0);
  gl.clear(gl.COLOR_BUFFER_BIT);

  //存储点击位置的数组。
  var points = [];
  canvas.addEventListener('click', e => {
    var x = e.pageX;
    var y = e.pageY;
    var color = { r: Math.floor(Math.random() * 256), g: Math.floor(Math.random() * 256), b: Math.floor(Math.random() * 256), a: 1 };
    points.push({ x: x, y: y, color: color })
        
    gl.clearColor(0, 0, 0, 1.0);
    gl.clear(gl.COLOR_BUFFER_BIT);
    
    for (let i = 0; i < points.length; i++) {
      var color = points[i].color;
      gl.uniform4f(u_Color, color.r, color.g, color.b, color.a);
      gl.vertexAttrib2f(a_Position, points[i].x, points[i].y);
      gl.drawArrays(gl.POINTS, 0, 1);
    }
  })
</script>

</html>

vec2 position = (a_Position / a_Screen_Size) * 2.0 - 1.0; 注意这里的坐标转换，从canvas转为ndc坐标，其实就是看范围就行，[0, 1] -> [0, 2] -> [-1, 1]。上面总体的流程总结下就是，定义着色器，定义glsl着色器源码 -> 通过api获取canvas的信息转换坐标系 -> 监听点击事件传递变量到glsl中 -> 通过pointer缓存 -> drawArrays绘制。但是这种方法，很明显有大量的重复渲染，每次遍历都要把之前渲染的重复执行。

大致效果

总结

通过简单的webgl入门，已经有了初步的认知，大致的流程为：着色器初始化 -> 着色器程序对象 -> 控制变量 -> 绘制，为了更好的性能，后面会使用缓冲区来解决重复渲染的问题，这样我们的顶点不会一个一个设置而直接会被缓存，包括后面一些动态效果会涉及到矩阵的转换，如平移、缩放、旋转、复合矩阵。

学学 WebGL span color style 开发前端 $WebGL 初始化绘制

有关内卷年代，是该学学 WebGL 了的更多相关文章

javascript - JavaScript 中的内联 webgl 着色器代码 - 2
我正在编写一个使用一些WebGL代码的简单Javascript库。我想在.js文件中包含着色器源代码，因为我的替代方法是将它们作为脚本标记包含在每个页面中，或者将它们作为单独的文件作为AJAX加载。这些选项都不是特别模块化的。但是，由于javascript中缺少多行字符串，我对如何内联WebGL代码没有任何好的想法。有没有我没有想到的方法？最佳答案自2009年左右以来，JavaScript在除IE之外的所有浏览器中都有多行字符串。varshader=`codegoeshere`; 关
Unity-WebGL基于JS实现网页录音 - 2
因为该死的Unity不支持WebGL的麦克风，所以只能向网页借力，用网页原生的navigator.getUserMedia录音，然后传音频流给Unity进行转AudioClip播放。还有一点非常重要：能有同事借力就直接问，厚着脸皮上，我自己闷头两天带加班，不如同事谭老哥加起来提供帮助的俩小时，很感谢他，虽然是他们该做的，但我一直没提出，而且我方向错了😂😂😂版本：Unity：2021.3.6f1Github库：UnityWebGLMicrophone相关代码Unity端的.cs .jslib和WebGL端的.js..jslibWebGLRecorder.jslib这个需要放在Unit
javascript - 读取 WebGLTexture 中的像素(将 WebGL 渲染到纹理) - 2
我在GPU上生成纹理并将其渲染到我自己的帧缓冲区对象。它工作正常，纹理被渲染到我可以传递给其他着色器的WebGLTexture。但是我想访问javascript中的WebGLTexture像素。有办法实现吗？目前我正在使用gl.ReadPixels在我将纹理绘制到我的帧缓冲区后读取像素。这工作正常，但如果我可以直接访问WebGLTextureObject中的像素不是更好吗？我想要完成的是:我有GLSLperlin噪声着色器，可以在GPU上渲染高清高度图和法线贴图。我想将高度图传递给CPU，以便为网格生成顶点。我当然可以只在顶点着色器中定位顶点，但我需要它在CPU中进行碰撞检测。我希望我
javascript - 三.js/WebGL : Large spheres appear broken at intersection - 2
让我先声明我对3D图形非常缺乏经验。问题我正在使用Three.js。我有两个球体(故意)在我的WebGL模型中发生碰撞。当我的球体非常大时，重叠的球体在它们相交的地方显得“splinter”，但较小的球体渲染得非常好。我对某些对象使用如此大的单位有一个非常具体的原因，缩小对象并不是一个真正的选择。例子这是一个更大球体的fiddle:http://jsfiddle.net/YSX7h/对于较小的:http://jsfiddle.net/7Lca2/代码varradiusUnits=1790;//179000000varcontainer;varcamera,scene,renderer;
javascript - 使用 SVG 或 WebGL 的 3D 形状 - 2
您好，我想在浏览器中渲染一个交互式3D球体。它上面的纹理将是一张世界地图，所以基本上我试图创建一个可以使用map在任何方向旋转的地球仪。我很擅长使用SVG渲染2D图像，但不确定如何在SVG中渲染3D形状。是否可以在SVG中渲染3D形状，如果可以，如何渲染？如果不是，WebGl是更好的选择吗？最佳答案看看three.js它对实现进行了一些抽象(带有WebGL/SVG/Canvas后端)。SVG是一种2d矢量图形格式，但您可以将3d形状投影到2d上，因此可以使用SVG渲染3d对象，这只是一些工作(最好留给javascript库)。
javascript - 使用 WebGL 进行二维图像处理 - 2
我打算用JS创建一个简单的照片编辑器。我的主要问题是，是否可以创建实时渲染的滤镜？例如，调整亮度和饱和度。我只需要一张2D图像，我可以在其中使用GPU应用滤镜。我读过的所有教程都非常复杂，并没有真正解释API的含义。请指出正确的方向。谢谢。最佳答案我打算写一个教程并将其发布在我的博客上，但我不知道我什么时候有时间完成所以这就是我所拥有的Here'samoredetailedsetofpostsonmyblog.WebGL实际上是一个光栅化库。我接收属性(数据流)、制服(变量)，并希望您提供二维的“裁剪空间”坐标和像素的颜色数据。
javascript - 如何强制谷歌地图进入精简模式(无 WebGL) - 2
IE11无法处理Googlemap的WebGL版本。例如，尝试在此页面上四处拖动map:https://developers.google.com/maps/documentation/javascript/examples/map-simple但是，如果您访问maps.google.com，您会看到它使用精简模式(Canvas)并且运行起来更加流畅。如果访问该页面不会自动使用Canvas模式，请转到此URL:www.google.com/maps/preview/?force=canvas我正在针对MapsjavascriptAPI进行开发，因此我需要知道如何强制使用此模式，以免我的
javascript - 什么会导致 requestAnimationFrame 在高效的 webgl 循环中丢帧？ - 2
我一直在编写一个javascript演示/测试来学习WebGL。我有一个相当高效的游戏循环结构(根据Chrome开发工具)只需1-2毫秒即可运行。我正在使用requestAnimationFrame来安排循环的运行(因为这显然是执行60fps动画的“正确”方式)。当我查看构建框架的时间轴时，实际的javascript代码很少，但框架的“空闲”部分可以将框架推到30fps线上。FPS计数器显示20-40fps，有很多掉落(几乎像锯齿)。如果我的渲染循环已经是1-2毫秒，而它必须适应16毫秒才能运行60fps，还有什么我可以解释的吗？如果我将循环转换为setTimeout循环，它可以轻松保
javascript - 适合与 D3js 结合的库，以允许绘制到 webgl (2D) - 2
这是我正在尝试做的:http://mbostock.github.com/d3/talk/20111116/iris-splom.html但我想在webgl2d中执行此操作(因为SVG性能非常慢，渲染10kSVG仅已降至12fps)通过快速搜索，我发现了几个webgl-2d库:cocos2d-html5,pixijs,Three.js和webgl-2d(废弃？)它们看起来很简单，但我想做的是数据可视化。cocos和pixijs是2d游戏库。我是webgl和那些库的新手，所以SO方面的专家你们能推荐一下吗？我需要的东西的总结:互动:地block内的矩形选择。单击以选择某些元素。缩放和平移
javascript - WebGL:优化每帧更改值和顶点计数的顶点缓冲区 - 2
我想实现一个带有顶点缓冲区的渲染器，每帧都会在应用程序端更新。此外，顶点的数量(即三Angular形的数量)也会在每一帧发生变化。我的方法是将所需的最大值预先分配为Float32Array，然后仅更新更改的值，并使用bufferSubData更新缓冲区数据。然后通过从索引缓冲区发送一个范围来绘制我想要的。作为一个最小的例子，假设我已经为Float32Array中的2个单独的三Angular形分配了位置顶点，对于这个帧，我只想移动并绘制第二个三Angular形。我想我会这样做:arrPos[9]+=1.0;//movetheXcoordinatesintheFloat32Arrayarr