当前位置: 首页 > 编程日记 > 正文

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/

相关文章:

IE8下的VML显示问题解决方案

最近在维护一个使用VML画曲线的网站,在不同的IE下浏览效果不一样,特别是在IE8下,出现莫名其妙的样式显示问题: 1.曲线不可见!在IE9或IE7下,曲线正常绘制,但是在IE8下,不见坐标轴和曲…

创新工场有哪些失败项目?不要只看着成功

创新工场有哪些失败项目?不要只看着成功 李开复 ,创新工场CEO回答:失败或碰到挑战的项目也不少。这里不点名,不谈细节,但是谈谈碰到什么挑战(有些已经失败,有些还在努力)&#xff1a…

彻底解决Linux索引节点(inode)占用率高的告警

今天邮箱里发现有一封某服务器inode使用率发生告警的邮件 登录到服务器上df -i查看,发现/路径下91%,磁盘使用率却不高,猜测可能是某个目录下的小文件过多,进而造成inode占用率过高,但不清楚根路径下各文件夹里的文件数…

镜像打包工具clonezilla

镜像打包工具clonezilla clonezilla 百度云盘链接:https://pan.baidu.com/s/1LOEPqNE9O0Z4QJmNExlgeA 提取码:zlso 使用方法: 1、将镜像直接烧入U盘 2、U盘启动

python数据分析设置_Python 数据分析系列之如何安装和设置 Python

由于人们用 Python 所做的事情不同,所以没有一个普适的 Python 及其插件包的安装方案,接下来我将详细介绍各个操作系统上 Python 科学计算环境部署。我推荐免费的 Anaconda 安装包,Anaconda 提供 Python 2.7 和 3.6 两个版本,以后…

javamail gmail

http://www.programfan.com/club/showpost.asp?id27614转载于:https://www.cnblogs.com/yqskj/archive/2013/01/11/2855715.html

robots.txt文件的解析及过滤

什么是robots.txt文件? robots.txt(统一小写)是一种存放于网站根目录下的ASCII编码的文本文件,它通常告诉网络搜索引擎的漫游器(又称网络蜘蛛),此网站中的哪些内容是不能被搜索引擎的漫游器获取的&#xf…

CF949C Data Center Maintenance(建图+强联通分量)

题意 有 n 个信息中心,第 i 个信息中心要在第 ti 个小时维护,维护期间信息不能被获得。 每个用户的数据都有两份备份,第 i 个用户的数据放在信息中心 c(i,1) 和 c(i,2)。 现在要挑选一个尽量小的信息中心集合,使得将这个集合的维护…

fabric 启动peer_编写 Fabric 链码的一般准则

我相信智能合约(链码)是 Hyperledger Fabric 区块链网络的核心。正确开发链码可以真正发挥一个安全区块链的优势,反之则会带来灾难性的后果。在这篇文章里我不打算探讨 Hyperledger Fabric 链码设计的特定模式的好与坏,而是希望分享我在开发若干 Hyperle…

Qt pro文件下跨平台宏的使用(windows/linux 以及x86 和 arm的区分)

#Qt pro文件下跨平台宏的使用(windows/linux 以及x86 和 arm的区分) 在pro文件中添加: #仅在linux 系统下, 硬件平台无关的内容 unix{HEADERS \SOURCES \Manager.cpp \ }#arm64 的编译宏 contains(QMAKE_HOST.arch, aarch64){…

数论(一)——素数,GCD,LCM

这是一个数论系列:) 一、素数 费马小定理 Theorem: 设 p 是一个素数,a 是一个整数且不是 p 的倍数,那么 很遗憾,费马小定理的逆定理是不成立的。对 a 2,满足的非素数 n 是存在的。 比如 n 341 11 31 对于整数 a,称满足的合数为以 a 为底的…

java自学 day1

1.数据类型 基本数据类型(存放数据本身) 分为数值型(int,double等) 字符型(char)布尔型(boolean) 引用数据类型(存放数据的地址)分为类&#xff0…

Qt下一行代码就可以使用的稳定易用的日志log类

Qt下一行代码就可以使用的稳定易用的日志类 此日志类是基于Qt 自带的 扩展的一个易用的日志类, 使用的是Qt自带的日志输出形式, 已长期运行在许多实际项目中,稳定可靠,而且跨平台, 在windows和linux 上都能稳定运行 …

apue读书笔记-第十二章

1 可重入,线程安全,异步信号安全之间的区别? 可重入:可以重复进入,不会引起问题(这个概念最宽) 线程安全:被多个线程使用时,不会出问题,也就是可以被多个进程…

取出url中的字符_如何在JavaScript中解析URL:例如主机名,路径名,查询,哈希?...

统一资源定位符(缩写URL)是对Web资源(网页,图像,文件)的引用。URL指定资源位置和检索资源的机制(http,ftp,mailto)。例如,这是此博客文章的URL&am…

