简介四：WebGL，但更轻松

WebGL已经存在了几年，我们已经看到它已经发展成为当今可靠且得到广泛支持的图形技术。 像Google，Mozilla和Microsoft这样的大公司都提倡使用它，很难不对此感到好奇。

自2011年确定规格以来，它就吸引了很多人。 借助ThreeJS ， BabylonJS和Play Canvas等框架，该领域已不再那么令人生畏。 多亏了他们，学习起来容易得多，但是由于它是一门完全不同的学科，因此仍然需要良好的学习努力。

本文将向您简要介绍WebGL是什么，然后我将介绍Four ，这是我创建的一个框架，旨在帮助开发人员快速研究WebGL世界。 如果您想了解Four和WebGL可以为您做些什么，请看一下我构建的这个简单演示 。

什么是WebGL？

WebGL是基于嵌入式系统开放图形库（OpenGL ES 2.0）的图形API。 这允许支持它的浏览器在HTML canvas元素中呈现三维元素。 之所以选择OpenGL ES 2.0，是因为它是计算机图形学的著名开放标准，更重要的是，它被设计为在嵌入式设备（例如手机和平板电脑）上具有最佳性能。 鉴于现代浏览器具有广泛的设备可访问性，这一点至关重要。

API本身通过JavaScript公开。 该API是低级的，因此使用它会导致大量重复和复杂的代码。 此外，典型的基于OpenGL的应用程序的性质强加了该语言无法为其准备的编程设计范例和数据结构，例如面向对象的编程和启用快速矩阵操作的一元运算符。 对于依赖于大​​矩阵结构的操纵的物理模拟而言，这可能是有问题的。 这是四个进来的地方。

介绍四

在过去三年中，在使用WebGL进行基于Web的物理模拟领域中，我意识到缺乏基于Web的物理引擎。 这可能是由于执行此操作需要大量数据。 为了解决这个问题，我开始开发Four 。

第四是开发Web 3D内容的框架。 它使您避免了重复的负担和复杂性，从而可以加快和简化开发过程，同时又可以展现WebGL API的灵活性。 这是通过暴露几层而完成的，每层都建立在上一层之上，使您可以访问不同的抽象级别。 根据您的需求，您可以访问最基本的级别或更高级别。 作为开发人员，这使您可以专注于重要的事情：在屏幕上显示一些内容。

请注意，Four使用gl-matrix库进行矩阵和矢量操作，该库包含在框架中。 因此，要使用它，您需要了解gl-matrix库的一些实用知识。 如果您不知道它是什么，我建议您看一下gl-matrix库文档 。

自几天前我发布第一个公开版本以来，四个才刚刚起步。 它的最终目标是使用GPGPU技术将物理逻辑转移到GPU，从而可以在强大的并行多核处理器体系结构上执行。 这为高性能的三维物理模拟世界打开了网络。

在本文中，我不会详细介绍GPGPU。 如果您想了解更多有关此主题的信息，建议您阅读相关的Wikipedia页面 。

四个的结构

该框架的基础是三个抽象层次：基岩，砌体和休息。 在以下各节中，我将覆盖所有这些层。

基岩

基岩层非常紧密地反映了WebGL API的语言。 该层属于脚手架类，可用于设置着色器，链接程序和配置帧缓冲区渲染目标。 下面列出了一些示例：

• 着色器 ：用于维护定义渲染例程的源代码
• 程序 ：可以连接着色器的对象
• 属性和统一 ：分别使用attribute和uniform存储限定符维护在着色器源代码中定义的变量
• 帧缓冲区 ：为您的应用程序创建渲染目标。 通用帧缓冲区实例建立对canvas的引用作为渲染目标
• 纹理 ：通常用于映射到网格以伪造各种细节的图像的存储容器
• 顶点阵列对象 ：维护要在着色器中处理的顶点数据的存储缓冲区

石工

基岩层上方是砌筑类。 他们使用基岩层抽象出新概念来完成各种任务，从渲染网格到构造结构。

结构特别值得注意。 它们在着色器中采用了该struct的类似“分组”性质，因为它们可以整理照明和相机等制服。 相机尤其具有投影矩阵，模型视图矩阵和法线矩阵。 它们全部以统一形式存在于着色器中以渲染场景。 摄像机的结构将生成制服，并使用相同的名称假定其值存在于该结构的属性中。 随后绑定结构将自动将这些值应用于生成的制服。 吸引人的是能够通过摄影机结构显示其他功能，以便最终在渲染时计算和更新其制服的功能。

休息

最高层是Rest抽象。 这隐藏了许多底层功能，可帮助您快速开发内容。 该层的示例包括各种形式的照明和材质效果。 重要的是要注意，您将需要着色器来支持该层的渲染功能。 这可以在各自页面的四个文档中找到。 您还可以使用Masonry层中的结构为Rest层开发新的抽象。

