绝对吊爆了~WebGL生成的web水池互动效果（支持互动）

最新推荐文章于 2024-04-25 10:00:43 发布
最新推荐文章于 2024-04-25 10:00:43 发布
阅读量1.7k 收藏 1
点赞数
文章标签： HTML5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/tyygming/article/details/84530316
版权

如果告诉你这是使用webGL生成的水池互动效果，你敢相信自己的眼睛么？

来自Evan Wallace的一个超棒的水面互动特效。

在线演示

主要特性

  • 光线跟踪反射和折射
  • 自动分析环境光散射
  • 高质量的水体模仿
  • 软阴影
  • 焦散效果

互动效果

  • 点击或者拖拽水面生成波浪
  • 可以旋转镜头
  • 按SPACEBAR来切换暂停
  • 拖拽水中球体
  • 点击L键来设置光方向
  • 点击G键来设置重力
tyygming
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
HTML5 WebGL水面水波荡漾特效 可多视角展示 超逼真 webgl-water.rar
10-22
向大家分享一款更加给力的HTML5水波动画，画面上是一个大水池，水池底部是一颗大石头，在水面上点击即可泛起水波，加上模拟光的照射，水波比上一款特效更加生动逼真。另外你也可以拖动石头让其在池底滚动，也可以拖动画面多视角观看该HTML5水波动画。内部有 index_local.html 内嵌图片解决加载图片跨域的问题！
来一起用 WebGL 做一个炫酷的3D水波纹页面
程序员成长指北
11-12 1508
说起 WebGL，也许很多人还不知道是什么，但你在生活中一定接触过。一些很酷炫的活动宣传页，VR产品展示等等都是通过 WebGL 技术实现的。而且在大厂面试中，WebGL作为一个独立的岗位...
【threejs教程11】threejs添加水面效果
最新发布
c_wengy的博客
04-25 1619
本文将指导你如何使用Three.js添加一个逼真的水面效果到你的场景中。
WebGL js游泳池效果 很棒
lvdou2518的专栏
02-20 2581
http://madebyevan.com/
分享webgl版地图制作水面教程
地理信息技术杂谈 博客，欢迎技术交流
12-22 609
详细网址： https://chinedufn.com/3d-webgl-basic-water-tutorial/
Layabox WebGL Shader编程教程
04-07
在Html5 3D游戏开发中WebGL Shader的作用非常重要，然而学习WebGL Shader的路却不是那么容易，第一它涉及到方方面面的知识和基础， 比如：3D数学，计算机图形学甚至硬件。第二各个Html5游戏引擎关于WebGL Shader的资源都比较少,不方便初学者入门学习。与其在互联网上四处搜索零散的资料，不如从头开始，系统全面的去学习WebGL Shader的“代码的艺术”。本教程“授人以渔”,为大家带来零起点的WebGL Shader教学，从图形硬件的发展史开始，讲GPU可编程管线，讲3D模型数据结构、贴图、光照、渲染，让大家能从一个纵深的过程中宏观的了解这种技术的前因后果。教程以LayaBox引擎为环境 ，重点放在GLSL语言的学习，经典光照的计算，各种纹理贴图的原理与使用，PBR、NPR、SSS等渲染类型的实现。 手把手在Layabox环境下进行逐行代码的教学，期望帮助大家进入WebGL Shader编程的大门，最终能在实际的工程实践中有些创造和创新。1. 课程为99课时，总时长约为2000分钟到2500分钟。2. 课程 源代码 在对应课时的课件资源中，可下载。
webgl通过shader实现逼真水面
wangteng4154的博客
02-05 5799
webgl水面的实现，最简单的方法就是通过贴图置换，顶点的计算可通过简单的正弦曲线公式计算，但效果不是狠逼真，于是有了另一种的实现方法：基于opengl着色器语言，编写shader程序，使用frameBuffer离屏不停的切换多个program，最终绘制出一张纹理图，使用该纹理图进行屏幕绘制，对于光在水面的折射和反射利用texture进行map映射，r通道的值的大小用于计算法向量和波的高度，方便计...
一个基于WebGL的仿真3D水池有逼真的水波纹效果
weixin_33769125的博客
10-14 680
2019独角兽企业重金招聘Python工程师标准>>> ...
java canvas 动画效果_16个超牛逼的HTML5和JavaScript特效
weixin_42405980的博客
03-04 592
不用说，Flash的效果大家都清楚。实际上，HTML5和Java拥有很多新属性，可以用它们来替代Flash。W3Cschool精选16个超牛逼的HTML5和Java特效，看了这些特效，未来的Web发展前途无量。1.特效：FlowerPower创作者使用花朵作为画刷，以贝兹曲线方式绘图。2.特效：Breathing Galaxies动态变换直径及颜色，可通过鼠标或键盘产生新形状，这个效果不错!3.特...
webgl液体水波纹动画特效
07-24
webgl液体水波纹动画特效是一款基于webgl绘制的全屏蓝色炫彩舞台云雾状层叠波纹背景动画特效。
基于WebGL和Three.js的室内全景图互动展示全栈源码
03-25
项目概述：本全栈项目采用Python为主要开发语言，结合JavaScript、HTML和CSS，实现了基于WebGL技术的室内全景图互动展示。项目包含239个文件，其中包含154张jpg图像，33张png资源，21个JavaScript文件，12个Python...
HTML5水波浪起伏模拟动画
08-23
关于HTML5的波浪特效动画，之前我们已经分享过一些了，比如：HTML5 WebGL水面水波荡漾特效、HTML5水波荡漾动画特效等。这次我们要来分享一款基于HTML5的水波浪起伏模拟动画，我们可以设置水的粘度，点击水面即可泛起水波浪，一起来试试。
蓝色液态雾状webgl特效
04-25
蓝色液态雾状webgl特效是一款彩色烟雾背景动画特效。
MFC-OpenGl-水波纹-水面波浪-涟漪
01-15
MFC编写的水波纹模拟效果，可以设置颜色 波纹半径 扩散时间等等，利于大家交流学习。
2D WebView for WebGL Web Browser4.0
06-01
《2D WebView for WebGL Web Browser 4.0：在Web端构建沉浸式互动体验》 在当前数字化的时代，Web浏览器已经成为了人们获取信息、娱乐和交互的重要平台。随着技术的不断进步，WebGL（Web Graphics Library）作为一...
Webgl实现的天气效果（下雨和下雪）
01-31
Webgl实现的天气效果（下雨和下雪）
效果超棒的Webgl模型-人体肺
04-11
WebGL是一种基于OpenGL标准的JavaScript API，用于在任何兼容的现代网页浏览器中呈现交互式的2D和3D图形，无需插件支持。这个名为“效果超棒的Webgl模型-人体肺”的资源，显然是一个利用WebGL技术创建的、展示人体...
Webgl生成doc、pdf等文件保存
02-22
还在为Unity发布的webgl不能使用文件流而不能创建doc等文本文件而发愁吗？ 下载demo即可查看unity如何通过与html的交互实现文本文件的创建
html涟漪特效,基于WebGL的炫酷元素背景水波涟漪jQuery特效
weixin_33396759的博客
06-04 660
jquery.ripples是一款基于WebGL的效果非常炫酷的元素背景水波涟漪jQuery特效插件。该插件通过强大的WebGL，可以在指定的元素上添加一个水波层，制作出水波涟漪的炫酷效果，并且可以使用鼠标来和它进行互动。WebGL是一种3D绘图标准，这种绘图技术标准允许把JavaScript和OpenGL ES 2.0结合在一起，通过增加OpenGL ES 2.0的一个JavaScript绑定，...
unity webgl 生成pdf
06-26
Unity WebGL不能直接生成PDF文件，但它可以与其他库集成，使其生成PDF文件。 其中一个库是jsPDF，可以将其用作Unity WebGL项目的依赖项。jsPDF是一个JavaScript库，用于生成PDF文件，它支持许多功能，包括添加文本...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值