所以就记录分享一下 Jest 的一些常用配置。

module.exports = {
  setupFiles: [
    'react-app-polyfill/jsdom',
    '<rootDir>/test/unit/jest.setup.js',
    'core-js',
  ],
  testMatch: [
    '<rootDir>/src/**/__tests__/**/*.{spec,test}.{js,jsx,ts,tsx}',
    '<rootDir>/src/**/*.{spec,test}.{js,jsx,ts,tsx}',
  ],
  transform: {
    '^.+\\.(js|jsx|ts|tsx)$': '<rootDir>/node_modules/babel-jest',
    '^.+\\.(css|less)$': '<rootDir>/config/jest/cssTransform.js',
    '^(?!.*\\.(js|jsx|ts|tsx|css|json)$)': '<rootDir>/config/jest/fileTransform.js',
  },
  transformIgnorePatterns: [
    '[/\\\\]node_modules/(?!(antd)/)[/\\\\].+\\.(js|jsx|ts|tsx)$',
  ],
  moduleNameMapper: {
    '^react-native$': 'react-native-web',
    '^.+\\.module\\.(css|sass|scss|less)$': 'identity-obj-proxy',
    '\\.svg$': 'identity-obj-proxy',
    'test/(.*)': '<rootDir>/test/$1',
    '^src/(.*)': '<rootDir>/src/$1',
  },
  moduleFileExtensions: [
    'web.js',
    'js',
    'web.ts',
    'ts',
    'web.tsx',
    'tsx',
    'json',
    'web.jsx',
    'jsx',
    'node',
  ],
  // 其它配置已省略
};

对于 Jest 的配置优化无外乎下面两点：

• 更少：减少不必要的元素（比如图片、样式等）；
• 更精确：减少在文件系统中查找匹配的时间；

在看下面如何优化之前，可以先看下这份 Jest 配置，看一下有没有什么可以想到的优化点

setupFiles

古语云：“思则有备，有备无患”。但跑测试时一定要“万事”俱备才行吗？

setupFiles 可谓是 Jest 的“内务府大臣”，位居二品！此大臣就是来准备测试所需要的一些环境或 mock 一些全局状态的，比如 @testing-library/jest-dom 就常在 setupFile 中用到，它允许我们可以在 Jest 中断言一些关于 DOM 的状态。而我们再回头去看上面的配置：

{
  "setupFiles": [
    "react-app-polyfill/jsdom",
    "<rootDir>/test/unit/jest.setup.js",
    "core-js"
  ]
}

react-app-polyfill/jsdom 做了什么：

// 真的，源码只有这三行，原来“内务府”也有“外包项目” 
if (typeof window !== 'undefined') {
  require ('whatwg-fetch');
}

whatwg-fetch 和 core-js 可以简单理解为对当下的一些新标准做 polyfill，但我们有 babel-jest 呀，还要你二者何用？果断“开掉”，节省开支

{
  "setupFiles": ["<rootDir>/test/unit/jest.setup.js"]
}

moduleFileExtensions

moduleFileExtensions 就是 Jest 中各个“国家”（模块）的“通关文牒”，有此文牒方可游历各国。游遍各国也得有个顺序不是，不然会徒增“食宿饮马等费用”，要是搁徐霞客身上，若不是他家业富足，不然大可能会饿死途中。张骞通西域朝廷会有路线规划（默认配置），当然他也能随机应变（自定义配置），默认配置大部分情况下是行得通的，只不过可能要在“路上”多花些时间：

// 默认配置
["js", "jsx", "ts", "tsx", "json", "node"]

moduleFileExtensions 会 从左到右 查找对应的 extension，但如果在 TypeScript + React 项目中可能稍微调整一下会更好：

// 调整后
["ts", "tsx", "js", "jsx", "json", "node"]

这样就能减少些查找 extension 的次数，省点“油钱”。

moduleNameMapper

一般 npm 依赖中的源码分为 esm 和 cjs 模块，当然像 react 之类的是分为 cjs 和 umd。以 antd 为例，其结构如下：

antd
  |- lib/
  |- es/
  |- package.json

其中，在 package.json 中可以制定 esm 和 cjs 打包文件的目录，以 antd 中使用到的 rc-select 组件包为例：

{
  "version": "12.1.5",
  "main": "./lib/index",
  "module": "./es/index"
}

如要使用 cjs 规范的打包文件，工具会查询 main 字段对应文件路径内的入口文件，使用 esm 规范的打包文件，工具则会查询 module 字段对应的入口文件。

但在 rc-util 中，并没有指明 main 及 module 字段，那么其使用方式就像下面这样：

// rc-select/es/utils/legacyUtils.js
import toArray from 'rc-util/es/Children/toArray';

“聊 Jest 呢，叨叨上面这么多干嘛呢？”

因为 Jest 目前支持的是 cjs 规范，项目中又用到了 antd，所以对于其使用的 rc-util 这种依赖，Jest 无法处理，需要手动转换一下，这就需要引入一个 Jest 配置字段 —— moduleNameMapper，关于该配置字段的描述文档如下所述：

A map from regular expressions to module names that allow to stub out resources, like images or styles with a single module.

说白了就是用来 stub 一些资源文件或 module 使用的，可以把匹配到的内容映射为你指定的内容，哪怕是“指鹿为马”也是行得通的！在前端的单元测试中，时常有许多内容是不需要的，比如：静态资源、样式文件等。那么这个时候就可以将这些“鹿”指成“马”了。

我们常把“鹿 ”指为 identity-obj-proxy 这个工具，虽然 identity-obj-proxy 上次发布是5年前了，但确实很好用，并且源码也十分简单（2分钟你看不完源码你顺着信号 来打我）！

module.exports = {
  // ...
  moduleNameMapper: {
    '\\.svg$': 'identity-obj-proxy',
    '\\.css$': 'identity-obj-proxy',
  },
};

对于上面说到的将 antd 的 es 指到 lib 也就很简单了：

module.exports = {
  // ...
  moduleNameMapper: {
    'antd/es/(.*)': 'antd/lib/$1',
  },
};

通过 moduleNameMapper 就可以做到 更少 这个原则，当然下面要介绍的 transformIgnorePatterns 以及其它 ignore 等相关字段也可以让处理的资源或无关的资源更少。

transform

