three+webgl打造一个梦幻世界视觉效果代码
代码语言:html
所属分类:视觉差异
代码描述:three+webgl打造一个梦幻世界视觉效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<html lang="en"><head> <meta charset="UTF-8"> <style> * { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } body { height: 100vh; background-color: black; margin: 0; padding: 0; overflow: hidden; position: relative; } </style> </head> <body> <!-- Shader Session with Bruno Simon | 2021 * Bruno: * https://twitter.com/bruno_simon * https://bruno-simon.com/ * * We're curiouslyminded: * https://www.twitch.tv/curiouslyminded * https://www.youtube.com/c/curiouslyminded --> <div id="shadercollab"></div> <script id="vertex" type="x-shader/x-vertex"> void main() { gl_Position = vec4(position, 1.0); } </script> <script id="fragment" type="x-shader/x-vertex"> precision highp float; #define M_PI 3.1415926535897932384626433832795 uniform vec2 u_resolution; uniform float u_time; // Classic Perlin 2D Noise // by Stefan Gustavson // vec4 permute(vec4 x){return mod(((x*34.0)+1.0)*x, 289.0);} vec2 fade(vec2 t) {return t*t*t*(t*(t*6.0-15.0)+10.0);} float cnoise(vec2 P){ vec4 Pi = floor(P.xyxy) + vec4(0.0, 0.0, 1.0, 1.0); vec4 Pf = fract(P.xyxy) - vec4(0.0, 0.0, 1.0, 1.0); Pi = mod(Pi, 289.0); // To avoid truncation effects in permutation vec4 ix = Pi.xzxz; vec4 iy = Pi.yyww; vec4 fx = Pf.xzxz; vec4 fy = Pf.yyww; vec4 i = permute(permute(ix) + iy); vec4 gx = 2.0 * fract(i * 0.0243902439) - 1.0; // 1/41 = 0.024... vec4 gy = abs(gx) - 0.5; vec4 tx = floor(gx + 0.5); gx = gx - tx; vec2 g00 = vec2(gx.x,gy.x); vec2 g10 = vec2(gx.y,gy.y); vec2 g01 = vec2(gx.z,gy.z); vec2 g11 = vec2(gx.w,gy.w); vec4 norm = 1.79284291400159 - 0.85373472095314 * vec4(dot(g00, g00), dot(g01, g01), dot(g10, g10), dot(g11, g11)); g00 *= norm.x; g01 *= norm.y; g10 *= norm.z; g11 *= norm.w; float n00 = dot(g00, vec2(fx.x, fy.x)); float n10 = dot(g10, vec2(fx.y, fy.y)); float n01 = dot(g01, vec2(fx.z, fy.z)); float n11 = dot(g11, vec2(fx.w, fy.w)); vec2 fade_xy = fade(Pf.xy); vec2 n_x = mix(vec2(n00, n01), vec2(n10, n11), fade_xy.x); float n_xy = mix(n_x.x, n_x.y, fade_xy.y); return 2.3 * n_xy; } // Transform UV to radial UV vec2 getRadialUv(vec2 uv) { float angle = atan(uv.x, - uv.y); angle = abs(angle); vec2 radialUv = vec2(0.0); radialUv.x = angle / (M_PI * 2.0) + 0.5; radialUv.y = 1.0 - pow(1.0 - length(uv), 4.0); return radialUv; } // Get the elevation using perlin noises float getElevation(vec2 uv) { float elevation = cnoise(uv * 15.0); elevation += cnoise(uv * 80.0) * 0.2; elevation += cnoise(uv * 200.0) * 0.1; if(elevation > - 0.15) elevation += abs(cnoise(uv * 900.0) * 0.15); return elevation; } // Get terrain color vec3 getTerrainColor(float elevation) { // Set colors vec3 sandColor = vec3(0.96, 0.64, 0.38); // sandybrown vec3 forestColor = vec3(0.0, 0.4, 0.1); // green vec3 meltedSnowColor = vec3(0.7, 0.9, 1.0); // melted snow vec3 snowColor = vec3(1.0); // snow // Get sand and forest mix vec3 color = mix(sandColor, forestColor, elevation); if(elevation > 0.7) { color = mix(meltedSnowColor, snowColor, (elevation - 0.7) / 0.3); } return color; } // Get water color vec3 getWaterCo.........完整代码请登录后点击上方下载按钮下载查看
网友评论0