webgl-core 是一个基于 WebGL 的 JavaScript 库，可以在浏览器端创建和渲染 3D图形。通过 webgl-core，开发者可以更加轻松地构建 3D 图形应用。本文将介绍 webgl-core 的使用方法，包括安装、初始化、渲染以及常用API等内容。
安装
使用 npm 命令安装 webgl-core:
npm install webgl-core --save
初始化
使用 webgl-core，需要在 HTML 中创建一个 canvas 元素，并加载 webgl-core 库。如下是一个使用 webgl-core 的模板：
-- -------------------- ---- -------
--------- -----
------
------
----- --------------- --
------------ ---- ---------------
-------
------
------- ---------------------
------- -------------------------------------------------------
--------
----- -- - -----------------------------------------------------------
-- -- --------- ---- -----
---------
-------
-------以上代码包含了一个基本的HTML文档（包括一个canvas元素），以及使用 webgl-core 的模板代码。需要注意的是，在脚本页面中需要使用 WebGLCore.createContext 函数来创建 WebGL 上下文，然后用它来控制 3D 图形的渲染过程
渲染一个三角形
下面的示例代码将演示如何使用 webgl-core 创建一个简单的 3D 三角形。
-- -------------------- ---- -------
----- -------- - -
---- ---- ----
----- ----- ----
---- ----- ---
--
----- ------------------ - -
--------- ---- ----------------
---- ------ -
----------- - ----------------
-
--
----- -------------------- - -
---- ------ -
------------ - --------- ---- ---- -----
-
--
----- -- - -----------------------------------------------------------
-- ----------
----- ------------ - ----------------------------------
----------------------------- --------------------
-------------------------------
----- -------------- - ------------------------------------
------------------------------- ----------------------
---------------------------------
----- ------------- - -------------------
------------------------------ --------------
------------------------------ ----------------
------------------------------
-----------------------------
-- ------
----- -------------- - ------------------
------------------------------ ----------------
------------------------------ --- ----------------------- ----------------
----- ------------------------------- - ----------------------------------- -------------------
------------------------------------------------------------
------------------------------------------------------- -- --------- ------ -- ---
-- -----
------------------ ---- ---- -----
-------------------
-------------------------
------------------------
---------------------------- - ---------------------
--------------------------- -- ---常用API
WebGLCore.createContext(canvas) => gl context
WebGLCore.createContext() 函数用于创建一个 WebGL 上下文用于控制 3D 图形的渲染过程。其中参数 canvas 是 WebGL 中的 canvas 元素。
gl.createShader(type) => shader
gl.createShader() 函数用于创建并编译着色器程序。其中参数 type 代表着色器类型，可以是 gl.VERTEX_SHADER（顶点着色器）或 gl.FRAGMENT_SHADER（片段着色器）。
gl.shaderSource(shader, source)
gl.shaderSource() 函数用于指定着色器的 GLSL 代码。其中 shader 是由 gl.createShader() 创建的着色器对象，source 是着色器程序源码。
gl.compileShader(shader)
gl.compileShader() 函数用于编译 GLSL 代码。其中 shader 是由 gl.createShader() 创建的着色器对象。
gl.createProgram() => shaderProgram
gl.createProgram() 创建并返回一个着色器程序对象，用于将着色器组合成完整的渲染过程。
gl.attachShader(shaderProgram, shader)
gl.attachShader() 函数将一个编译好的着色器程序附加到着色器程序对象上。这个函数需要两个参数，一个是 shaderProgram 着色器程序对象，一个是 shader 编译好的着色器对象。
gl.linkProgram(shaderProgram)
gl.linkProgram() 函数将添加到着色器程序中的各个链接在一起，构成一个可执行的着色器程序。
gl.useProgram(shaderProgram)
gl.useProgram() 函数用于将当前上下文切换到指定着色器程序中。
gl.createBuffer() => buffer
gl.createBuffer() 函数用于创建并返回一个缓冲区对象，可用于读写 3D 图形中的顶点数据。
gl.bindBuffer(target, buffer)
gl.bindBuffer() 函数用于将指定的缓冲区对象绑定到目标上下文中。
gl.bufferData(target, data, usage)
gl.bufferData() 函数用于将数据存储到缓冲区对象中。其中参数 target 代表缓冲区类型，data 是要存储的数据，usage 代表使用场景。
gl.getAttribLocation(shaderProgram, name) => attributeLocation
gl.getAttribLocation() 函数获取指定着色器程序中指定属性的位置，以便在之后的代码中使用。
gl.enableVertexAttribArray(attributeLocation)
gl.enableVertexAttribArray() 函数用于启用指定属性的缓冲区对象。
gl.vertexAttribPointer(attributeLocation, size, type, normalize, stride, offset)
gl.vertexAttribPointer() 函数用于指定一个缓冲区的属性信息，以便能够在着色器程序中使用这个缓冲区渲染 3D 图形。
gl.clearColor(red, green, blue, alpha)
gl.clearColor() 函数设置清空屏幕时的背景色。
gl.clearDepth(depth)
gl.clearDepth() 函数定义了擦除深度缓冲区时所关联的深度值。
gl.enable(capability)
gl.enable() 函数启用 WebGL 的指定能力。
gl.depthFunc(func)
gl.depthFunc() 函数设置相对深度测试函数，以便在渲染 3D 图形时使用。
gl.clear(mask)
gl.clear() 函数用于清空屏幕上的颜色和深度缓冲区。
gl.drawArrays(mode, start, count)
gl.drawArrays() 函数用于绘制渲染好的 3D 图形。其中参数 mode 是各种不同的绘制模式，例如 gl.TRIANGLES。start 和 count 分别代表渲染的从何处开始和渲染的顶点数量。
总结
webgl-core 是一个非常实用而又方便的 WebGL 库，可以帮助开发者更加容易地控制 3D 图形的渲染过程。本文介绍了 webgl-core 的基本使用方法，包括安装、初始化、渲染以及常用API等内容。相信读完这篇文章，你的 3D 图形开发能力会有所提升，从而更容易地创建出高质量的 3D 图形应用程序。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055cb581e8991b448da2e5