《天龙八部》中，马大元夫人康敏将一招“借刀杀人”发挥得淋漓尽致，而在 Jest 中 transform 也“借他人之手除掉异己”，至于康敏居心何在下回再讲，这次就说 transform 为何要“下此毒手”。所谓“异己”一般是脱离自己控制的资源，上面说到 Jest 支持的是 cjs，但在现在的前端项目中，一般都是使用 import/export 等 esm 规范来模块化开发，所以对于这种资源，我们需“借他之手”处理：

module.exports = {
    // ...
  transform: {
    '^.+\\.(js|jsx|ts|tsx)$': 'babel-jest',
  },
};

但这么看来，transform 也可以将 antd 中的 esm 资源转为 cjs，但既然可以“礼仪教化”，又何必“兵刃相接”呢？

transformIgnorePatterns

通过名字就能看出来，此配置的内容是“康敏”理都不想理的内容，该值默认是 ['node_modules']，也十分好理解。但我们回到文章最初的配置去看看：

module.exports = {
  // ...
  transformIgnorePatterns: [
    '[/\\\\]node_modules/(?!(antd)/)[/\\\\].+\\.(js|jsx|ts|tsx)$',
  ],
};

项目的初衷是使用 transform 去处理引入的 antd 的资源，但这也就导致了在 transform 时去遍历了整个 node_modules 文件系统，node_modules 内容是非常多的，所以在扫描时耗费了大量的时间，测试跑完发现“乔峰找着他爹了”。

所以本文最开始所说的“一处配置问题”就是这儿，删掉 transformIgnorePatterns 转而使用 moduleNameMapper 会快很多，不信你试试！

结语

当优化、最佳实践等问题脱离具体项目场景时，那就是“耍流氓”！上学时老师经常说：“具体问题，具体分析”，对开发来说也是如此。经过优化后，测试消耗时间从 790s 缩减到了 40s，还算是一个可以接受的时间吧✌️

欢迎搜索关注微信公众号 “Refactor”，阅读我的更多文章。

clear

this.clear = function ( color, depth, stencil ) {
  let bits = 0;

  if ( color === undefined || color ) bits |= _gl.COLOR_BUFFER_BIT;
  if ( depth === undefined || depth ) bits |= _gl.DEPTH_BUFFER_BIT;
  if ( stencil === undefined || stencil ) bits |= _gl.STENCIL_BUFFER_BIT;

  _gl.clear( bits );
};

clear 方法接收三个可选参数，分别是清空 颜色缓冲区、深度缓冲区和模板缓冲区。而 gl.clear() 方法可以接受一个复合值，所以采用了 bits |= value 形式来清空缓冲区。同时，clearColor/clearDepth/clearStencil 三个方法内部也都是调用的本 clear 方法。

setSize

当我们 new 了一个 Renderer 之后，会经常调用 setSize 来设置 canvas 的大小，那我们就看一下 setSize 的实现：

this.setSize = function ( width, height, updateStyle ) {
  if ( xr.isPresenting ) {
    console.warn( 'THREE.WebGLRenderer: Can\'t change size while VR device is presenting.' );
    return;
  }
  
  _width = width;
  _height = height;
  _canvas.width = Math.floor( width * _pixelRatio );
  _canvas.height = Math.floor( height * _pixelRatio );

  if ( updateStyle !== false ) {
    _canvas.style.width = width + 'px';
    _canvas.style.height = height + 'px';
  }

  this.setViewport( 0, 0, width, height );
};

在上面的代码中我们不仅仅设置了 canvas 的 width 和 height，同时还设置了 style 以及 viewport 的 width 和 height。如果我们将 style 的宽高和 canvas 的宽高设置的不同会出现什么效果呢？以之前 WebGL基础 系列文章中纹理贴图中超级赛人的代码为例，下图是我们正常显示的图片（style 和 canvas 宽高都是 600px）：

canvas 尺寸保持不变，我们将 style 的 width 设为 1200px 看一下有什么效果：

可见，图片发生了形变的同时也变得更模糊了，为了避免这种情况的发生，我们一般会将 canvas、style 和 viewport 的尺寸设为相同的大小。

render

render() 是我们使用最多的方法，作为 renderer 的核心，让我们来瞧瞧它的玄机。官方文档中 render() 方法的用法为：

// Methods
.render ( scene : Object3D, camera : Camera ) : null
// Render a scene or another type of object using a camera.

可以看到文档中提到“使用 camera 渲染的是 scene 或其它 object”，故此处 scene 的类型是 Object3D 而不是 Scene（Object3D 是 ThreeJS 中所有物体的基类）。同时，在文档中 render 方法只给出了两个参数，但我们看源码会发现其实它还能再额外接受两个参数 renderTarget 和 forceClear，这是为了兼容老版本中接受的这两个参数，所以就从文档中移除了，取而代之的是使用 renderer 的 setRenderTarget 和 clear 两个方法。

context

接着看 render 方法，可以看到一个很有趣的语句：

if ( _isContextLost === true ) return;

语义上来说，如果丢失了当前的 context 就直接 return，而什么会触发 WebGL 上下文丢失的事件呢？我们去瞅一眼 specification 便知：

Occurrences such as power events on mobile devices may cause the WebGL rendering context to be lost at any time and require the application to rebuild it...

WebGL Specification​www.khronos.org

比如当我们的设备休眠时就会触发该事件。而 丢失上下文 这一事件属于 WebGLContextEvent，WebGL 的 WebGLContextEvent 会响应 WebGL 上下文状态的重要变换而生成相应事件。事件会通过 DOM 事件系统发送，并被调度到 WebGL 渲染上下文关联的 HTMLCanvasElement 或 OffscreenCanvas 上。可以触发上下文变换的 WebGLContextEvent 包括上下文的丢失、恢复和无法创建上下文。

OffscreenCanvas 顾名思义是 离屏 Canvas，详情请参考下文

OffscreenCanvas​developer.mozilla.org

当客户端检测到图形缓冲区关联的 WebGL 渲染上下文丢失时，会执行以下操作：

1. 让 canvas 作为上下文的 canvas；
2. 如果设置了 WebGL 上下文的 ContextLost 标志，则中止后续步骤；
3. 否则设置 ContextLost 标志；
4. 给上下文创建的 WebGLObject 实例设置 Invalidated 标志；
5. 禁用除 WEBGL_LOST_CONTEXT 外的所有的 Extensions；
6. 执行下列任务队列：
7. 触发 canvas 的名为 WEBGL_CONTEXT_LOST 的 WebGL 上下文事件，将其 statusMessage 设为空值；
8. 如果未设置事件的 canceled 标志，则中止后续步骤；
9. 异步执行下列步骤；
10. 等待可恢复的图形缓冲区；
11. 任务队列恢复上下文的图形缓冲区；

