shdertoy上的动态黄昏图

看效果

外加两张shader里用到的图片

下面是shader代码，在webgl可以运行，在three也可以

<script id="vertexshader" type="x-shader/x-vertex">attribute vec3 A_position3;attribute vec2 A_uv;uniform mat4 mvp;varying vec2 out_uv;void main(void){gl_Position = mvp * vec4(A_position3,1.0);out_uv = A_uv;}</script><script id="fragmentshader" type="x-shader/x-vertex">precision highp float;precision highp int;varying vec2 out_uv;uniform vec2 iResolution;uniform float iTime;uniform sampler2D iChannel0;uniform sampler2D iChannel1;const vec3 sunColor = vec3(1.5,.9,.7);const vec3 lightColor = vec3(1.,.8,.7);const vec3 darkColor = vec3(.2,.2,.3);const vec3 baseSkyColor = vec3(.6,.7,.8);const vec3 seaColor = vec3(.1,.3,.5);const vec3 seaLight = vec3(.1,.45,.55);const vec2 iMouse = vec2(60.0);//---------------------------------------vec3 gamma( vec3 col, float g){return pow(col,vec3(g));}// clouds layered noisefloat noiseLayer(vec2 uv){    float t = (iTime+iMouse.x)/5.;uv.y -= t/60.; // clouds pass byfloat e = 0.;for(float j=1.; j<9.; j++){// shift each layer in different directionsfloat timeOffset = t*mod(j,2.989)*.02 - t*.015;e += 1.-texture2D(iChannel0, uv * (j*1.789) + j*159.45 + timeOffset).r / j ;}e /= 3.5;return e;}// waves layered noisefloat waterHeight(vec2 uv){float t = (iTime+iMouse.x);float e = 0.;for(float j=1.; j<6.; j++){// shift each layer in different directionsfloat timeOffset = t*mod(j,.789)*.1 - t*.05;e += texture2D(iChannel1, uv * (j*1.789) + j*159.45 + timeOffset).r / j ;}e /= 6.;return e;}vec3 waterNormals(vec2 uv){uv.x *= .25;float eps = 0.008;    vec3 n=vec3( waterHeight(uv) - waterHeight(uv+vec2(eps,0.)),1.,waterHeight(uv) - waterHeight(uv+vec2(0.,eps)));return normalize(n);}    vec3 drawSky( vec2 uv, vec2 uvInit){ float clouds = noiseLayer(uv);// clouds normalsfloat eps = 0.1;vec3 n = vec3(   clouds - noiseLayer(uv+vec2(eps,0.)),-.3,clouds - noiseLayer(uv+vec2(0.,eps)));n = normalize(n);// fake lightingfloat l = dot(n, normalize(vec3(uv.x,-.2,uv.y+.5)));l = clamp(l,0.,1.);// clouds color    (color gradient from light)vec3 cloudColor = mix(baseSkyColor, darkColor, length(uvInit)*1.7);cloudColor = mix( cloudColor,sunColor, l );// sky color (color gradient on Y)vec3 skyColor = mix(lightColor , baseSkyColor, clamp(uvInit.y*2.,0.,1.) );skyColor = mix ( skyColor, darkColor, clamp(uvInit.y*3.-.8,0.,1.) );skyColor = mix ( skyColor, sunColor, clamp(-uvInit.y*10.+1.1,0.,1.) );// draw sunif(length(uvInit-vec2(0.,.04) )<.03){skyColor += vec3(2.,1.,.8);}// mix clouds and skyfloat cloudMix = clamp(0.,1.,clouds*4.-8.);vec3 color = mix( cloudColor, skyColor, clamp(cloudMix,0.,1.) );// draw islands on horizonuvInit.y = abs(uvInit.y);float islandHeight = texture2D(iChannel1, uvInit.xx/2.+.67).r/15. - uvInit.y + .978;islandHeight += texture2D(iChannel1, uvInit.xx*2.).r/60.;islandHeight = clamp(floor(islandHeight),0.,1.);    vec3 landColor = mix(baseSkyColor, darkColor, length(uvInit)*1.5);color = mix(color, landColor, islandHeight);return color;}void main(void){// center uv around horizon and manage ratiovec2 uvInit = out_uv;uvInit.x -= .5;uvInit.x *= iResolution.x/iResolution.y;    uvInit.y -= 0.35;// perspective deform vec2 uv = uvInit;uv.y -=.01;uv.y = abs(uv.y);uv.y = log(uv.y)/2.;uv.x *= 1.-uv.y;uv *= .2;vec3 col = vec3(1.,1.,1.);// draw waterif(uvInit.y < 0.){       vec3 n = waterNormals(uv);// draw reflection of sky into watervec3 waterReflections = drawSky(uv+n.xz, uvInit+n.xz);// mask for fore-ground green light effect in waterfloat transparency = dot(n, vec3(0.,.2,1.5));        transparency -= length ( (uvInit - vec2(0.,-.35)) * vec2(.2,1.) );transparency = (transparency*12.+1.5);// add foreground water effectwaterReflections = mix( waterReflections, seaColor, clamp(transparency,0.,1.) );waterReflections = mix( waterReflections, seaLight, max(0.,transparency-1.5) );col = waterReflections;// darken sea near horizoncol = mix(col, col*vec3(.6,.8,1.), -uv.y);//sun specularcol += max(0.,.02-abs(uv.x+n.x))* 8000. * vec3(1.,.7,.3) * -uv.y * max(0.,-n.z);}else{      // skycol = drawSky(uv, uvInit);}// sun flare & vignettecol += vec3(1.,.8,.6) * (0.55-length(uvInit)) ;// "exposure" adjustcol *= .75;col = gamma(col,1.3);gl_FragColor = vec4(col,1.0);}</script>