现在，我为您提供了该框架的概述，是时候来看一下该框架了。

四入门

您需要做的第一件事是从其GitHub存储库下载Four 。 完成后，将脚本包含在HTML页面中：

<script src="path/to/four.min.js"></script>

此时，您需要包括一个HTML canvas元素。

<canvas width="500" height="500"></canvas>

canvas是最终场景将渲染到的视口。 如果未设置width或height属性，则框架将假定其各自的视口大小。

有了这个，您就可以使用Four。 为了帮助您了解其工作原理，我们来看一个示例。

渲染和旋转网格

第一步是使用framebuffer为canvas创建一个处理程序。

var view = new Four.Framebuffer();

该程序将附加将用于建模和渲染场景的着色器。 selector参数指定一个CSS类选择器，该selector器指向HTML中着色器的位置。

var program = new Four.Program({ selector: '.my-shader-class' });

我们还构造了一个网格形状，一个用于照亮场景的光源以及一个用于查看场景的三维透视投影。

var camera = new Four.PerspectiveCamera({
    program: program, location: [50, 50, 50]
});
 
var light = new Four.Light({
    program: program,
    location: [10, 10, 10]
});
 
var mesh = new Four.Mesh({
    buffers: new Four.VertexArrayObject({
        program: program,
        attributes: ['vec3 position']
    }),
    vertices: […]
    material: new Four.Material({
        program: program,
        diffuse: 0x9F8A60
    })
});

最后的片段将网格添加到场景并将其渲染到视图。 场景的预渲染执行例程每帧将场景围绕网格旋转0.25度。

scene = new Four.Scene();
 
scene.put(mesh);
scene.render(view, camera, function() {
    program.bind();
    light.bind();
 
    scene.rotation += 0.25;
});

使用此代码，我们可以创建一个场景，向其添加网格，然后将其照亮。 总结我们的示例，我们需要创建生成输出所需的着色器。 我们开工吧！

着色器

除了画布和JavaScript外，您还需要着色器脚本。 这些是在GPU上运行的程序，用于对网格提供的数据进行建模和渲染。 这是使用图形库着色语言（GLSL）开发的，并且需要顶点着色器和片段着色器。

应当使用HTML中的“着色器脚本标签”来包含着色器。 着色器标签有两种形式：

<!-- Vertex shader -->
<script class="my-shader-class" type="x-shader/x-vertex"></script>
 
<!-- Fragment shader -->
<script class="my-shader-class" type="x-shader/x-fragment"></script>

重要的是，它们的类必须具有与上述JavaScript中传递给程序的选择器相同的值。 将相同的类应用于顶点着色器和片段着色器的组合以链接程序。

顶点着色器对于通过a_position position属性传递的每个顶点执行一次。 顶点着色器的输出分配给内置变量gl_Position 。

<script class="your-shader-class" type="x-shader/x-vertex">
    #version 100
    precision lowp float;
 
    struct camera {
        mat4 projectionMatrix;
        mat4 modelViewMatrix;
        mat3 normalMatrix;
    }
 
    uniform camera u_camera;
    attribute vec3 a_position;    
 
    void main() {
        gl_Position = camera.projectionMatrix * camera.modelViewMatrix *
                      vec4(a_position, 1.0);
    }
</script>

在顶点处理器和片段处理器之间，需要渲染两件事，然后才能渲染场景。 首先，使用顶点处理器输出的顶点来连接顶点以构造网格。 其次，计算片段，然后使用gl_FragColor的片段处理器输出的颜色对其进行着色。

<script class="your-shader-class" type="x-shader/x-fragment">
	#version 100 
    precision lowp float;
    
    void main() {
        gl_FragColor = vec4(1.0);
    }
</script>

完成渲染管线后，可以将场景渲染到视图。

四个的未来

正如我在简介中所提到的，“四个”还处于初期。 因此，在我们继续构建物理引擎之前，还需要做更多的工作。 在即将发布的版本中，您可以期望添加以下功能：

• 基本几何形状（例如立方体，四面体，球体等）的网格默认设置
• 反射贴图
• 阴影贴图
• 法线贴图
• 额外的网状装载机
• 关键帧动画
• 效果–绽放，透明
• 和更多…

结论

WebGL是一种为Web渲染3D内容的技术，但其API可能难以使用。 四个是试图抽象化此难题的框架，因此您可以专注于自己的内容。 凭借其很少的抽象层，它可以灵活满足开发人员的需求。 它还鼓励开发人员分解这些抽象，以加深他们对图形应用程序如何工作的理解。

From: https://www.sitepoint.com/introducing-four-webgl-easier/