第 1 点会有些难以理解，specification 中的原话是 Let canvas be the context's canvas，下面介绍一下创建上下文的相应过程，可能会有助于了解这句话。

从上面的描述中可以知道，我们必须通过 canvas 或离屏 canvas 获取到上下文才能使用 WebGL API，也就是说每个 WebGLRenderingContext 创建时都需要关联 canvas。每个 canvas 在创建时都会有相应的创建参数：

dictionary WebGLContextAttributes {
    boolean alpha = true;
    boolean depth = true;
    boolean stencil = false;
    boolean antialias = true;
    boolean premultipliedAlpha = true;
    boolean preserveDrawingBuffer = false;
    WebGLPowerPreference powerPreference = "default";
    boolean failIfMajorPerformanceCaveat = false;
    boolean desynchronized = false;
};

平时我们在获取 context 时仅仅是通过 gl.getContext('webgl') 来获取，其实我们可以通过该方法的第二个参数给 context 传递相应属性：

gl.getContext("webgl", { alpha: false, depth: false });

当调用 getContext() 方法返回 context 实例时，客户端会执行以下操作：

1. 创建新的 WebGLRenderingContext 对象：context；
2. 让 context 的 canvas 成为 getContext() 方法所关联的 canvas 或离屏 canvas;
3. 创建新的 WebGLContextAttributes 对象：contextAttributes；
4. 如果调用 getContext() 方法时传递了第二个参数，则使用给定的参数作为 contextAttributes；
5. 使用 contextAttributes 创建图形缓冲区，并将图形缓冲区与 context 相关联；
6. 如果创建失败，则触发相应错误并返回 null；
7. 创建新的 WebGLContextAttributes 对象：actualAttributes；
8. 基于创建的图形缓冲区属性设置 actualAttributes 的属性；
9. 将 context 的创建参数设为 contextAttributes；
10. 将 context 的实际参数设为 actualAttributes；
11. 返回 context；

解释了创建 context 的流程后，或许有对理解刚刚的疑惑点有所帮助 （翻了好久 specification）。

说了那么久 context，让我们再重新 focus 在 render() 方法上。既然我们会在 requestAnimationFrame 中调用 render()，那么也就意味着其实 render() 方法内部做的应该就是去绘制每一帧应该展现的场景。在 WebGL 基础文章中绘制时，在每次 requestAnimationFrame 的 loop 中都会都 clear 一下，当然 ThreeJS 中也一样，当判断 context 存在后，就会立即为本次绘制重置上一帧的缓存：

bindingStates.resetDefaultState();
_currentMaterialId = - 1;
_currentCamera = null;

随后便更新 相应变换矩阵，并渲染背景 background.render( currentRenderList, scene, camera, forceClear )。对于 background 的 render 方法，其内部主要对 background 分为了3种类型：1. 如果 background 为 null，则使用默认的参数 render；2. 如果是 color， 则使用已有的 color render；3. 如果是 texture，则更新贴图（小声哔哔一句，传入的 camera 并没有用到）。

在 ThreeJS 中，将要渲染的物体分为了两类：透明物体 和 不透明物体（先不详细介绍，在后续阅读 Object3D 源码时再聊），并通过下面的语句获取并处理这两类 object：

const opaqueObjects = currentRenderList.opaque;	// 可见物体
const transparentObjects = currentRenderList.transparent;	// 透明物体

if ( opaqueObjects.length > 0 ) renderObjects( opaqueObjects, scene, camera );
if ( transparentObjects.length > 0 ) renderObjects( transparentObjects, scene, camera );

renderObjects

function renderObjects( renderList, scene, camera ) {
  const overrideMaterial = scene.isScene === true ? scene.overrideMaterial : null;

  for ( let i = 0, l = renderList.length; i < l; i ++ ) {
    const renderItem = renderList[ i ];
		// ...

    if ( camera.isArrayCamera ) {
      _currentArrayCamera = camera;
      const cameras = camera.cameras;
      for ( let j = 0, jl = cameras.length; j < jl; j ++ ) {
        const camera2 = cameras[ j ];
        if ( object.layers.test( camera2.layers ) ) {
          // ...
          renderObject( object, scene, camera2, geometry, material, group );
        }
      }
    } else {
			// ...
      renderObject( object, scene, camera, geometry, material, group );
    }
  }
}

对于 secene.isScene 这条语句很好理解，因为我们的函数签名中传入的 scene 是 Object3D 类型，所以在 Scene 中有个 readonly 的属性叫做 isScene（永远为 true）来判别当前的 Object3D 是否是 Scene。同理，camera.isArrayCamera 也是一个永远为 true 的 readonly 属性，来用来判别是否是 camera，只不过这并不是 Camera 中的属性，而是 ArrayCamera 类中的属性，该类继承自 PerspectiveCamera。

如果传入的 camera 不是 ArrayCamera 类型，则调用 renderObject；否则，循环遍历 ArrayCamera.cameras 并调用 renderObject。

renderObject

function renderObject( object, scene, camera, geometry, material, group ) {
  object.onBeforeRender( _this, scene, camera, geometry, material, group );
  // ...

  // 矩阵变换：模型视图矩阵 * 世界逆矩阵 * 世界矩阵
  object.modelViewMatrix.multiplyMatrices( camera.matrixWorldInverse, object.matrixWorld );
  object.normalMatrix.getNormalMatrix( object.modelViewMatrix );

  if ( object.isImmediateRenderObject ) {
    // ...
    renderObjectImmediate( object, program );
  } else {
    _this.renderBufferDirect( camera, scene, geometry, material, object, group );
  }

  object.onAfterRender( _this, scene, camera, geometry, material, group );
  // ...
}

object.onBeforeRender 是 Object3D 的一个钩子，在渲染之前调用，每个继承 Object3D 的 Object 有自己独立的 onBeforeRender 的实现。object.isImmediateRenderObject 又是 ImmediateRenderObject 的一个属性，用来判断是否是需要立即渲染的物体，如果满足条件则调用 renderObjectImmediate 否则调用 renderBufferDirect。

renderObjectImmediate

