Анимированные солнечные блики на HTML5 Canvas
Эффект разбегающихся солнечных бликов на HTML5 Canvas
Для начала посмотрите ДЕМО
Установка:
На странице, где будет использоваться данный эффект, между тегами <body> и </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 |
<script src="/js/three.min.js"></script> <div id="container"></div> <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"> #define TWO_PI 6.2831853072 #define PI 3.14159265359 precision highp float; uniform vec2 resolution; uniform float time; float random (in float x) { return fract(sin(x)*1e4); } float random (vec2 st) { return fract(sin(dot(st.xy, vec2(12.9898,78.233)))* 43758.5453123); } varying vec2 vUv; void main(void) { vec2 uv = (gl_FragCoord.xy * 2.0 - resolution.xy) / min(resolution.x, resolution.y); vec2 fMosaicScal = vec2(4.0, 2.0); vec2 vScreenSize = vec2(256,256); uv.x = floor(uv.x * vScreenSize.x / fMosaicScal.x) / (vScreenSize.x / fMosaicScal.x); uv.y = floor(uv.y * vScreenSize.y / fMosaicScal.y) / (vScreenSize.y / fMosaicScal.y); float t = time*0.06+random(uv.x)*0.4; float lineWidth = 0.0008; vec3 color = vec3(0.0); for(int j = 0; j < 3; j++){ for(int i=0; i < 5; i++){ color[j] += lineWidth*float(i*i) / abs(fract(t - 0.01*float(j)+float(i)*0.01)*1.0 - length(uv)); } } gl_FragColor = vec4(color[2],color[1],color[0],1.0); } </script> <script id="rendered-js" > var container; var camera, scene, renderer; var uniforms; init(); animate(); function init() { container = document.getElementById('container'); camera = new THREE.Camera(); camera.position.z = 1; scene = new THREE.Scene(); var geometry = new THREE.PlaneBufferGeometry(2, 2); uniforms = { time: { type: "f", value: 1.0 }, resolution: { type: "v2", value: new THREE.Vector2() } }; var material = new THREE.ShaderMaterial({ uniforms: uniforms, vertexShader: document.getElementById('vertexShader').textContent, fragmentShader: document.getElementById('fragmentShader').textContent }); var mesh = new THREE.Mesh(geometry, material); scene.add(mesh); renderer = new THREE.WebGLRenderer(); renderer.setPixelRatio(window.devicePixelRatio); container.appendChild(renderer.domElement); onWindowResize(); window.addEventListener('resize', onWindowResize, false); } function onWindowResize(event) { renderer.setSize(window.innerWidth, window.innerHeight); uniforms.resolution.value.x = renderer.domElement.width; uniforms.resolution.value.y = renderer.domElement.height; } function animate() { requestAnimationFrame(animate); render(); } function render() { uniforms.time.value += 0.05; renderer.render(scene, camera); } </script> |
Осталось лишь залить JS файл из прикреплённого архива в папку js
