webgl 游戏_30个令人惊叹的WebGL示例和演示

WebGl仍在增长,尽管大多数现代浏览器都支持它,但它也可能需要在旧的浏览器上工作。在本文中,我遇到了很多WebGL的示例和演示,它们可以增进您对这项新技术的理解。

因此,请坐下来放松身心,使用最新的浏览器,并查看这些令人惊叹的WebGL演示。

水族馆

d9c53c38e1ca4b7e49cfa297f57326f1.png

由Greggman和Human Engines创建。水族馆几乎完全基于时钟运行。这意味着,如果它们的时钟同步,则摄像机和每条鱼的位置在机器上都相同。在联网模式下,每台计算机都会通过定期向服务器询问当前时间来使其时钟保持同步。

3黑梦

f1f8fc29dc73f3aaa2e86bd4085c0feb.png

克里斯·米尔(Chris Milk)创作的半互动电影。它是使用Google开发的技术创建的。它可与Chrome配合使用,混合2D和3D计算机图形,并展示Danger Mouse和Daniel Luppi与Norah Jones和Jack White一起演唱的歌曲“ Black”。

立方体

3ea19bb42504a22981cbe9a04951430b.png

一款受Google地图技术启发的WebGL创新游戏。它包含您在Google地图和模拟迷宫游戏中看到的元素,以及可以破坏体验的出色控件。

导航仪的飞行

6ae0e5efa4b2099807ac2d819a31a18f.png

由Mozilla音频API团队开发的,具有Flickr和Twitter集成的实时JavaScript和WebGL呈现的非交互式音乐视频。

愤怒的小鸟

61ed46aa76878321beb644f50234da51.png

Rovio创建的Web版本的《愤怒的小鸟》。它是基于非硬件加速2D画布游戏的低分辨率(SD)版本。

化学涂鸦

5833785d5b2a4f3ebead0a052004f62b.png

Chemdoodle是一种科学的可视化工具,可让您从多种药物中选择一种,并在iChemLabs开发的兼容浏览器上查看其化学结构的3D显示。

金藻

008fe702615084a15f80cbc4685e6197.png

使用VladimirVukićević的mjs矩阵库构建的动态水母WebGL演示。它展示了模拟的骨架,服务器端的部分模拟以及与WebSocket和面向粒子系统和体积光效果的相机的同步。

WebGL书柜

95af580997bf56025f482b2b7a81317d.png

Google图书的新浮夸界面采用了螺旋形样式。在螺旋内,书籍按主题分类。单击任何书籍,将带您进入Google图书中的条目。

只是反射器

4cc840de8bb93e70dfc9311b638e4ebd.png

与Google合作的Arcade Fire的音乐视频只是一个Reflektor。使用鼠标,您可以调整各种实时滤镜和效果。此WebGL将需要一个网络摄像头或只需要您的鼠标。

WebGL地球

c131cb9932edf6b2a9297c1a9e6b194c.png

一种开源软件,可在Web浏览器中使用3D地球进行探索,缩放和“播放”。该项目通过Web开发人员社区的支持与合作而得以持续。

3Dtin

56575ca830519db7df9037f433ebd6e4.png

3Dtin是一种易于使用的工具,可使用面向自然体素的3D像素方法创建形状,并具有在3D打印服务中导出项目的功能。

生物数字化人类

2a2a2a38191862d035a3303edc46dde0.png

BioDigital Human是一个虚拟3D身体,它在基于Web的交互式平台中使数千种医学上准确的解剖对象和健康状况栩栩如生。

WebGL Rubik的多维数据集

74542de09eb2f483d2e161cbdedbea05.png

Werner Randelshofer开发了从Java到WebGL的Rubik's Cube小程序。部分代码来自WebGL演示存储库。此WebGL中使用的代码由Apple Inc.和Google Inc.拥有版权,并在其许可下使用。

VideoFX

1f52e4b780ea5283e1a61fd45d1ada67.png

由Daniel Patterson使用Google的代码开发。它使您可以播放视频的颜色,例如对比度和色调。

格力

e28b6ff9f79117dd947e51a4471830e0.png

这是一个JavaScript库,由Paul Brunt开发并用作制作WebGL的框架,旨在简化WebGL的使用,从而无需下载插件即可使用硬件加速的2D / 3D应用程序。

Ctrl + [P] aper

3d1931b498122d3b8d82a49644365c24.png

数字工作室Grouek设计了这个Web GL网站,任何人都可以通过3个简单的步骤来创建纸质玩具。完成后,按照说明打印PDF,剪切,折叠和粘贴。在您想象不到的时间内,一个美丽,独特,自制的纸制玩具将自豪地站在您的桌面上。