this.renderBufferImmediate = function ( object, program ) {
  bindingStates.initAttributes();
  const buffers = properties.get( object );

  if ( object.hasPositions && ! buffers.position ) buffers.position = _gl.createBuffer();
  // ...
  const programAttributes = program.getAttributes();

  if ( object.hasPositions ) {
    _gl.bindBuffer( _gl.ARRAY_BUFFER, buffers.position );
    _gl.bufferData( _gl.ARRAY_BUFFER, object.positionArray, _gl.DYNAMIC_DRAW );
    bindingStates.enableAttribute( programAttributes.position );
    _gl.vertexAttribPointer( programAttributes.position, 3, _gl.FLOAT, false, 0, 0 );
  }
  // ...
  bindingStates.disableUnusedAttributes();
  _gl.drawArrays( _gl.TRIANGLES, 0, object.count );
  object.count = 0;
};

renderObjectImmediate 中的内容看起来是不是很熟悉呢？createBuffer -> bindBuffer -> bufferData -> enableAttribute -> vertexAttribPointer 这一波操作不就是将缓冲区分配给 attrubute 变量并从缓冲区读取变量嘛？聪明啊老弟~它就是干了这个事儿！

在WebGL中有一项很重要的技术 —— 纹理映射。所谓纹理映射，就是将一张图片映射到一个几何图形的表面上去（就像孩童时喜欢在胳膊、手背上贴贴纸一样） 将“贴纸”贴到一个矩形上之后，这个矩形表面看上去就像是一张图片，而此时，这张图片又可以称为纹理图像或纹理。

纹理映射的作用，就是根据纹理图像为之前光栅化后的每个片元涂上适当的颜色，组成纹理图像的像素又被称为纹素，每一个纹素的颜色都使用RGB或RGBA格式编码。如图：

图中的每个小方块都是一个纹素（图片来源）。

纹理映射

问：在WebGL中进行纹理映射，分为几步？

答：4步。

第一步 - 准备纹理图像

作为一名龙珠的爱好者，在此我就准备了一张悟空的图片（图片来源）：

第二步 - 为几何图形配置映射方式

指定映射方式就是确定“几何图形的某个片元”的颜色如何决定。我们利用图形的顶点坐标来确定屏幕上哪部分被纹理图像覆盖，使用纹理坐标来确定纹理图像的哪部分将覆盖到几何图形上。纹理坐标是一套新的坐标系统，下面将会对纹理坐标进行简单的介绍。

纹理坐标

纹理坐标是纹理图像上的坐标，通过纹理坐标可以在纹理图像上获取纹素颜色。WebGL系统中的纹理坐标系统是二维的，为了将纹理坐标和我们平时使用的坐标系统区分开来，WebGL中使用s和t命名纹理坐标系统（st坐标系统）：

如图，在纹理坐标系中，纹理图像的左下角为(0.0, 0.0)，右上角为(1.0, 1.0)。不要与WebGL的坐标系统搞混哦！

将纹理映射到几何图形

来看看这张图：

这张图是将纹理图像的顶点映射到WebGL坐标系统中的四个顶点处，有小伙伴可能会想到“将这个长方形的图片映射到一个正方形的区域，图片岂不是会变形”，要注意在WebGL坐标系统中我们使用的(0.5, 0.5, 0.0)这种坐标是一个相对的坐标值，如果我们的canvas是个正方形，那么上图中对应的映射区域就是个正方形，如果是长方形，同理映射区域就是个长方形。下面来看看我们的着色器如何编写：

// 顶点着色器
attribute vec4 a_Position;
attribute vec2 a_TexCoord;
varying vec2 v_TexCoord;

void main() {
  gl_Position = a_Position;
  v_TexCoord = a_TexCoord;
}

顶点着色器中多声明了一个vec2变量，用来接收纹理图像的坐标，而在片元着色器会在稍后介绍。再修改一下initVertexBuffers方法：

function initVertexBuffers (gl) {
  const verticesTexCoords = 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 n = 4;
  
  // 创建缓冲区对象
  const vertexTexCoordBuffer = gl.createBuffer();
  
  // ...
  // 将顶点坐标写入缓冲区
  gl.bindBuffer(gl.ARRAY_BUFFER, vertexTexCoordBuffer);
	gl.bufferData(gl.ARRAY_BUFFER, verticesTexCoords, gl.STATIC_DRAW);
  
  // ...
  // 将纹理坐标分配给a_TexCoord并开启它
  const a_TexCoord = gl.getAttribLocation(gl.program, 'a_TexCoord');
  
  // ...
  return n;
}

上面代码在之前的文章中写过很多遍，主要是添加了纹理坐标，就不再赘述。这样就在顶点着色器中接收到了纹理坐标，并光栅化后传给片元着色器；随后，片元着色器根据片元的纹理坐标，从纹理图像中抽取出纹素颜色，赋给当前片元，并设置顶点的纹理坐标（initVertexBuffers()）。

第三步 - 加载纹理图像

加载纹理图像要使用我们的Image对象来完成：

function initTexture (gl, n) {
  const texture = gl.createTexture(); // 创建纹理对象
  
  // 获取 u_Sampler 的存储位置（会在第四步中介绍）
  const u_Sampler = gl.getUniformLocation(gl.program, 'u_Sampler');
  const image = new Image();
  
  // 注册图像加载事件响应函数
  image.onload = function () {
    loadTexture(gl, n, texture, u_Sampler, image);
  };
  image.src = '...';
  
  return true;
}

function loadTexture (gl, n, u_Sampler, image) {
  gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, true); //翻转纹理图像的 y 轴
  gl.activeTexture(gl.TEXTURE0); // 开启 0 号纹理单元
  gl.bindTexture(gl.TEXTURE_2D, texture); // 向 target 绑定纹理对象
  
  // 配置纹理参数
  gl.texParameteri(gl.TEXTRUE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
  // 配置纹理图像
  gl.texImage2D(gl.TEXTURE_2D, gl.RGB, gl.RGB, gl.UNSIGNED_BYTE, image);
  
  gl.uniform1i(u_Sampler, 0); // 将 0 号纹理传递给着色器
  
  gl.clear(gl.COLOR_BUFFER_BIT);
  gl.drawArrays(gl.TRIANGLE_STRIP, 0, n); // 绘制矩形
}

initTexture函数中应该比较好理解，下面将直接介绍loadTexture函数。首先在我们的WebGL系统中有8个纹理单元分别是gl.TEXTURE0到gl.TEXTURE7，这每一个纹理单元都与gl.TEXTURE_2D相关联，而后者就是绑定纹理时的纹理目标：

当调用gl.createTexture后，WebGL系统中就会存在一个纹理对象：

