看哪,一个具有美好前景的好工具即将出现在您的眼前。 快速,流畅。 它可以渲染3D,并通过集成进行动画处理,猜猜它是什么? HTML5 ? CSS3 ? 不,它称为WebGL,是一个软件库,可扩展JavaScript的功能以生成交互式3D图形,是的,没有任何插件!
在此展示厅中,我们不想向您展示常规内容。 我们想向您展示由专业开发人员精心制作的30个WebGL实验 ,以见证WebGL的真正威力,这不仅鼓舞人心,而且让您瞥见了网络的未来。 单击后跳入未来!
强烈建议您使用Google Chrome开发人员版本的最新版本查看这些演示。 不过,大多数演示都支持最新版本的Firefox , Google Chrome和Safari 。
由Google数据艺术团队创作的《黑色的三个梦》将您带入3个梦幻世界,这些梦幻世界是由丰富的2D绘图和动画与交互式3D序列交织而成的。 查看奇妙的奇妙体验!
这是一种真正的艺术作品-由3D粒子使用浮动纹理和帧缓冲对象构建的动画动物。 如果您移动鼠标,将带来更多惊喜!
模拟水下环境? 对于WebGL而言,这不是问题。 该演示以具有高质量纹理,场景动画,像素着色器动画,反射,折射和焦散的3D模型为特色,而所有这些都可以构成真实的水下场景!
足够说,这可能是最史诗般的WebGL演示。 向作者Jochen Wilhelmy致谢。
如果您想体验3D,这是最适合您的演示,还可以使用Martin's Hopalong公式沉思WebGL生成的图形的无穷魅力。
“使用Side FX Houdini完成了过程建模。 使用Python导出器导出为json格式。 使用Autodesk Mudbox绘制的纹理。 使用顶点着色器进行动画处理。”
这不是常规的动画演示,但具有动态仿真的骨骼,与WebSocket进行部分服务器端仿真和同步,面向相机的粒子系统,体积光效果以及VladimirVukićević的mjs矩阵库的功能。 简而言之,这是一项令人惊叹的复杂工程实验。
介绍HelloEnjoy独家为您带来的高端交互式汽车仿真。
您浏览器中的布加迪威龙,兰博基尼加拉多,法拉利F50和雪佛兰科迈罗。 搭便车,欣赏美景。 哎呀,您甚至可以选择它们的颜色。
“极品飞车”系列的未来将出现在网络浏览器中。 太野心了吗? 如果您访问过这些具有动态立方体贴图,阴影贴图和后处理效果的汽车,当然可以。
好吧,如果人物不是您的最爱,则尝试构建酷炫迷人的机器人,并向您的朋友炫耀! 您甚至可以花大钱使它成为现实。
3D吃豆人游戏怎么样? 图形和游戏玩法很好,最重要的是,它很有趣!
现在这是一个可爱的……或血腥的。 这只不过是一款有趣的游戏,向您展示WebGL在开发为自上而下的射击游戏时的功能。 有趣而有趣。
您猜对了,这是一款有趣的坦克射击游戏,可以使用武器和地图进行探索,甚至在某些级别上,您甚至可以购买直升机来探索世界! 它确实不只是常规游戏,而且图形看起来很舒服!
简单的图形和动画如何在正确完成时给人留下深刻印象的最佳示例。
看看由保罗·刘易斯(Paul Lewis)进行的优雅而启发性的实验“表面”。 您不仅可以更改演示中的幅度,弹性,自动轨道,线框和雨滴,还可以将自己的图像拖放到其中以感受到不同的效果。
只需将您喜欢的图像放到此演示中,并欣赏它爆炸成大量的粒子并与某种形式的磁力相互作用即可。 该实验是四种技术的组合:HTML5的拖放,File API,Canvas和WebGL。
Rutt-Etra-Izer是经典Rutt-Etra视频合成器的WebGL仿真。 该演示使您可以将自己的图像放入其中并进行操作。 有了这些东西,2D图像甚至可以看起来像3D!
一个简单但值得注意的演示,展示了WebGL的液体状态,各向异性的光着色器和摆动的顶点变形。
另一个出色的实验展示了WebGL的潜力。 Nouvelle Vague提供了基于Twitter的富有诗意和互动的实时3D体验,您将看到的是在不同飞行物体上进行的推文。 当然是欣赏推文的艺术方式。
“这次,我只是想做一个测试,看看我可以直接在JavaScript中更新多少个顶点位置和法线。 原来2,000就可以了:)我还添加了一些环境映射。 和怪异。 总是增加怪异。”
Daniel Pettersson制作的令人印象深刻的应用程序,使您可以将多个同时的后处理效果应用于Happy Feet 2预告片。 尝试并玩得开心!
经典2D水效果算法的3D表示形式,还向您展示了WebGL的交互方式。
使用由Google数据艺术团队开发的WebGL书柜,浏览10,000本书的封面。 您还可以按主题搜索,通过单击每个主题打开3D模型,然后使用QR码在手机上下载书籍。
酷炫的Google团队实验,通过其美丽,优雅和未来派的数据可视化效果 ,使您仿佛置身于未来。
另一个可视化的数据可视化应用程序,可以可视化主要航空公司的飞行路线,看起来很有前途!
WebGL图形编辑器应用程序? 从来没有不可能。 最重要的是,它既快速又流畅!
“反射,折射,焦散和环境光遮挡的水池。” 水池是用高度场模拟的,包含一个可以与水表面相互作用的球体。”
反射
WebGL面临的最大问题可能是其安全性。 根据Wikipedia的说法,美国计算机应急准备小组(US-CERT)发出警告,即WebGL包含多个可能的安全问题,这些问题可能导致任意代码执行,拒绝服务甚至跨域攻击。 这对网站所有者来说非常非常重要。
但是,包括Mozilla和Google在内的Khronos集团一直在建议可能的解决方案和未来的开发方法,以增强安全性,以应对可能的安全威胁。 希望该问题可以减少,甚至在将来解决,因为WebGL具有众多才华横溢的专业开发人员所展示的可能性!
让我们知道哪个实验让您最惊讶,当然,如果您有一个实验,请向我们炫耀!
翻译自: https://www.hongkiat.com/blog/webgl-chrome-experiments/