节日留言

9e7a52c77ea3489788d9393f9ffb08fe.png

由@thespite和@mrdoob开发。首先,您需要输入地址,然后再继续。输入后,您将看到一个漂亮的3D场景,上面有节日问候,您可以在其中移动很长的距离来查看整个3D模型。

新贵

228e28c4cba49621197103753224cfa5.png

Nouvelle Vague基于Twitter提供了诗意的交互式3D WebGL实时体验。在一个极简和陌生的世界中。正在使用从场景边界到中心的不同飞行对象进行推文。

材料:汽车

429fe63cba3215f16b348188e7c56063.png

使用此WebGL,您可以选择在浏览器中查看Bugatti Veyron,Lamborghini Gallardo,Ferrari F50和Chevrolet Camaro的3D外观。搭便车,欣赏美景。猜猜是什么,您甚至可以选择它们的颜色。

收藏品画家

6977b388074db6fff185fb9c3a0760b3.png

Collectibles Painter是基于WebGL的可收藏人物设计器,可让您使用油漆,贴花和材料来创建自己的个人玩具收藏品。然后,您可以与朋友分享自己喜欢的作品。从10种不同的肤色,脸型,发型等中进行选择。图形效果包括:

  • 环境照明
  • 单遍着色器效果
  • 使用PCF过滤的柔和阴影
  • 贴图的基于纹理的投影。

雷神之锤3

bb17ade44bbabebec53fc2c7266152e1.png

它是由布兰登·琼斯(Brandon Jones)开发的,是一款令人印象深刻的WebGL游戏演示,其中包含音乐。您可以使用键盘和鼠标进行播放。

WebGL图像过滤器

528a4d8475b2fcc754e25cfacdb8c644.png

Evan Wondrasek的WebGL图形编辑器应用程序,具有流畅,快速的界面。您可以像在Photoshop中看到的那样,使用滤镜效果,例如亮度和对比度。

来自尘土

f0a59711aabfdb7c36004c147d76e2c2.png

WebGL游戏最初于几年前在某些传统游戏平台上发布。育碧已将此游戏移植到WebGL。它包含有趣和惊人的效果和控件。

Acko.net

0af15246f2c2770bd5b9fd1bb10dc706.png

当用户向下滚动时,WebGL在标头上提供带有基本设置的3D徽标。它提供了将WebGL用作网站或软件应用程序的实用补充的可能性。

WebGL地形

de9326f5468289eef18a4f2774289abe.png

使用3D单纯形噪声的具有动态过程地形的WebGL演示。它以ro.me中的鸟为特色,背景声音由Kevin Maclead制作。

rid歌

该WebGL演示通过WebGL和WebAudio在3D魔术体素世界中提供了真正的Web Hi-Fi爵士乐体验。使用WASD键(箭头键的最常见配置)进行导航。使用控制面板重新混合爵士乐队。它是由Goo Technologies开发的。

烟花

b32bd42db2f7e9c365aa0981bb95770d.png

使用Jaakko Rinta-Filippula开发的WebGL和Web Audio API进行的简单烟花表演。

WebGL水

ff516523dd1b250b7c7ee94c1a3c57e6.png

埃文·华莱士(Evan Wallace)的一项实验,该实验以水池中球的互动场景为特征,该场景具有灰迹反射和折射,分析性环境光遮挡,焦散和柔和阴影。

WebGL地形编辑器

4b412502b6e362d664a86491f442a6bb.png

由罗布·查德威克(Rob Chadwick)创建的WebGL Terrain Editor是一款令人惊叹的WebGL,其内置的技术功能可让您实时制作自己的景观。它具有一些令人惊叹的效果,例如光线跟踪的柔和阴影和体积阴影。

你好赛车手

6e79aafcddf2ab26e25516950af5480e.png

由HelloEnjoy创建的WebGL是一种交互式3D玩具车,您可以在屏幕上四处行驶。您可以倾斜以转向,触摸向右以加速并向左触摸以反向。如果迷路,请向右或向左滑动以重新启动。

包起来

WebGL提供了出色的3D Javascript显示;但是,其中一些需要现代GPU才能运行,而功能强大的GPU。也有一些警告表明WebGL包含多个可能的安全问题,这些问题可能导致代码的随机执行甚至跨域攻击。

Mozilla和Google提出了许多加强安全性的建议,这可能有助于该技术的未来发展。

https://1stwebdesigner.com/webgl-examples-and-demos/

  • 1
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值