坐标轴翻转

gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, 1)函数是WebGL中的图像预处理函数，第一个参数是处理方式，第二个参数为处理方式的参数。

WebGL中的纹理坐标系统的t轴方向与PNG/BMP/JPG等格式图片的坐标系统的y轴方向是相反的。所以只有先将图像的y轴进行反转，才能将图像正确地映射到图形上：

激活纹理单元

WebGL通过一种叫做纹理单元的机制来同时使用多个纹理。每个纹理单元有一个单元编号来管理一张纹理图像，一些其他系统支持的个数更多。内置变量gl.TEXTURE0到gl.TEXTURE7各代表一个纹理单元。

在使用纹理单元之前，需要调用gl.activeTexture(gl.TEXTURE0)来激活它（下图中激活的是TEXTURE0）：

绑定纹理对象

接下来，我们还要告诉WebGL系统纹理对象使用的是哪种类型的纹理。在对纹理对象操作之前，我们需要绑定纹理对象，这里会发现这一系列的操作和缓冲区很相似：在对缓冲区对象进行操作之前，也需要绑定缓冲区对象。WebGL支持两种类型的纹理：gl.TEXTURE_2D和gl.TEXTURE_CUBE_MAP，分别为二维纹理和立方体纹理。当调用gl.bindTexture后：

这样我们就指定了纹理对象的类型（gl.TEXTURE_2D）。

配置纹理对象参数

配置纹理对象的参数的目标主要是设置：如何根据纹理坐标获取纹素颜色、以及按哪种方式重复填充纹理。对于gl.texParameteri()方法的参数含义如下图：

gl.TEXTURE_MAG_FILTER和gl.TEXTURE_MIN_FILTER的非金字塔纹理类型常量：

可以赋值给gl.TEXTURE_WRAP_S和gl.TEXTURE_WRAP_T的常量（可以想象一下以往在Windows系统中设置桌面壁纸时的平铺/拉伸等选项）：

将纹理图像分配给纹理对象

使用gl.texImage2D方法将纹理图像分配给纹理对象，同时该函数还允许告诉WebGL系统关于该图像的一些特性。此API参数比较复杂，详细了解请参考MDN texImage2D。

第四步 - 在FS中抽取纹素并赋给片元

将纹理单元传递给片元着色器

首先让我们来看一下片元着色器代码：

// 片元着色器
#ifdef GL_ES
	precision mediump float;
#endif
uniform sampler2D u_Sampler;
varying vec2 v_TexCoord;

void main() {
  gl_FragColor = texture2D(u_Sampler, v_TexCoord);
}

我们在示例程序中使用了gl.TEXTURE_2D这种二维纹理，所以在片元着色器中定义的uniform变量的数据类型应该为sampler2D，除此之外还有samplerCube（这种数据类型对应gl.TEXTURE_CUBE_MAP）。

在initTexture函数中，我们获取到了uniform变量u_Sampler的存储地址，并将其作为参数传给loadTexture函数。我们必须通过指定纹理单元编号（即gl.TEXTUREn中的n）将纹理传给u_Sampler。因为我们绑定到了gl.TEXTURE0上，所以调用gl.uniform1i时，第二个参数设为0：

从顶点着色器向片元着色器传输纹理坐标

我们是通过attribute变量a_TexCoord接收顶点的纹理坐标，所以将数据赋值给varying变量v_TexCoord并将纹理坐标传入片元着色器是行得通的。

剩下的工作就是，根据片元的纹理坐标，从纹理图像上抽取出纹素的颜色，然后涂到当前的片元上。

在片元着色器中获取纹理像素颜色

gl_FragColor = texture2D(u_Sampler, v_TexCoord);

我们使用GLSL ES内置函数texture2D()来抽取纹素颜色，该函数使用起来十分方便，只需要传入两个参数——纹理单元编号和纹理坐标，就可以获取到纹理上的像素颜色。

纹理放大和缩小方法的参数将决定WebGL系统将以何种方式内插出片元。我们将texture2D()函数的返回值赋给了gl_FragColor变量，然后片元着色器就将当前片元涂成这个颜色。最后，纹理图像就被映射到了图形上，并最终被画了出来。

下面让我们打开页面看一下效果（因为跨域原因，大家需在本地启用http服务器）：

怎么漆黑一片呢？

别急，先来仔细看一下console信息：

会发现warning中有说到我们的纹理图像无法渲染，可能因为图片尺寸不是2的整数次方，那么让我们把图片裁剪成256 x 256大小的再试一下呢？

完美 我们目前使用的都是WebGL1 .0的特性，在WebGL 2.0中支持了非2的整数次方大小的纹理图像！

我们已经成功展示出一张图片了，但是在WebGL系统中有多个纹理单元，所以我们可以展示多张图片，比如我给悟空图片上再加一张图片：

这里就不详细描述了，给一点提示：片元着色器中texture2D内置函数返回的是vec4类型的color，而对于两张图片的重叠部分：

gl_FragColor = color0 * color1;

可以通过以上方式计算得出！

结束语

纹理部分内容较多，大家可以慢慢学习一下，再次总结一下主要分为四步：

1. 准备纹理图像；
2. 为几何图形配置映射方式；
3. 加载纹理图像：
4. 翻转坐标轴（gl.pixelStorei）；
5. 激活纹理单元（gl.activeTexture）；
6. 绑定纹理对象（gl.bindTexture）；
7. 配置纹理参数（gl.texParameteri）；
8. 配置纹理图像（gl.texImage2D）；
9. 将纹理单元传给着色器。
10. 在FS中抽取纹素并赋给片元（texture2D）。

有趣的纹理映射介绍到这里啦，后续会出更多好玩并且有用的文章分享给大家，欢迎关注公众号：Refactor，感谢阅读！

当学习一种新技术时，大部分情况都会首选其官方文档，而文档中能最快让我们上手的章节便是 Getting Started。ThreeJS 也不例外，我们进入到其对应的 Getting Started 页面后，便能看到 Creating the scene 的代码仅有下面寥寥几行：

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );

var renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );

再滚动至最下方，各位会看到完整的 Demo：

// ...
var animate = function () {
  requestAnimationFrame( animate );

  cube.rotation.x += 0.01;
  cube.rotation.y += 0.01;

  renderer.render( scene, camera );
};

animate();