SQL Server 2008中的Pivot和UnPivot

SQL Server 2008中SQL应用系列--目录索引 今天给新成员讲解PIVOT 和 UNPIVOT示例,顺便整理了一下其用法。这是自SQL Server 2005起提供的新功能。 官方示例:http://msdn.microsoft.com/zh-cn/library/ms177410%28vsql.105%29.aspx 首先看PIVOT示例&#…

leetcode python 032 识别最长合法括号

# 给定一个只包含字符(和)的字符串,# 找到最长的有效(格式良好)括号子字符串的长度。# 对于“(()”,最长的有效括号子串是“()”,其长…

Android窗口管理服务WindowManagerService计算Activity窗口大小的过程分析

在Android系统中,Activity窗口的大小是由WindowManagerService服务来计算的。WindowManagerService服务会根据屏幕及其装饰区的大小来决定Activity窗口的大小。一个Activity窗口只有知道自己的大小之后,才能对它里面的UI元素进行测量、布局以及绘制。本文…

pcl需要注意的编译问题

pcl需要注意的编译问题 不要在头文件里 using namespace pcl 这会导致编译错误,而且根本分析不到错误在哪 不要在编译选项 里加 -marchnative 这个是让编译器根据你当前的cpu类型进行特定的编译优化, 例如 set( CMAKE_CXX_FLAGS "${CMAKE_CXX_FLAGS} -stdc11 -march…

linux python版本_linux下更新Python版本并修改默认版本

linux下更新Python版本并修改默认版本,有需要的朋友可以参考下。很多情况下拿到的服务器python版本很低,需要自己动手更改默认python版本1、从官网下载python安装包(这个版本可以是任意版本3.3 2.7 2.6等等)wget http://python.org/ftp/python/2.7/Pytho…

基于HTML5的Google水下搜索

这次愚人节的时候,Google推出了水下搜索,当然,这只是一个愚人的小把戏,不过效果非常不错,进入页面后,第一眼是一个水面的效果,水下的鲨鱼在游来游去,然后Google logo和搜索框从水面上…

windows下rpc框架thrift的环境配置

windows下rpc框架thrift的环境配置 引用链接: https://www.cnblogs.com/49er/p/7193829.html 最近在弄windows下 的Facebook的rpc 框架 thrift , 网上东西看了很多, 但是大都不能一篇到位, 这里总结了一下, 也记一下自己遇到的问题和解决的方法 这里把我在实际过程中遇见的问…

CentOS 6.3 安装 samba 共享

PHP环境在linux下,但是开发的时候用的是windows,于是我用了samba将linux的一个目录共享,然后在windows上做映射,这样就可以直接在windows下编辑linux上的文件了 首先,安装samba软件,我采用的是yum安装&…

微信小程序 长按图片不出现菜单_微信更新,新功能上了热搜

微信在推出新功能方面相当克制,但每一次总能引起全网关注。昨天,微信又因为一个小功能的改进再次上了热搜,在安卓最新的 7.0.17 版本当中,微信取消了两分钟内删除功能。在新版微信中,发出的消息在两分钟内只有撤回功能…

windows下配置java环境jdk

Windows系统下搭建java的开发环境和配置环境变量 具体步骤打开链接地址:https://www.cnblogs.com/lijuntao/p/6694483.html转载于:https://www.cnblogs.com/ccw869476711/p/9401468.html

mysql 分区_搞懂MySQL分区

一.InnoDB逻辑存储结构首先要先介绍一下InnoDB逻辑存储结构和区的概念,它的所有数据都被逻辑地存放在表空间,表空间又由段,区,页组成。段段就是上图的segment区域,常见的段有数据段、索引段、回滚段等,在In…

apt Could not get lock /var/lib/dpkg/lock 解决方案

apt Could not get lock /var/lib/dpkg/lock 解决方案 删除锁定文件 sudo rm /var/lib/dpkg/lock

oracle创建DBLink连接

1.创建dblink的第一种方式,是在本地数据库tnsnames.ora文件中配置了要远程访问的数据库。tnsnames.ora文件在你安装oracle客户端安装文件里 如:(E:\oracle\product\10.2.0\db_1\NETWORK\ADMIN) 创建远程连接: INT (DESCRIPTION (ADDRES…

理解oracle中连接和会话

理解oracle中连接和会话1. 概念不同:概念不同: 连接是指物理的网络连接。 在已建立的连接上,建立客户端与oracle的会话,以后客户端与oracle的交互都在一个会话环境中进行。 2. 关系是多对多: 一个连接上可以建立0个…

ActiveMQ消息存储持久化

转https://www.cnblogs.com/xinhuaxuan/p/6128380.html https://blog.csdn.net/lr131425/article/details/68064914 为了避免意外宕机以后丢失信息,需要做到重启后可以恢复消息队列,消息系统一般都会采用持久化机制。 就是在发送者将消息发送出去后&…