HTML画布太阳代码,利用HTML5实现Canvas水面下太阳特效

特效描述：利用HTML5实现 Canvas 水面下 太阳特效。利用HTML5实现Canvas水面下太阳特效

代码结构

1. 引入JS

2. HTML代码

void main() {

gl_Position = vec4( position, 1.0 );

}

uniform vec2 u_resolution;

uniform float u_time;

const float NOISE_SIZE = 3.; // The size of the noise. Essentially the multiplier for the noise UV. Smaller = bigger

const float INTENSITY = 20.; // The intensity of the displacement

const float REFLECTION_INTENSITY = 4.; // The intensity of the rellowish reflections.

const int octaves = 2; // the number of octaves to generate in the FBM noise

const float seed = 43758.5453123; // A random seed :)

/*

Underwater Sun

Liam Egan - 2018

----------------------

A basic rippling pattern distorted by a very light amount of FBM noise.

Many many thanks to Inigo Quilez, Patricio Gonzalez Vivo,

Gary Warne, and many many others.

"Nanos gigantum humeris insidentes"

*/

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);

}

// Value Noise by Inigo Quilez - iq/2013

// https://www.shadertoy.com/view/lsf3WH

float noise(vec2 st, float seed) {

vec2 i = floor(st);

vec2 f = fract(st);

vec2 u = f*f*(3.0-2.0*f);

return mix( mix( dot( random2(i + vec2(0.0,0.0), seed ), f - vec2(0.0,0.0) ),

dot( random2(i + vec2(1.0,0.0), seed ), f - vec2(1.0,0.0) ), u.x),

mix( dot( random2(i + vec2(0.0,1.0), seed ), f - vec2(0.0,1.0) ),

dot( random2(i + vec2(1.0,1.0), seed ), f - vec2(1.0,1.0) ), u.x), u.y);

}

float fbm1(in vec2 _st, float seed) {

float v = 0.0;

float a = 0.5;

vec2 shift = vec2(100.0);

// Rotate to reduce axial bias

mat2 rot = mat2(cos(0.5), sin(0.5),

-sin(0.5), cos(0.50));

for (int i = 0; i < octaves; ++i) {

v += a * noise(_st, seed);

_st = rot * _st * 2.0 + shift;

a *= 0.4;

}

return v + .4;

}

float pattern(vec2 uv, float seed, float time, inout vec2 q, inout vec2 r) {

q = vec2( fbm1( uv + vec2(0.0,0.0), seed ),

fbm1( uv + vec2(5.2,1.3), seed ) );

r = vec2( fbm1( uv + 4.0*q + vec2(1.7 - time / 2.,9.2), seed ),

fbm1( uv + 4.0*q + vec2(8.3 - time / 2.,2.8), seed ) );

float rtn = fbm1( uv + 4.0*r, seed );

return rtn;

}

mat2 rotate(float angle) {

return mat2(cos(angle), -sin(angle), sin(angle), cos(angle));

}

void main() {

vec2 uv = (gl_FragCoord.xy - 0.5 * u_resolution.xy) / u_resolution.y;

// Generate our displacement map

vec2 _uv = uv * NOISE_SIZE;

vec2 q = vec2(0.);

vec2 r = vec2(0.);

float pattern = pattern(_uv, seed, u_time/2., q, r);

uv += (.5 - pattern) / INTENSITY; // modulate the main UV coordinates by the pattern

// uv -= .5 / INTENSITY; // This just recenters the UV coords after the distortion

float len = length(uv) + .01;

float field = len+0.05*(-1.0*u_time / 5.); // The distance field from the middle to the edge

float ripple;

ripple = sin(field*80.0) * .5 * r.x * pattern + 1.; // The ripple pattern

ripple += smoothstep(0.2,.0,len); // Adding a core gradient to the sun. Essentially this is just a smoothed version of the distance field

ripple *= smoothstep(0.3,.9,clamp(1. - len * 1.5,0.0,1.0)); // Vignette the sun, making it smaller than infinity

ripple -= fract(ripple * 8.) / 100.; // Adds a nice sort of reflective element

vec3 colour = vec3(.2, .3, .4); // the basic colour

colour += ripple * length(r) * vec3(1., 1., .8); // ripple times sun colour

colour += (1. - pattern * REFLECTION_INTENSITY * .5) * smoothstep(0.0,.7,clamp(1. - len * 1.5,0.0,1.0)) * vec3(-.2, -.1, 0.); // vignette and reflection

colour += (1. - pattern * REFLECTION_INTENSITY * 2.) * smoothstep(0.5,.9,clamp(1. - len * 1.5,0.0,1.0)) * vec3(-.2, -.1, 0.); // vignette and reflection 2 - this is essentially a more intense, but reduced radius version of the previous one.

gl_FragColor = vec4(colour, 1.);

}

/*

Most of the stuff in here is just bootstrapping. Essentially it's just

setting ThreeJS up so that it renders a flat surface upon which to draw

the shader. The only thing to see here really is the uniforms sent to

the shader. Apart from that all of the magic happens in the HTML view

under the fragment shader.

*/

var container = void 0;

var camera = void 0,

scene = void 0,

renderer = void 0;

var uniforms = void 0;

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 = {

u_time: { type: "f", value: Math.random() * 1000.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 += 0.05;

renderer.render(scene, camera);

}

init();

animate();