阅读完简单的十几行代码之后，各位可能会发现这个 Demo 中在一直调用 animate() 方法，而此方法中我们修改了立方体的旋转角度，并执行了这一行代码：renderer.render( scene, camera )。假如你没有接触过图形学或 WebGL，仅凭语义会翻译成：“渲染器渲染场景和摄像机”。没错，这一行的作用正是如此！

假如我们将上面那句话拆解一下：“渲染器 - 渲染 - 场景和摄像机”，这句话正符合了我们的 “主 - 谓 - 宾”的结构。那么就可见主语（即渲染器）是个很重要的存在！所以此系列的第一篇文章我们就从渲染器 —— Renderer 说起。

Renderer⚙️

将 ThreeJS 文档目录滚动至 Renderers 一栏，可以看到有 WebGLMultisampleRenderTarget 、WebGLRenderer 、WebGL1Renderer 、WebGLRenderTarget 和 WebGLCubeRenderTarget 五类渲染器，而我们就聚焦于 WebGLRenderer 这个渲染器即可，稍后会给大家介绍一下为何会有 WebGL1Renderer，至于其他三种渲染器，我们就不先讨论（其实我也没用过，后续了解了咱们再聊）

WebGL1Renderer

假如你对 WebGL 稍有了解，那么就会知道其实 WebGL 有 1.0 和 2.0 两个版本，那么两个版本分别是基于 OpenGL ES 2.0 和 OpenGL ES 3.0 的，至于不基于 OpenGL ES 1.0 是因为 1.0 是固定管线的，2.0 和 3.0 是可编程管线。所谓固定管线就是我们给管线配置相应参数和开关即可，可编程管线的可编程部分就是我们所熟知的 顶点着色器 和 片元着色器。

扯远了，再说回 WebGL，这俩版本有什么差别呢？大家可以看这个链接。

简单概括一下就是多了更多纹理格式、内置函数、3D 纹理贴图，同时还支持了非 2 的整数次方大小的图片。同时，WebGL 2.0 与 WebGL 1.0 在对浏览器的兼容性上有很大的差异，以 Chrome 为例，WebGL 1.0 兼容 9 及以上的 Chrome 版本，而 WebGL 2.0 则兼容 56 及以上的 Chrome 版本，对浏览器的兼容性的巨大差异就有极大的可能让一些陈旧的 WebGL 1.0 的系统崩溃，故 ThreeJS 提供了 WebGL1Renderer 来进行适配兼容。ThreeJS 已经从 r118 版本就全面升级到 WebGL 2.0 了，所以如果你的系统使用的 ThreeJS 版本低于 r118，并且准备升级到最新的 r120 版本，为了避免程序挂掉，你需要将 Renderer 替换成 WebGL1Renderer！如何查看最新 ThreeJS 版本，请见下图：

而查看当前项目使用的 ThreeJS 版本请见 package.json 中的 ThreeJS 依赖版本的 MINOR 版本号即可，比如：three: 0.120.0 就表明是 r120 版本，href="https://docs.npmjs.com/about-semantic-versioning">npm 语义化版本请见官方文档。

WebGLRenderer

说回我们的主角 WebGLRenderer，进入到源码（src/renderers/WebGLRenderer.js）后可以看到头部有很多参数初始化的操作，在此就不一一介绍，关于参数含义大家可参考文档：了解参数含义请阅读 Constructor 部分。其中需要提一下的是，大家可能会发现这条语句：

const _canvas = parameters.canvas !== undefined ?
  parameters.canvas :
  document.createElementNS( 'http://www.w3.org/1999/xhtml', 'canvas' );

这里使用的是 createElementNS 并非 createElement，二者区别及用途请阅读：

Document.createElementNS: What's the difference and why we need it​zhangwenli.com

getContext

当我们 new 一个 Renderer 时，其内部会最先进入这下面的语句：

if ( _gl === null ) {
  const contextNames = [ 'webgl2', 'webgl', 'experimental-webgl' ];
  if ( _this.isWebGL1Renderer === true ) {
    contextNames.shift();
  }
  _gl = getContext( contextNames, contextAttributes );
  if ( _gl === null ) {
    if ( getContext( contextNames ) ) {
      throw new Error( 'Error creating WebGL context with your selected attributes.' );
    } else {
      throw new Error( 'Error creating WebGL context.' );
    }
  }
}

首先当 WebGL 上下文不存在时，Renderer 内部列出了浏览器所提供的所有 WebGL 上下文名称，如若是 WebGL1Renderer，则删去 WebGL 2.0 的上下文名称，然后调用 getContext 方法获取上下文。getContext 方法实现也十分简单：

function getContext( contextNames, contextAttributes ) {
  for ( let i = 0; i < contextNames.length; i ++ ) {
    const contextName = contextNames[ i ];
    const context = _canvas.getContext( contextName, contextAttributes );
    if ( context !== null ) return context;
  }
  return null;
}

遍历上方列举的上下文名称，如果获取上下文则返回，否则返回 null。

initContext

当获取到上下文后，紧接着调用的就是 initGLContext 方法了：

function initGLContext() {
  extensions = new WebGLExtensions( _gl );
  capabilities = new WebGLCapabilities( _gl, extensions, parameters );
  // 若不是 WebGL 2.0，则需额外获取以下 extensions
  if ( capabilities.isWebGL2 === false ) {
    // ...
  }
  extensions.get( 'OES_texture_float_linear' );
  
  utils = new WebGLUtils( _gl, extensions, capabilities );

  state = new WebGLState( _gl, extensions, capabilities );
  state.scissor( _currentScissor.copy( _scissor ).multiplyScalar( _pixelRatio ).floor() );
  state.viewport( _currentViewport.copy( _viewport ).multiplyScalar( _pixelRatio ).floor() );

  // ...
}

用导游的话来讲：“首先映入我们眼帘的是 new WebGLExtensions 和 new WebGLCapabilities 两条语句”，WebGLExtensions 的作用是判断某个 extension 是否存在，以及获取指定的 extension 并 全量返回，而 WebGLCapabilities 则是获取当前 WebGL 系统的一些属性，如：支持的最大精度、是否是 WebGL 2.0 以及所支持的最大贴图大小等。而下面的 WebGLUtils 中只有一个 convert 方法，该方法主要是 将自定义的类型转换成 WebGL 内置的类型。

紧随其后的就是 WebGLState，别看它名字很短，但是它却很重要！通过这个 state，我们可以设置视口大小、设置混合、设置材质、绑定纹理等。其余的内容就先省略，后续有必要再讲，先让各位知道 Renderer 内部的工作流程。

