在浏览器上实现丰富的3D表达！WebGL最新趋势

自进入HTML5时代以来，使用3DCG的Web内容已经司空见惯。“WebGL”是一种仅使用浏览器进行3D渲染的技术，无需插件，近年来，更加复杂的丰富3D表达成为可能。在这里，我们将介绍最新的服务，可以用WebGL做些什么。

严肃的WebGL时代到来了！

不要错过这个潮流

近年来，消费者游戏用大量利用丰富的3DCG的被释放从家里许多国内外，3D表现也是在手机游戏正变得司空见惯。Oculus Rift以和HTC万岁和将要陆续公布，如最新的iOS·Android机如板载AR功能的标准，3DCG阶段变得不再蔓延超越现有的方式VR设备。

从2010年站上半年，3D终于也扩展到了网络世界。3DCG可以在Web浏览器技术，使人们有可能是“WebGL的”显示。你每天都在使用以某种方式如果一个人处理3DCG 3D标准的OpenGL，一个标准，它是在Web浏览器中运行。标准组织Khronos工作组（克罗诺斯集团继KG），其中包括超过100家公司，公司正在执行的OpenGL标准的开发，这WebGL的。Adobe的目标是一度传出，现在，Flash，这已经引起了业界的支持迅速失速智能手机普及率的机会，WebGL的进化将不再是一个夸张地说，网络代表未来的可能性很。现在，更多的确实90％的Web浏览器的世界的一个支持WebGL 1.0，已成为各种图像表现和动态内容是充分利用3D的可以在Web世界中实现。

WebGL 1.0正是基于OpenGL ES 2.0，OpenGL ES 2.0是OpenGL嵌入式设备的子集标准。在之前的旧3D标准中，可以仅在GPU具有的有限固定功能的范围内绘制和表示。但是，从这一代3D标准开始，程序员可以编写要在称为着色器的GPU上执行的程序，并提供这些3D API，从而实现更多功能的3D表示。

从下一节开始，我想举例说明充分利用WebGL的特色服务，这些服务近年来在日本和海外陆续出现。

主题1 WebGL开发和技术规范

通用格式“glTF”极大地促进了WebGL的传播

KG发布了基于OpenGL ES 3.0的增强版WebGL 2.0。主流浏览器已于2017年开始支持它，但据称WebGL 2.0具有大致的PlayStation 3性能。与很久以前的最新游戏相媲美的视觉表达将在Web浏览器上实现。

但是，显示3D内容还需要与Web高度兼容的3D文件格式。现有的通用格式COLLADA和FBX不适合Web，因为它们的规格是多余的。因此，KG制定了一种称为“glTF”（GL传输格式）的格式。glTF不依赖于特定的公司或工具，其规格可在GitHub上获得，因此任何人都可以使用它。支持的功能也是多种多样的，例如PBR（基于物理的渲染），蒙皮动画和变形目标（Maya中的混合形状）。

这些技术对Web3D至关重要，但对这些技术的直接编程需要非常先进的技术。矢量，矩阵......网络工程师经常被问及不熟悉的背景。然而，对Web3D的潜在需求很强，并且出现了许多抽象WebGL并使其更易于处理的库。使用这些可以相对容易地实现诸如PBR和物理模拟的高级表达。然而，这些现有的许多图书馆仍然在深入思考CG技术的世界，即使有了这些，仍有许多人仍然难以学习WebGL。也有人试图改变这种情况。

它是国内开源的Grimoire.js库，填补了Web开发人员和CG开发人员之间的空白，并为两者提供了易于使用的方法。特征是可以基于HTML等“标签”构建3D场景，支持PBR和glTF的开发者由经济产业省下属的信息处理促进机制支持，作为未开发的项目。这是四名日本大学生。WebGL不再是只有一些人使用的专业技术。它已经发展到可以实际使用的程度。

OpenGL / WebGL的谱系

OpenGL是WebGL的原型，它是IRIS GL的开放版本，IRIS GL是由前CG公司SGI创建的内部3D API，用于提高可移植性并将其用于任何公司。我们添加了版本更新的功能，但是不可能为CG表达式的多样化添加静态功能，并且自从OpenGL 2.0以来我们通过使用着色器语言获得软件灵活性来应对它。随着移动市场的蓬勃发展，制定了轻量级子集标准OpenGL ES。WebGL基于其OpenGL ES

WebGL渲染管道

GPU的处理分为多个步骤，其中数据像管道一样传播并改变形状。WebGL也是一个考虑其GPU处理步骤的规范。顶点着色器和片段着色器（也称为像素着色器）进程允许任何程序员执行他们想要的任何操作。今天，由于WebGL的着色器功能，Web上可以进行大量的3D表示。在WebGL 2.0中，该处理流程已经部分改进，以实现更多功能的处理

一个框架“Grimoire.js”，作为CG和Web工程师之间的桥梁

Grimoire.js官方网站。提供了一些简单的例子以及该框架的概念

显示glTF的样本。模型的显示以非常接近传统网络开发的形式提供，例如图像插入

像Ray Marching这样的高级表达式可以使用Grimoire.js在Web上轻松发布

调试工具。它以常规Web开发人员工具的形式提供，作为Chrome扩展

