webgl水面折射效果

用shader实现流动的水面(webgl)

这段时间一直在看如何用shader绘制一个流动的水面,直接用贴图(高度图.法向贴图)实现的方法,这里就不讨论了. 搜了一大波博客资料,感觉存在如下一些问题: 1⃣️大多数资料都是基于opengl实现(或者是unity里的shader),过多关注点在渲染上面而不是水波的mesh实现上,让人没有看下去的欲望 2⃣️有的就直接是照搬别人的博客,公式大段大段地搬,却没有自己的一丝见解,太过敷衍 3⃣️代码不加注释,对前来学习者不太友好 4⃣️针对webgl的实现,网上的资料太少(虽然已经有了opengl

[Unity]模拟雨水的折射效果

用GrabPass做的小玩具. 并不是真的计算了折射,只是简单地扰动了uv,对于雨水来说效果已经足够好了. Shader代码: Shader "Unlit/Rain" { Properties { _MainTex("Texture", 2D) = "white" {} _Opaque("Opaque",float) = 0.02 } SubShader { Tags{ "RenderType" = &qu

[ActionScript 3.0] AS3.0 水面波纹效果

import flash.geom.Point; import flash.display.BitmapData; import flash.filters.DisplacementMapFilter; import flash.display.MovieClip; import flash.events.Event; /** * 创建湖面微波效果 */ function createWater(target:MovieClip):void { var count:int = 1; var po

cesium 水面、淹没效果

水面效果参考: http://cesiumcn.org/topic/158.html http://api.rivermap.cn/cesium/rivermap/map.html https://blog.csdn.net/weixin_42496466/article/details/80747565 demo效果: 主要代码: //绘制水面波浪效果 drawWater: function(){ this.viewer.scene.globe.depthTestAgainstTerrain

8款效果惊艳的HTML5 3D动画

1.HTML5 WebGL水面水波荡漾特效之前已经向各位分享过一款很逼真的HTML5水波荡漾特效,效果还算不错.今天再向大家分享一款更加给力的HTML5水波动画,画面上是一个大水池,水池底部是一颗大石头,在水面上点击即可泛起水波,加上模拟光的照射,水波比上一款特效更加生动逼真.另外你也可以拖动石头让其在池底滚动,也可以拖动画面多视角观看该HTML5水波动画. 在线演示源码下载 2.HTML5 Canvas 3D旋转物体动画模糊发光特效 HTML5 3D动画应用非常广泛,今天要介绍的这款HT

canvas实现水波纹效果

本文将会从水波的基本原理开始,详细讲解在canvas中模拟水波扩散,分析并计算水波的能量分布,并通过振幅模拟水波对图像的折射效果,最后实现水波特效. 水波基本原理首先复习一波高中物理知识. 波是指振动的传播.波的传播方向与质点振动方向垂直的为横波,相同则为纵波,水波是横波和纵波的叠加. 对于水波这种波,我们在实现这个特效的时候,需要考虑到下面的特性: 圆形波:当你投一块石头到水池中时,你会看到一个以石头入水点为圆心所形成的一圈圈的水波反射:水波碰到墙壁后会反射衰减:因为水是有阻尼的,所以你

【Unity Shader】（八） ------ 高级纹理之立方体纹理及光线反射、折射的实现

笔者使用的是 Unity 2018.2.0f2 + VS2017,建议读者使用与 Unity 2018 相近的版本,避免一些因为版本不一致而出现的问题. [Unity Shader](三) ------ 光照模型原理及漫反射和高光反射的实现 [Unity Shader](四) ------ 纹理之法线纹理.单张纹理及遮罩纹理的实现 [Unity Shader](五) ------ 透明效果之半透明效果的实现及原理 [Unity Shader](六) ------ 复杂的光

Unity shader(CG) 写一个散色、折射、反射、菲涅尔、gamma、简单后期屏幕特效

http://www.lai18.com/content/506918.html 1.自生要求是很重要的,当然不是什么强迫工作之类的,而是自己有限的能力上不断的扩展兴趣上的内容. 2.用生活的眼光去发现shader的存在形式,许多灵感都来自于大自然,比如火苗的动态抖动像 frac/fract(time)函数,甚至小草被风吹也像frac/fract(time).http://www.glslsandbox.com/e#24095.1 3.千万不要有压力,而是动力,每次调颜色和参数都有不经意的收

canvas水波纹效果

先看效果演示效果自然界中水波纹效果十分麻烦,我这里只是根据水波纹的几个特性,在理想环境下模拟水波纹的扩散效果. 这里应用到的属性有:扩散.波动.折射. 扩散:很好理解,水波纹会从触发原点开始向周围扩散波动:水波纹就一直波,在切面上观看,就是一个正弦函数的波形图折射:光在不同介质中传播速度不同导致出现折射效果. 如果在平静条件下,在垂直方向上看水底事物,很正常. 在波动条件下,因为水的上下波动,导致垂直方向上看到的水底物体,因为波的角度不同,导致水下事物反射的光到人眼的时候,出现一些偏移.

实时折射、镜面反射shader

原文链接:http://www.ceeger.com/forum/read.php?tid=3162&fid=2 Unity没有原生的实时镜面反射Shader,分享几个自己写的,希望能抛砖引玉. 包里4个文件Mirror.cs :与shader互动的脚本,使用这组材质同时要把这个脚本拖给使用的物体才能生效Mirror-BumpSpec.shader 实时镜面反射shader 可以配合法线贴图一起用适用于平面物体Mirror-AlphaBumpSpec.shader 实时镜面发射.透明材质,可

[整理]IE11中的WebGL探秘：渲染速度超Chrome

http://www.csdn.net/article/2013-12-19/2817854-IE11-WebGL-and-more 摘要:IE11开始支持WebGL,并且效果非常好,IE11的WebGL渲染器速度是canvas2d的十几倍.在其他支持WebGL的浏览器上也发现了同样结果,这将提高许多游戏的性能. 微软最新发布的浏览器IE11打破常规,开始支持WebGL——尽管其基础是微软DirectX的宿敌OpenGL.最近,微软承诺将开放 IE标准的诸多信息,这表明他们的确在非常认真的对待此

Unity3d 镜面折射 vertex and frag Shader源代码

Unity3d 镜面折射网上能找到的基本上是固定管道或表面渲染的shader. 特此翻译为顶点.片段渲染的Shader, 本源代码仅仅涉及shader与cs部分, 请自行下载NGUI unity3d 版本号:v4.3.1 RefractionMirror.cs using UnityEngine; using System.Collections; using System; /// <summary> /// 镜面折射效果 /// </summary> [AddCompon

【Unity Shader】（九） ------ 高级纹理之渲染纹理及镜子与玻璃效果的实现

笔者使用的是 Unity 2018.2.0f2 + VS2017,建议读者使用与 Unity 2018 相近的版本,避免一些因为版本不一致而出现的问题. [Unity Shader](三) ------ 光照模型原理及漫反射和高光反射的实现 [Unity Shader](四) ------ 纹理之法线纹理.单张纹理及遮罩纹理的实现 [Unity Shader](五) ------ 透明效果之半透明效果的实现及原理 [Unity Shader](六) ------ 复杂的光照(上) [Unity

HTML5 canvas炫酷棱镜效果的幻灯片特效

这是一款效果很炫酷华丽的HTML5 canvas带棱镜效果的幻灯片特效. 这个特效在每个幻灯片的前面放置一个图形.并将图形制作为三棱镜效果.它底下的幻灯片图片会被"折射"到棱镜上面.形成一种棱镜折射效果. 全部的现代浏览器都支持这个幻灯片特效.包含IE9. 效果演示:http://www.htmleaf.com/Demo/201504011607.html 下载地址:http://www.htmleaf.com/html5/html5-canvas/201504011606.html

Unity Shader 玻璃效果

一个玻璃效果主要分为两个部分,一部分是折射效果的计算,另一部分则是反射.下面分类进行讨论: 折射: 1.利用Grass Pass对当前屏幕的渲染图像进行采样 2.得到法线贴图对折射的影响 3.对采集的屏幕图像进行关于法线方向上的扭曲和偏移,以模拟折射效果反射: 主要利用环境贴图产生反射的残影,并和主贴图采样结果混合得到反射和折射的结果后,以一个插值变量控制最终效果(类似于玻璃的透光率): 脚本如下: // Upgrade NOTE: replaced '_Object2World' with

7 个顶级的 HTML5 Canvas 动画赏析

HTML5确实是一项改革浏览器乃至整个软件行业的新技术,它可以帮助我们Web开发者很方便地在网页上实现动画特效,而无需臃肿的Flash作为支撑.本文分享7个顶级的HTML5 Canvas 动画,都有非常不错的效果. 1.3D HTML5 Logo动画 HTML5多视角3D旋转动画 HTML5 3D动画实现起来非常方便,之前介绍过基于jQuery的3D旋转插件是利用多张多视角图片播放来实现的,而今天分享的这款HTML5 3D旋转动画是利用纯HTML5技术实现的,该动画实现了HTML5 Logo旋转

8个经典HTML5 3D动画赏析

HTML5技术已经越来越被我们所接受,特别是一些3D的动画特效.本文介绍的8个HTML5 3D动画并没有特别华丽的界面,但是比较实用,涉及到3D图片.3D图表.3D按钮等方面,一起来看看. 1.HTML5 3D动画柱形图表这次我们要来分享一款效果非常酷的HTML5 3D柱形图表,这款HTML5图表和之前分享的都不一样,主要是外观上比较吸引人,首先图表是3D立体的,有一种非常棒的视觉效果:其次,当鼠标划过柱形图表时,会有很不错的HTML5动画效果. 在线演示源码下载 2.HTML

Shader Model 3.0:Using Vertex Textures SM3:使用顶点纹理 (NVIDIA spec, 6800支持使用D3DFMT_R32F and D3DFMT_A32B32G32R32F的纹理格式实现Vertex Texture。)

翻译者周波 zhoubo22@hotmail.com 版权所有 Philipp Gerasimov Randima (Randy) Fernando Simon Green NVIDIA Corporation 仅以此文赠与Rita 19周岁生日快乐 Shader Model 3.0:Using Vertex Textures SM3:使用顶点纹理随着GPU可编程特性的发展,Vertex Shader与Pixel Shader的差别越来越大.现在,Geforce6系列gpu将Vertex S