WebGL Shader相关推荐

WebGL Shader 环境搭建
正如<WebGL 编程指南>中所说的: 传统的三维图形程序通常使用 C 或 C++ 等语言开发,并为特定的平台被编译成二进制的可执行文件.这意味着程序不能跨平台运行.相比之下,WebGL ...
threejs(webgl)-shader入门教程(1)
1.shader基本使用 2.shader粒子 shader是什么? shader是一个用GLSL编写的小程序,也就是着色器语言,我们可以通过shader来编写顶点着色器和片元着色器,在WEBGL编程 ...
WebGL+shader实现素描效果渲染
转自:点击打开链接实现一个这样的渲染效果,主要的步骤包括: 准备模型和场景通过 WebGL (Three.js) 导入场景实现 Shader 以表现接近素描的效果在最重要的第 3 步中,我们要 ...
关于 Unity WebGL 的探索
转自:https://www.cnblogs.com/yaukey/p/unity_webgl_explore_1.html 查找了 Unity 的官方资料,我们如果需要使用 WebGL 需要面对以下 ...
学废了系列 - WebGIS vs WebGL图形编程
前工作中有不少涉及到地图的项目,我参加了几次技术评审,前端伙伴们在 WebGIS 方面的知识储备稍有不足,这次分享的主要目的是科普一些在前端领域比较常用的 WebGIS 知识.另外,我之前的工作中积攒 ...
webGL编程指南实战教程
学习路线: 如果你是在校大学生,有足够的时间去学习:前端>数学(几何+线性代数)>图形学>webgl>shader >threejs>three.js源码如果你是 ...
【 Threejs 】- Shader 着色器实例渲染教程
着色器在threejs中是一个难点,话不多说,先来看看着色器是什么? 如果您已经有使用计算机绘图的经验,您就会知道在这个过程中您先画一个圆,然后画一个矩形.一条线.一些三角形,直到您组成您想要的图像. ...
H5js的一些好玩的东西
1.小h5 demo网站,包括webgl shader https://codepen.io/pens/3/ 2.关于glsl中的一点算法,例如获得随机数 https://thebookofshade ...
像素游戏的动态光影效果
动态光影 Dynamic lighting and shadows,动态光影 - 这在 3D 游戏中根本不算个事儿.可是,当想要在像素游戏中实现的时候,就没那么简单了,我们之前报道过 Sprite L ...

WebGL Shader

shdertoy上的动态黄昏图

下面是shader代码，在webgl可以运行，在three也可以

WebGL Shader相关推荐

最新文章

热门文章