主题2“Sketchfab”和“PlayCanvas”

投资组合服务“Sketchfab”和云型游戏引擎“PlayCanvas”，可实现游戏开发和发布

虽然使用WebGL的服务在日本和国外陆续出现，但“Sketchfab”正在快速增长，足以压倒其他人。这是一项专注于3DCG的服务，pixiv是日本流行的插图通信服务，不仅可以将自己的作品作为一个组合分享，同时将其嵌入到博客或SNS中，但它也可以将Pro版本用作私有模式您可以发布或使用VR将您自己的模型检查为VR。它支持骨骼动画，不仅纯粹地展示了模型，而且还是一个出色的编辑器，可以通过一个非常通用的编辑工具使模型具有吸引力。对于每个文件最大容量为200 MB的Pro许可证，每月收费10美元;对于具有查看器自定义和广泛支持的Business许可证，收费为29美元，每个文件的最大文件数量增加到500 MB。我们鼓励3D艺术家尝试一下，因为它邀请了朋友，并通过Pro许可证免费提供限时优惠。

“Sketchfab”使3D模型具有各种绘图选项的吸引力

上传由摄影测量创建的约100万个多边形3D扫描模型

设置材质和纹理。也可以选择基于物理的材料

也可以使用许多后期效果。我尝试应用景深，但它看起来非常好。

在WebVR编辑模式下，您可以通过易于理解的方式设置自己的大小和位置

您可以对3D模型中的任何点进行注释和注释。选择具有已发布数据的注释具有放大点的效果

※3D模型可从以下网站获得：

threedscans.com/depot-des-sculptures-de-la-ville-de-paris/drameaudesert

“PlayCanvas”是一项服务，除了在网络上发布3D模型外，还允许您开发完整的3D游戏。虽然近年来使用Unity和UE4等游戏引擎开发独立游戏的人数不断增加，但“PlayCanvas”是一款功能齐全的开源云型游戏引擎，可以在Web浏览器上运行。它提供给包括英国在内的世界各地的用户。GMO Cloud在日本销售供国内使用，容量限制为200MB，但可以免费使用。为个人开发者准备个人计划，每月可以使用2，535日元。随着移动设备和硬件的显着发展，游戏引擎开发人员对WebGL越来越感兴趣，并且游戏开发中对WebGL的需求可能会增加。

用于在Web浏览器上开发3D游戏的开源游戏引擎“PlayCanvas”

各种内容发布Explorer。公共项目还可以访问源代码和场景

PlayCanvas的编辑器屏幕。直观的开发立即开始，无需安装

作为产品可视化的一个例子，可以从汽车内部和外部查看BMW i8

演示“After the Flood”，它使用WebGL 2.0中安装的许多各种功能

PlayCanvas WebVR技术样本支持“WebVR Lab”卡板，白日梦，HMD设备等。

主题3生产管理系统“保存点”3D查看器

您可以在Web浏览器上从外部检查大量3D资源

在日本的游戏和动画开发中，总是有大量的3D资产订购和生产管理。在仅用于进行评论并且仅在具有高规格PC的环境中执行评审的专用3DCG软件的制备方法中，评论等待时间每天发生。另外，由于不可能在3D数据的快照图像和转盘的动画中详细检查3D模型和动画，因此有必要直接查看实际的3DCG数据，从而导致时间损失。它会

因此，SavePoint可以显着降低创建和管理游戏开发的成本，并广泛应用于各种创意领域，尤其是移动游戏开发网站。已开发销售“保存点”MUGENUP是迅速在近年来可以缩短的3DCG数据需求的增加质量管理的时间3D查看器的GUNCY'S共同开发并开始销售。此查看器是一种使用WebGL的服务，允许您使用可从Maya和3ds Max导出的专用导出器在Web浏览器上轻松检查3D模型和动画数据，这些导出器在3DCG生产中的许多场景中使用。是的。即使是不能使用专用3D软件的移动笔记本电脑也只能通过互联网连接环境灵活运行，据说可以大大提高审查工作的效率。

此观察器不仅可以通过将3D模型旋转到360度的自由角度来看到，还可以更改相机的焦距以检查失真程度，UV部署模式，线框模式，从Maya导出的动画评论需要大量有用的工具，例如切换到内置摄像头的能力，使其成为可以在瘙痒区域内到达的服务。

在Web浏览器中实现3DCG工具的操作感

可以从Maya或3ds Max轻松导出的界面。骨骼动画和相机输出也是可能的，并且可以使用与Maya相同的外观进行确认。还可以将模型数据的屏幕截图缩小为缩略图将3D数据上传到SavePoint。除纹理显示外，您还可以在骨骼中显示或将相机旋转到所需的角度以检查模型数据。通过在右侧操作GUI可以进行各种视觉调整

显示线框并检查多边形划分

按3键检查附加的UV检查图像

通过移动UV扩散比滑块，3D模型逐渐变形为UV发展状态

按下Q键时会显示一个单独的栏。一方可以检查正常状态。通过按住Alt键并拖动，可以移动和旋转单独的条，因此很容易比较无法用贴花确认的形状状态

SavePoint的日程管理功能允许您集中管理员工进度

使用艺术家创建的3D模型的缩略图视图单击图像会导致3D查看器启动