WebGL

  1. Применение
Учебник Шейдеры Разбор создания шейдера Конкретный шейдер
void mainImage( out vec4 fragColor, in vec2 fragCoord ) { vec2 uv = fragCoord.xy / iResolution.x; float n = iTime * 0.15; float x = uv.x*(sin(uv.y+n*0.2)*1.); float y = uv.y*(sin(uv.x+n*0.2)*1.); float xp = uv.x-0.1+sin(x*3.+n-sin(y*1.+n)); float yp = uv.y-0.5+sin(y*3.+n+sin(x*1.-n)); float eh = ((sqrt(xp*xp+yp*yp)*1.+n)); fragColor = vec4(sin(eh*0.1+(y+n*1.1)*5.-n*5.),sin(eh*0.8+(y+n)*5.-n*5.),sin(eh*0.2+(y+n*1.2)*5.-n*5.),1.0); }
Конкретный шейдер2
void mainImage( out vec4 fragColor, in vec2 fragCoord ) { vec2 uv = fragCoord.xy / iResolution.x; float n = iTime * 0.15 + 0.5; float x = uv.x*(sin(uv.y+n*0.4)*1.); float y = uv.y*(sin(uv.x+n*0.4)*1.); float xp = uv.x-0.1+sin(x*3.+n-sin(y*1.+n)); float yp = uv.y-0.5+sin(y*3.+n+sin(x*1.-n)); float eh = ((sqrt(xp*xp+yp*yp) * 1.+n)); float p = max(1., 2. * (1. - uv.x)); float red = mix(sin(eh*1.1+(y+n*1.1)*5.-n*5.), 0., p); float green = mix(sin(eh*0.8+(y+n)*5.-n*5.), 0., p); float blue = mix(sin(eh*0.2+(y+n*1.2)*5.-n*5.), 0., p); fragColor = vec4(red, green, blue, 1.0); }

Применение

<body> <div id="container"></div> <style>body{padding:0;margin:0;}</style> <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/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 float u_time; void main() { vec2 uv = gl_FragCoord.xy / u_resolution.x; float n = u_time * 0.15 + 0.5; float x = uv.x*(sin(uv.y+n*0.4)*1.); float y = uv.y*(sin(uv.x+n*0.4)*1.); float xp = uv.x-0.1+sin(x*3.+n-sin(y*1.+n)); float yp = uv.y-0.5+sin(y*3.+n+sin(x*1.-n)); float eh = ((sqrt(xp*xp+yp*yp) * 1.+n)); float p = max(1., 2. * (1. - uv.x)); float red = mix(sin(eh*1.1+(y+n*1.1)*5.-n*5.), 0., p); float green = mix(sin(eh*0.8+(y+n)*5.-n*5.), 0., p); float blue = mix(sin(eh*0.2+(y+n*1.2)*5.-n*5.), 0., p); gl_FragColor = vec4(red, green, blue, 1.0); } </script> <script> var container; var camera, scene, renderer, clock; var uniforms; init(); animate(); function init() { container = document.getElementById( 'container' ); camera = new THREE.Camera(); camera.position.z = 1; scene = new THREE.Scene(); clock = new THREE.Clock(); var geometry = new THREE.PlaneBufferGeometry( 2, 2 ); uniforms = { u_time: { type: "f", value: 1.0 }, u_resolution: { type: "v2", value: new THREE.Vector2() }, u_mouse: { 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 ); document.onmousemove = function(e){ uniforms.u_mouse.value.x = e.pageX uniforms.u_mouse.value.y = e.pageY } } function onWindowResize( event ) { renderer.setSize( window.innerWidth, window.innerHeight ); uniforms.u_resolution.value.x = renderer.domElement.width; uniforms.u_resolution.value.y = renderer.domElement.height; } function animate() { requestAnimationFrame( animate ); render(); } function render() { uniforms.u_time.value += clock.getDelta(); renderer.render( scene, camera ); } </script> </body> Пример работы