8个WebGL/JS惊人效果演示

最新推荐文章于 2024-08-16 22:07:37 发布
最新推荐文章于 2024-08-16 22:07:37 发布
阅读量2.8k 收藏 1
点赞数
分类专栏： HTML5&CSS WebGL Javascript Web游戏
Javascript 同时被 3 个专栏收录
28 篇文章 0 订阅
订阅专栏
HTML5&CSS
3 篇文章 0 订阅
订阅专栏
WebGL
2 篇文章 0 订阅
订阅专栏

8个效果惊人的WebGL/JS演示

WebGL技术标准免去了开发网页专用渲染插件的麻烦，可被用于创建具有复杂3D结构的网站页面，甚至可以用来设计3D网页游戏等。[ 了解详细]

WebGL难以置信的神奇效果

放松一下眼睛，WebGL带你看惟妙惟肖的大海
照明是一个反射照明的叠加，这取决于表面法线向量与噪音产生照明。机芯表面是10正弦波的叠加。波的振幅和速度是有界的经验规律wavelenghts。
再看WebGL实现让你不敢置信的水塘
一个水池呈现反射，折射，焦散，环境闭塞，包含一个领域可以与水面。此效果只有支持WebGL与显卡支持浮点纹理，屏幕空间的偏导数，顶点纹理获取。
再看WebGL神作，恐怖黑夜别回头
这是一个在雷雨交加伸手不见五指的夜晚，穿梭在墓地的人，音效和环境表现的淋漓尽致，充满了恐怖气氛！如果能够带上耳机在半夜来玩儿这个应用，想必，一定是很爽。
WebGL再带来精彩乒乓球赛
在2012伦敦奥运会期间，想不想打打乒乓球试试呢？打球的声音你能够听到由远到近，由近到远的距离感。非常帅！操作方法：鼠标控制方向！
WebGL实现的3D地形
简介：Loading的时候一般音乐首先加载出来，可能有点慢，大家稍等一会儿。你可以用鼠标拖拽来转换视角，会有不一样的感觉。
来源： http://developer.51cto.com/art/201206/342479.htm
alaclp
关注
专栏目录
《JavaScript忍者秘籍》（第二版）- 第5章 -精通函数：闭包和作用域
lvhanghmm的博客
07-16 831
目录第5章 精通函数：闭包和作用域5.1 理解闭包5.2 使用闭包5.2.1 封装私有变量5.2.2 回调函数5.3 通过执行上下文来跟踪代码5.4 使用词法环境跟踪变量的作用域5.4.1 代码嵌套5.4.2 代码嵌套与词法环境5.5 理解 JavaScript 的变量类型5.5.1 变量的可变性const变量5.5.2 定义变量的关键字与词法环境使用关键字var使用let与const定义具有块...
webgl.js:WebGL 框架
07-07
webgl.js WebGL 框架。
js使用webgl
daoer_sofu的专栏
10-10 1375
初始化 painter.prototype.initWebGL = function() { // attempt to get a webgl context try { var gl = this.gl = this.canvas.getContext('webgl') || this.canvas.getContext('experimental-webgl'); } catch (e) { return false; } if (!gl) { return false;
作为web3D的核心，webGL会被webGPU取代吗？
最新发布
贝格前端工场的博客
08-16 992
WebGPU技术是WebGL的进一步发展，它是一种新的Web图形API标准，旨在为Web开发者提供更高级别的图形编程接口，以获得更好的性能和更多的图形功能。WebGPU的设计目标是提供一种低级别的、跨平台的图形和计算API，以便开发者可以更好地利用现代GPU硬件的能力。更高级别的抽象：相比WebGL，WebGPU提供了更高级别的图形编程接口，简化了开发者的工作。更好的性能：WebGPU旨在提供更好的性能和更低的延迟，以满足对图形和计算性能要求更高的应用场景。
webgl.js:JavaScript WebGL库
05-13
webgl.js 以与DOM相同的方式处理WebGL。 用法 <!doctype html > < html > < head > ... </ head > < body > < canvas> </ canvas> < script src =" webgl.js " > </ script > < script > var element = WEBGL . createElement ( 'plane' ) ; element . style . width = 100 ; element . style . height = 100 ; element . style . backgroundColor = 0xFFFFFF ; </ sc
webgl-debug.js
04-04
webGL programming guide书里面的第二个库，可供webGL的构建
如何在WebGL中实现短视频卡点动效？
QcloudCommunity的博客
01-27 491
导语 | “腾讯微剪”是一个小程序端的实时预览短视频编辑插件，支持丰富的视频效果，近期上架了视频模板的功能，本文将针对其中的卡点模板切入动效，还原技术实现的思路，希望与大家一同交流。文章...
scotlandjs-2015:ScotlandJS 2015 - 幻灯片和演示
06-07
#3.js 和 WebGL 入门#ScotlandJS 2015 的 WebGL 着色器和 GPU 计算演示 | 关于 着色器！ 惊人的小东西：几行类似 C 的语言，我们就可以在屏幕或第一人称射击游戏上获得流畅的色彩。 在我们在浏览器上运行的 WebGL ...
geometry-processing-js:快速，通用的Web几何处理框架
05-11
因此，打开一个演示并开始编辑！ geometry-processing-js由的开发和维护。 在较高的层次上，该框架分为三个部分-灵活的半边网格数据结构，优化的线性代数程序包（基于 ）以及用于各种几何处理算法的代码。 每种...
Three.js中的碰撞检测与物理效果
而Three.js作为一款基于WebGL的开源JavaScript库，为我们在Web中创建复杂的三维场景提供了便利。 ## 1.2 碰撞检测和物理效果在Three.js中的重要性 在游戏开发和3D交互应用中，碰撞检测和物理效果是至关重要的。...
支持javascript的ppt软件_javascript制作幻灯片
weixin_39966225的博客
12-30 517
分享10篇优秀的 jQuery 幻灯片制作教程及应用案例jQuery 是一个非常优秀的 JavaScript 框架，使用简单灵活，同时还有许多成熟的插件可供选择，它可以帮助你在项目中加入一些非常好的效果。幻灯片效果是常用的内容展示方式之一，这是一种在有限的网页空间内展示系列项目时非常好的方法。今天要给大家分享的是10篇非常棒的 jQuery 幻灯片...文章秋天风景2011-04-15706浏览量...
webgl实现物体描边效果的方法介绍
10-15
主要给大家介绍了关于webgl实现物体描边效果的相关资料，文中通过示例代码介绍的非常详细，对大家学习或者使用webgl具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧
HTML5+WebGL实现可拖拽的3D透明杯子效果源码.zip
11-03
HTML5+WebGL实现可拖拽的3D透明杯子效果源码.zip
webglstudio.js：浏览器中的完整开源3D图形编辑器，包括场景编辑器，编码板，图形编辑器，虚拟文件​​系统以及许多其他功能
01-28
WEBGLSTUDIO正在迁移到新的REPO。 保持沉默 WebGLStudio.js WebGLStudio.js是一个基于浏览器的开源3D图形套件。 您可以使用标准Web技术在浏览器中编辑场景和材质，设计效果和着色器，代码行为并共享您的工作。 WebGLStudio.js的一些重要功能： 完整的3D图形引擎（ ），支持多种光照，，实时反射，自定义材质，postFX，蒙皮，动画等。 一个易于扩展的基于组件的系统，用于控制渲染管道和交互事件挂钩 简单易用，所见即所得（WYSIWYG）编辑器为所有编码，图形合成和时间轴功能提供了一个界面。 使用来控制行为，着色器和后处理效果的图形编辑器。 支持 ，这是一个虚拟文件系统，允许在Web上拖放资源以及可配置的配额，用户和共享文件夹。 通过发送单个链接导出并共享您的工作。 有关更多信息，请访问 功能缺失： 网格编辑，您不能选择面并移动它们 对FBX的支持，它具有某种支持，但功能不完全 物理 正在安装 要安装WebGLStudio.js，请将编辑器文件复制到服务器，然后将安装到editor/目录中的fileserver/文件夹
3D-webglstudio.js.zip
09-16
3D-webglstudio.js.zip,一个完全开放源码的三维图形编辑器在浏览器中，与场景编辑器，编码板，曲线图编辑器，虚拟文件系统，和许多功能更多。,3D建模使用专门的软件来创建物理对象的数字模型。它是3D计算机图形的一个方面，用于视频游戏，3D打印和VR，以及其他应用程序。
WebGLStudiojs浏览器里的3D开发环境
08-10
A full open source 3D graphics editor in the browser, with scene editor, coding pad, graph editor, virtual file system, and many features more.
WebGL自学教程——WebGL示例：gl-0.1.js
tiewen的专栏
10-30 3258
function ShaderSourceFromScript(scriptID) {     var shaderScript = document.getElementById(scriptID);     if (shaderScript == null) return "";     var sourceCode = "";     var child = shaderScr
WebGL+JS流程
me_badman的博客
02-21 2344
1.body中定义canvas元素 onload（）function<body onload="webGLStart()"> <canvas id="tooth-canvas" style="border: none" width="500" height="500"></canvas> </body>2.预加载函数 function webGLStart() { var canva
WebGL实例讲解及基础教程，应用Three.js框架，CSS动画实例，JS动画实例。
wandertp的博客
06-02 1080
本文讲解WebGL与Three.js框架的区别，通过具体实例展现Three.js框架的魅力。通过CSS代码实现动画效果，展现动态网页实例。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值