Вращающаяся звёздная система на Tree Canvas и HTML5 Canvas
|
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 |
<script src="/js/three.min2.js"></script> <script id="vertexShader" type="x-shader/x-vertex"> uniform float u_time; const float spawnrate = .01; const float life = 200.; const float fadetime = 20.; const int octaves = 5; const float seed = 43758.5453123; const float seed2 = 73156.8473192; float random(float val) { return fract(sin(val) * seed); } vec2 random2(vec2 st, float seed) { st = vec2(dot(st, vec2(127.1, 311.7)), dot(st, vec2(269.5, 183.3))); return -1.0 + 2.0 * fract(sin(st) * seed); } float random2d(vec2 uv) { return fract(sin(dot(uv.xy, vec2(12.9898, 78.233))) * seed); } varying float v_z; float easeLinear(float time, float begin, float change, float duration) { return change * time / duration + begin; } vec2 easeLinear(float time, vec2 begin, vec2 change, float duration) { return change * time / duration + begin; } void main() { vec4 pos = vec4(position, 1.0); float id = position.z; bool emitter = mod(id, 2.) == 0.; float rand = random(id); float rand1 = random(id + 1.); float pointsize = 100. * rand * rand1; // float spawnrate = spawnrate + (sin(u_time / 10.) + 1.) * .01; float time = mod(u_time - id * spawnrate, life); float step = time / life; bool alive = time >= 0.; vec2 polar = vec2(0., 0.); if (alive) { if (emitter) { // pos.xy = vec2(10. * rand); vec2 outerPolar = vec2(30. + sin(u_time / 50.) * 10., 200.); polar = easeLinear(time, vec2(sin(u_time / 50.), 100. + sin(u_time / 10.) * 50.), outerPolar, life); // polar.x += sin(u_time / 10. * rand) + 1.; polar.y += (sin((u_time + 100.) / 10. * rand) + 1.) * (polar.x * 2. + 10.); if (time < fadetime) { pointsize = easeLinear(time, 0., pointsize, fadetime); } else if (time > life - fadetime) { pointsize = easeLinear(time - life + fadetime, pointsize, -pointsize, fadetime); } pointsize *= (sin((u_time + 100.) / 10. * rand1) + 1.); pointsize *= cos(polar.x * 1.5 + u_time * .1) * .5 + 1.; pos.z = 100.; } else { // pos.xy = vec2(10. * rand); vec2 outerPolar = vec2(30. + sin(u_time / 50.) * 10. + 3.14, 200.); polar = easeLinear(time, vec2(sin(u_time / 50.) + 3.14, 100. + cos(u_time / 10.) * 50.), outerPolar, life); // polar.x += sin(u_time / 10. * rand) + 1.; polar.y += (sin((u_time + 100.) / 10. * rand) + 1.) * (polar.x * 2. + 10.); if (time < fadetime) { pointsize = easeLinear(time, 0., pointsize, fadetime); } else if (time > life - fadetime) { pointsize = easeLinear(time - life + fadetime, pointsize, -pointsize, fadetime); } pointsize *= 1. - (sin((u_time + 100.) / 10. * rand1) + 1.); // pointsize *= cos(polar.x * 1.5 + u_time * .1) * .5 + 1.; pos.z = 90.; } } pos.x += cos(polar.x) * polar.y; pos.y += sin(polar.x) * polar.y; v_z = pos.z / 100. + polar.x / 100.; gl_PointSize = pointsize; gl_Position = projectionMatrix * modelViewMatrix * pos; } </script> <script id="fragmentShader" type="x-shader/x-fragment"> uniform vec2 u_resolution; uniform float u_time; uniform sampler2D tSprite; varying float v_z; vec3 hsb2rgb( in vec3 c) { vec3 rgb = clamp(abs(mod(c.x * 6.0 + vec3(0.0, 4.0, 2.0), 6.0) - 3.0) - 1.0, 0.0, 1.0); rgb = rgb * rgb * (3.0 - 2.0 * rgb); return c.z * mix(vec3(1.0), rgb, c.y); } #define TAU 6.28318531 float starSDF(vec2 st, int V, float s) { // st = st*4.-2.; float a = atan(st.y, st.x) / TAU; float seg = a * float(V); a = ((floor(seg) + 0.5) / float(V) + mix(s, -s, step(.5, fract(seg)))) * TAU; return abs(dot(vec2(cos(a), sin(a)), st)); } void main() { vec2 uv = (gl_FragCoord.xy - 0.5 * u_resolution.xy) / u_resolution.y; float dist; vec2 pointUV = gl_PointCoord.xy - .5 * v_z / v_z; dist = 1. - length(pointUV) * 3.; vec2 polar = vec2(atan(uv.y, uv.x), length(uv.xy)); int points = int(dist * 5.); // gl_FragColor = vec4(hsb2rgb(vec3(polar.y / 3., 1. - v_z * sin(polar.y * u_time / 100.), polar.y * v_z / 10.)), dist); gl_FragColor = vec4(mix(vec3(5.0, 0., 0.), vec3(.8, 1.5, .5), clamp(dist * v_z, 0., 1.)) * dist, smoothstep(0.6, .61 + v_z / 1.5, dist)); // gl_FragColor *= v_z / 2.; // gl_FragColor = vec4(vec3(.8, .8, .5), smoothstep(0.8, .81, dist)); // gl_FragColor = vec4(v_z / 2.); // gl_FragColor = vec4(vec3(dist), dist); } </script> <div id="container"></div> <script src="/js/univ.js"></script> |
