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 .........完整代码请登录后点击上方下载按钮下载查看
网友评论0