Полёт сквозь облака в закат на HTML5 + TREE Canvas
Великолепная симуляция полёта сквозь облака на фоне заката. Выглядит шикарно!
Для начала посмотрите ДЕМО
Установка:
На странице, где должны быть такие облака, сразу после открывающего тега <body> поместите:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 |
<script><script src="/js/three.min.js"></script> <script id="vertexShader" type="x-shader/x-vertex"> void main() { gl_Position = vec4( position, 1.0 ); } </script> <script id="fragmentShader" type="x-shader/x-fragment"> uniform vec2 u_resolution; uniform vec2 u_mouse; uniform float u_time; uniform sampler2D u_noise; vec3 hash33(vec3 p){ return texture2D(u_noise, p.xy * p.z * 256.).rgb; } mat2 rot2( float a ){ vec2 v = sin(vec2(1.570796, 0) + a); return mat2(v, -v.y, v.x); } float pn( in vec3 p ) { vec3 i = floor(p); p -= i; p *= p*(3. - 2.*p); p.xy = texture2D(u_noise, (p.xy + i.xy + vec2(37, 17)*i.z + .5)/256., -100.).yx; return mix(p.x, p.y, p.z); } // Thanks to Shane for this one. // Basic low quality noise consisting of three layers of rotated, mutated // trigonometric functions. Needs work, but sufficient for this example. float trigNoise3D(in vec3 p) { float res = 0., sum = 0.; float n = pn(p*8. + u_time*.1); vec3 t = sin(p*3.14159265 + cos(p*3.14159265+1.57/2.))*0.5 + 0.5; p = p*1.5 + (t - 1.5);// + -10. + u_time*0.05; res += (dot(t, vec3(0.333))); t = sin(p.yzx*3.14159265 + cos(p.zxy*3.14159265+1.57/2.))*0.5 + 0.5; res += (dot(t, vec3(0.333)))*0.7071; return ((res/1.7071))*0.85 + n*0.15; } float world(vec3 p) { // float n = trigNoise3D(p * .1) * 10. * ( 1. + abs(p.x) * -.02 ); // This adds a sort of upward curve left and right. I tlooks cool, but didn't look right for this. float n = trigNoise3D(p * .1) * 10.; p.y += n; return p.y - 3.; } vec3 path(float p) { return vec3(sin(p*.05)*10., cos(p * .3), p); } void main() { // Setting up our screen coordinates. vec2 aspect = vec2(u_resolution.x/u_resolution.y, 1.0); // vec2 uv = (2.0*gl_FragCoord.xy/u_resolution.xy - 1.0)*aspect; // vec3 rd = normalize(vec3(gl_FragCoord.xy - u_resolution.xy*.5, u_resolution.y*.5)); float modtime = u_time * 2.; vec3 movement = path(modtime); // The sin in here is to make it look like a walk. vec3 lookAt = vec3(0, -.2, 0) + path(modtime + 1.); // This is the point you look towards, or at, if you prefer. vec3 camera_position = vec3(0,0,-1) + movement; // This is the point you look from, or camera you look at the scene through. Whichever way you wish to look at it. vec3 forward = normalize(lookAt-camera_position); // Forward vector. vec3 right = normalize(vec3(forward.z, 0., -forward.x )); // Right vector... or is it left? Either way, so long as the correct-facing up-vector is produced. vec3 up = normalize(cross(forward,right)); // Cross product the two vectors above to get the up vector. // FOV - Field of view. float FOV = .8; // ro - Ray origin. vec3 ro = camera_position; // rd - Ray direction. vec3 rd = normalize(forward + FOV*uv.x*right + FOV*uv.y*up); // rd += hash33(rd)*.002; rd.xy = rot2( movement.x * .04 )*rd.xy; // Camera // vec3 ro = vec3(sin(modtime)*3., 0, u_time*2.); vec3 lp = vec3( 0, -10, 10.5); lp += ro; float local_density = 0.; float density = 0.; float weighting = 0.; float dist = 1.; float travelled = 0.; const float distanceThreshold = .3; // Initializing the scene color to black, and declaring the surface position vector. vec3 col = vec3(0); vec3 sp; vec3 sn = normalize(-rd); // surface normal // Raymarching loop. for (int i=0; i<64; i++) { if((density>1.) || travelled>80.) { travelled = 80.; break; } sp = ro + rd*travelled; // Ray position. dist = world(sp); // Closest distance to the surface... particle. if(dist < .3) dist = .25; local_density = (distanceThreshold - dist)*step(dist, distanceThreshold); weighting = (1. - density)*local_density; density += weighting*(1.-distanceThreshold)*1./dist*.1; vec3 ld = lp-sp; // Direction vector from the surface to the light position. float lDist = max(length(ld), .001); // Distance from the surface to the light. ld/=lDist; // Normalizing the directional light vector. // Using the light distance to perform some falloff. float atten = 1./(1. + lDist*.125 + lDist*lDist*.55); col += weighting*atten*1.25 travelled += max(dist*.2, .02); } vec3 sunDir = normalize(lp-ro); float sunF = 1. - dot(rd,sunDir); col = mix( mix( vec3(.5), vec3(1), col * density * 5.), vec3(0.), col); col = mix(col, vec3(4.), (5.-density)*.01*(1.+sunF*.5)); col = mix( col, mix( vec3(0.4, 0.3, .2)*3., vec3(0.2, 0.4, .7)*.9, sunF*sunF*1. ), travelled*.01); col *= col*col*col*2.; // gl_FragColor = vec4(sin(col), 1.0); gl_FragColor = vec4(col, 1.0); } </script> <div id="container" touch-action="none"></div> <script type="text/javascript" src="/js/ccapture.js"></script> <script type="text/javascript" src="/js/cloudsdawn.js"></script></script> |
Осталось лишь залить три JS файла из прикреплённого архива в папку js
Автор публикации
Я не понял вашего вопроса, но постараюсь на него ответить...
черный экран, ничего не происходит...
Можно ссылку на страницу с установленным скриптом?
и чето ни один скрипт не могу подключить с этого сайта
Если есть проблемы с установкой, делитесь ссылкой на свою страницу с установленным скриптом в комментарии к проблемному материалу