调用完 initGLContext 方法后就有一句：

const xr = new WebXRManager( _this, _gl );

WebXR 是一组支持将渲染3D场景用来呈现虚拟世界（虚拟现实，也称作 VR）或将图形图像添加到现实世界（增强现实，也称作 AR）的标准，详情请查看 MDN文档。

animation

调用完 initContext 后，就来到了 animation 环节：

const animation = new WebGLAnimation();
animation.setAnimationLoop( onAnimationFrame );
if ( typeof window !== 'undefined' ) animation.setContext( window );

animation 的调用更是只有这简单的 3 行语句，WebGLAnimation 的类型如下：

class WebGLAnimation {
  start(): void;
  stop(): void;
  setAnimationLoop( callback: Function ): void;
  setContext( value: Window ): void;
}

当调用 setAnimationLoop 时，其实就是将传入的 callback 赋给 WenGLAnimation 内部的 animationLoop 变量，当调用 start 方法时，就调用 window 的 requestAnimationFrame 方法。所以 ThreeJS 内部的动画也是不断调用 requestAnimationFrame 来实现的，呵！凡人！

而 setContext 则是将 context 设为 window，至于 stop 方法大家应该也能猜到里面如何停止动画的了吧！

结束语

其实 WebGLRenderer 大约 2000 行代码，但其中绝大部分是函数声明供我们后续的使用。回顾本文，大家就会发现当我们 new 一个 Renderer 时 ThreeJS 只不过是帮我们初始化了 context，并设置了一下 animation，其余的函数都是后续才会用到。故初始化一个 Renderer 也没什么故弄玄虚的！

既然内部有这么多的函数让我们后续使用，那么下篇文章就来讲讲我们常用的 Renderer 中的方法。

前言

首先，WebGL并不是一门语言，它是一个标准，它是在OpenGL ES的基础上所建立的一套适用于浏览器的图形学标准；而OpenGL ES则是OpenGL的一个特殊版本（套娃警告 ），ES版本被广泛的应用于手机、家用游戏机等设备。想了解更多关于WebGL标准内容的小伙伴可以进入Khronos Group的网站自行浏览。

WebGL的开发与我们普通的前端开发并没有什么太大差异，一个浏览器的网页一般是由：HTML、 JavaScript、渲染引擎等部分组成，如果我们要开发WebGL的话，还需要什么呢？让我们来思考一下，我们在高中学习几何的时候老师讲过“点动成线，线动成面，面动成体”，那我们就以最基础的点为例，首先点有什么属性么？在屏幕中的位置、点的颜色、点的大小，我们如何定义一个点的这些属性呢？这就要引入GLSL ES(OpenGL Shader Language ES)（后称着色器）了，着色器的写法与C语言语法有些相似，从名字也能看出WebGL与OpenGL ES是有“血缘关系”的！其次，我们还需要的就是浏览器厂商基于WebGL标准提供的API。

WebGL并不像OpenGL一样有繁琐的环境配置的流程，也没有对系统的要求，只要有一个支持WebGL的浏览器即可！

本次我们使用字符串的形式编写着色器，暂时不新建单独的着色器文件​​

给这个“点”一点自由的空间

为了使用浏览器提供的WebGL接口，我们需要使用<canvas>来获取WebGL上下文：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Point</title>
</head>
<body onload="main()" style="padding: 0; margin: 0;">
  <canvas id="webgl" width="600" height="400">
    您使用的浏览器不支持 WebGL！
  </canvas>
  <script>
    function main() {
      // get canvas element
      const canvas = document.getElementById("webgl");
      const gl = canvas.getContext('webgl');
    }
  </script>
</body>
</html>

gl就是我们所获取到的WebGL渲染的上下文 让我们给画布填充个背景色吧：

<!DOCTYPE html>
<html lang="en">
  <!-- ... -->
  <script>
    function main() {
      // ...
      const gl = canvas.getContext('webgl');
      
      gl.clearColor(0.0, 0.0, 0.0, 1.0);
      gl.clear(gl.COLOR_BUFFER_BIT);
    }
  </script>
  <!-- ... -->
</html>

这样我们要绘制点的画布就拥有了浩瀚宇宙一般深邃的黑色:) 喝点庆祝一下

解释一下gl.clearColor方法是设置清除画布的背景色，形式是RGBA；gl.clear则是调用清除画布的方法，可传递的参数gl.COLOR_BUFFER_BIT是个什么呢 其实该方法继承自OpenGL，OpenGL是基于多缓冲区模型的，清空绘图区域实际上是在清空颜色缓冲区，传递参数gl.COLOR_BUFFER_BIT是在告诉WebGL清空颜色缓冲区；除此之外还有深度缓冲区以及模板缓冲区，可查看此了解。

让距离近一“点”

下面我们开始绘制点 在前面我们分析道一个点有位置、颜色及大小三个属性，下面我们将编写着色器给深邃的画布增添一点色彩

<!DOCTYPE html>
<html lang="en">
  <!-- ... -->
  <script>
    function main() {
      // ...
      const VertexShader = `
        void main() {
          gl_Position = vec4(0.0, 0.0, 0.0, 1.0);
          gl_PointSize = 10.0;
        }
      `;
      const FragmentShader = `
        void main() {
          gl_FragColor = vec4(0.0, 0.0, 1.0, 1.0);
        }
      `;
    }
  </script>
  <!-- ... -->
</html>

上面我们定义了VertexShader和FragmentShader，在WebGL中有两种着色器分别是：顶点着色器和片元着色器：

• 顶点着色器：用来描述顶点的特性的程序，比如位置、大小等。顶点是指二维或三维空间中的一个点，比如二维图形或三维图形的顶点或交点；
• 片元着色器：也称像素着色器，进行逐片的处理过程比如光照。片元可以理解为像素。

同时，每个着色器都有一个main()方法，并且该方法不能指定参数，每行语句结束之后必须有分号！！！ gl_Position、gl_PointSize和gl_FragColor三个变量则是着色器内置的变量，其中gl_PointSize可以不赋值，默认值为1.0。各位注意到，上面赋值语句中我们给的值是0.0而不是0，这是因为这些内置变量是有其变量类型的：

问：明明一个点的坐标只有(x, y, z)，为什么要传4个值呢？
答：这里使用的是齐次坐标的形式，了解齐次坐标可查看我上篇文章《客官，进来看看图形的几何变换？》。
问：使用上面定义的顶点着色器和片元着色器分几步呢？
答：分三步！第一步，创建着色器；第二步，创建着色器程序；第三步，在WebGL上下文中使用着色器程序。

