打印 上一主题 下一主题

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

[复制链接]
跳转到指定楼层
1#
丿坨坨灬 发表于 2019-5-5 15:00:08 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式

马上注册CG织梦网,结交更多CG好友,下载更多CG素材,让你轻松学习。

您需要 登录 才可以下载或查看,没有帐号?立即注册

x



自进入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查看器启动

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

精彩图文
在线客服(工作时间:9:00-22:00)
18916069001
织梦网微信公众号

Copyright   ©2015-2016  CG织梦网  Powered by©Discuz!  技术支持:织梦网