webgl实现粉色沙丘沙漠三维地貌效果代码
代码语言:html
所属分类:三维
代码描述:webgl实现粉色沙丘沙漠三维地貌效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> body { background: #333; color: #fff; font-family: sans-serif; } body, html { margin: 0; overflow: hidden; padding: 0; } canvas { width:100%; height: 100%; } </style> </head> <body translate="no"> <script type="text/fragment" id="fragShader">#version 300 es precision highp float; uniform vec2 u_resolution; uniform float u_time; uniform vec2 u_mouse; uniform sampler2D s_noise; uniform vec3 u_cp; in vec2 v_uv; out vec4 c; /* Shading constants */ /* --------------------- */ const vec3 LP = vec3(-0.6, 0.7, -0.3); // light position const vec3 LC = vec3(.85,0.80,0.70); // light colour const vec3 HC1 = vec3(.5, .4, .3); // hemisphere light colour 1 const vec3 HC2 = vec3(0.1,.1,.6)*.5; // hemisphere light colour 2 const vec3 HLD = vec3(0,1,0)*.5+.5; // hemisphere light direction const vec3 BC = vec3(0.25,0.25,0.25); // back light colour const vec3 FC = vec3(1.30,1.20,1.00); // fresnel colour const float AS = .5; // ambient light strength const float DS = 1.; // diffuse light strength const float BS = .3; // back light strength const float FS = .3; // fresnel strength /* Raymarching constants */ /* --------------------- */ const float MAX_TRACE_DISTANCE = 10.; // max trace distance const float INTERSECTION_PRECISION = 0.001; // precision of the intersection const int NUM_OF_TRACE_STEPS = 256; // max number of trace steps const float STEP_MULTIPLIER = .9; // the step mutliplier - ie, how much further to progress on each step /* Structures */ /* ---------- */ struct Camera { vec3 ro; vec3 rd; vec3 forward; vec3 right; vec3 up; float FOV; }; struct Surface { float len; vec3 position; vec3 colour; float id; float steps; float AO; }; struct Model { float dist; vec3 colour; float id; }; /* Utilities */ /* ---------- */ vec2 toScreenspace(in vec2 p) { vec2 uv = (p - 0.5 * u_resolution.xy) / min(u_resolution.y, u_resolution.x); return uv; } mat2 R(float a) { float c = cos(a); float s = sin(a); return mat2(c, -s, s, c); } Camera getCamera(in vec2 uv, in vec3 pos, in vec3 target) { vec3 f = normalize(target - pos); vec3 r = normalize(vec3(f.z, 0., -f.x)); vec3 u = normalize(cross(f, r)); float FOV = .6; return Camera( pos, normalize(f + FOV * uv.x * r + FOV * uv.y * u), f, r, u, FOV ); } // Simplex 3D Noise // by Ian McEwan, Ashima Arts // vec4 permute(vec4 x){return mod(((x*34.0)+1.0)*x, 289.0);} vec4 taylorInvSqrt(vec4 r){return 1.79284291400159 - 0.85373472095314 * r;} float snoise(vec3 v){ const vec2 C = vec2(1.0/6.0, 1.0/3.0) ; const vec4 D = vec4(0.0, 0.5, 1.0, 2.0); // First corner vec3 i = floor(v + dot(v, C.yyy) ); vec3 x0 = v - i + dot(i, C.xxx) ; // Other corners vec3 g = step(x0.yzx, x0.xyz); vec3 l = 1.0 - g; vec3 i1 = min( g.xyz, l.zxy ); vec3 i2 = max( g.xyz, l.zxy ); // x0 = x0 - 0. + 0.0 * C vec3 x1 = x0 - i1 + 1.0 * C.xxx; vec3 x2 = x0 - i2 + 2.0 * C.xxx; vec3 x3 = x0 - 1. + 3.0 * C.xxx; // Permutations i = mod(i, 289.0 ); vec4 p = permute( permute( permute( i.z + vec4(0.0, i1.z, i2.z, 1.0 )) + i.y + vec4(0.0, i1.y, i2.y, 1.0 )) + i.x + vec4(0.0, i1.x, i2.x, 1.0 )); // Gradients // ( N*N points uniformly over a square, mapped onto an octahedron.) float n_ = 1.0/7.0; // N=7 vec3 ns = n_ * D.wyz - D.xzx; vec4 j = p - 49.0 * floor(p * ns.z *ns.z); // mod(p,N*N) vec4 x_ = floor(j * ns.z); vec4 y_ = floor(j - 7.0 * x_ ); // mod(j,N) vec4 x = x_ *ns.x + ns.yyyy; vec4 y = y_ *ns.x + ns.yyyy; vec4 h = 1.0 - abs(x) - abs(y); vec4 b0 = vec4( x.xy, y.xy ); vec4 b1 = vec4( x.zw, y.zw ); vec4 s0 = floor(b0)*2.0 + 1.0; vec4 s1 = floor(b1)*2.0 + 1.0; vec4 sh = -step(h, vec4(0.0)); vec4 a0 = b0.xzyw + s0.xzyw*sh.xxyy ; vec4 a1 = b1.xzyw + s1.xzyw*sh.zzww ; vec3 p0 = vec3(a0.xy,h.x); vec3 p1 = vec3(a0.zw,h.y); vec3 p2 = vec3(a1.xy,h.z); vec3 p3 = vec3(a1.zw,h.w); //Normalise gradients vec4 norm = taylorInvSqrt(vec4(dot(p0,p0), dot(p1,p1), dot(p2, p2), dot(p3,p3))); p0 *= norm.x; p1 *= norm.y; p2 *= norm.z; p3 *= norm.w; // Mix final noise value vec4 m = max(0.6 - vec4(dot(x0,x0), dot(x1,x1), dot(x2,x2), dot(x3,x3)), 0.0); m = m * m; return 42.0 * dot( m*m, vec4( dot(p0,x0), dot(p1,x1), dot(p2,x2), dot(p3,x3) ) ); } //-------------------------------- // Modelling //-------------------------------- vec3 tn(vec3 p) { return abs(p-floor(p)-.5); } vec2 rot(vec2 p, float a) { float s = sin(a), c = cos(a); return vec2(c*p.x+s*p.y, c*p.y-s*p.x); } Model model(vec3 p) { float d = length(p)-.4; float n = pow(snoise(p*.5),2.)*3.; vec3 f = vec3(.666,.5,.025); vec3 os = tn( vec3(p.x+f.y, p.y+n, p.z+n) ); // float d = .666; // float f = // ,d=.666,f=.0125,g=.025, os.xy = rot(os.xy, 1.24); os.yzx = tn( vec3(p.x*f.z+os.x, p.y*f.z+os.y, p.z*f.z+os.z) ); float s = pow(dot(os, vec3(f.x)), 2.);.........完整代码请登录后点击上方下载按钮下载查看
网友评论0