1️⃣创建着色器

为了方便使用我把创建着色器的步骤抽取了一个createShader()方法：

function createShader (gl, type, source) {
  const shader = gl.createShader(type);
  if (shader == null) {
    console.warn('无法创建着色器');
    return null;
  }
​
  gl.shaderSource(shader, source);
  gl.compileShader(shader);
​
  const compiled = gl.getShaderParameter(shader, gl.COMPILE_STATUS);
  if (!compiled) {
    console.log('编译着色器失败： ' + gl.getShaderInfoLog(shader));
    gl.deleteShader(shader);
    return null;
  }
​
  return shader;
}

gl.shaderSource是将gl.createShader创建的着色器的source设置为我们定义的VertextShader或FragmentShader，剩下的就不解释了，函数名都很表意:)

2️⃣创建着色器程序

也为了更简洁，创建着色器程序的步骤也抽成了createProgram()方法：

function createProgram (gl, vshader, fshader) {
  const vertexShader = createShader(gl, gl.VERTEX_SHADER, vshader);
  const fragmentShader = createShader(gl, gl.FRAGMENT_SHADER, fshader);
  if (!vertexShader || !fragmentShader) {
    return null;
  }
​
  const program = gl.createProgram();
  if (!program) {
    return null;
  }
​
  gl.attachShader(program, vertexShader);
  gl.attachShader(program, fragmentShader);
​
  gl.linkProgram(program);
​
  const linked = gl.getProgramParameter(program, gl.LINK_STATUS);
  if (!linked) {
    console.warn('Link 着色器程序失败： ' + gl.getProgramInfoLog(program));
    gl.deleteProgram(program);
    gl.deleteShader(fragmentShader);
    gl.deleteShader(vertexShader);
    return null;
  }
  return program;
}

gl.attachShader是将创建好的着色器attach到我们着色器程序上，然后调用gl.linkProgram方法将program整合起来。

3️⃣在上下文中使用着色器程序

function initShaders(gl, vshader, fshader) {
  const program = createProgram(gl, vshader, fshader);
  if (!program) {
    console.warn('创建着色器程序失败！');
    return false;
  }
​
  gl.useProgram(program);
  gl.program = program;
​
  return true;
}

这里就很简单啦，就不做过多介绍了！然后在main()中调用此方法初始化着色器：

<!DOCTYPE html>
<html lang="en">
  <!-- ... -->
  <script>
    function main() {
      const canvas = document.getElementById('webgl');
      const gl = canvas.getContext('webgl');
​
      if (!initShaders(gl, VertexShader, FragmentShader)) {
        return alert('初始化着色器失败');
      }
​
      gl.clearColor(0.0, 0.0, 0.0, 1.0);
      gl.clear(gl.COLOR_BUFFER_BIT);
      gl.drawArrays(gl.POINTS, 0, 1);
    }
    // createShader
    // createProgram
    // initShaders
  </script>
  <!-- ... -->
</html>

gl.drawArrays的第一个参数是指定绘制方式，第二个参数是从哪个顶点开始绘制，第三个参数是指定绘制要用到多少个顶点。这样我们就能在黑色的画布上的正中心看到一个蓝色的点：

但是，小朋友你是否有很多的问号？

明明定义的点的位置在(0, 0, 0)，为什么点会出现在<canvas>的正中央呢？WebGL相对于<canvas>的位置如下图：

中间的是WebGL相对于<canvas>的坐标，而canvas的坐标则是相对于屏幕的！WebGL相对于<canvas>的坐标并不是绝对的像素值，而是相对的[-1.0, 1.0]。 举个例子：我们展示的点在canvas的正中央，如果我们把点的坐标设置为(1.0, 0.0, 0.0, 1.0)，那么点就会出现在canvas的最右侧，同理设置为(-1.0, 1.0, 0.0, 1.0)，点则展示在canvas的左上角:P

渲染这个点经历了什么？

就这么结束了？

怎么可能就这么结束！让我们给绘制点的程序升级一下，现在我们的位置、大小都是在着色器中定义好的。当然WebGL也为我们提供了方法让我们可以从外部传入相应参数值。让我们对着色器改造一下：

const VertexShader = `
  attribute vec4 a_Position;
  void main() {
    gl_Position = a_Position;
    gl_PointSize = 10.0;
  }
`;

attribute是一种GLSL SE变量，被用来从外部向顶点着色器内传数据，只有顶点着色器可以使用；同时还有一种变量类型uniform，uniform变量传输的是对于所有顶点都相同（或与顶点无关）的数据。上面是着色器代码中，我们将从外部获取到的a_Position和a_PointSize分别赋值给gl_Position和gl_PointSize。怎么通过JavaScript向着色器的attribute变量传值呢？

function main () {
  // ...
  if (!initShaders(gl, VertexShader, FragmentShader)) {
    return alert('初始化着色器失败');
  }
​
  const a_Position = gl.getAttribLocation(gl.program, 'a_Position');
  gl.vertexAttrib3f(a_Position, 1.0, 0.0, 0.0);
  // ...
}

使用vertextAttrib3f方法就可以将使用getAttribLocation获取到的attribute变量赋值，vertexAttrib3f方法会将齐次坐标的最后一个值默认赋值为1.0，当然使用vertexAttrib4f也是可以的:)

再加点功能

当我在canvas上点击的时候，就在点击canvas的地方展示一个点，这就需要我们给canvas绑定方法了：

canvas.onmousedown = function (e) {
  click(e, gl, canvas, a_Position);
};

在此就不给详细代码了，canvas绑定事件方式如上，并简单说一下思路：当点击之后获取鼠标在canvas点击的坐标值；然后将坐标转换为WebGL相对于canvas的[-1.0, 1.0]形式的坐标；然后清空画布，在重新绘制点。坐标转换的代码如下：

let x = e.clientX;
let y = e.clientY;
const rect = e.target.getBoundingClientRect();
​
x = (x - rect.left - canvas.width / 2) / (canvas.width / 2);
y = (canvas.height / 2 - y + rect.top) / (canvas.height / 2);

比如还能再给每个点设置不同的颜色，提示：使用 uniform 变量。

结束语

使用原生WebGL绘制一个“简单的点”就讲到这里啦:)我自己也在不断的学习中，后续会出更多关于WebGL的文章。