HTML5 Canvas水面下太阳特效

来源：互联网 2023-03-16 19:11:01 424

HTML5 Canvas水面下太阳特效

工具/原料

adobe dreamweaver

方法/步骤

新建html文档。

HTML5 Canvas水面下太阳特效

1该信息未经授权抓取自百度经验

书写hmtl代码。

div id="container">/div>

div>HTML5 Canvas水面下太阳特效-适用于高版本浏览器/div>

HTML5 Canvas水面下太阳特效

书写css代码。

style>

body {

margin: 0;

padding: 0;

}

#container {

position: fixed;

}

/style>

HTML5 Canvas水面下太阳特效

书写并添加js代码。

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

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

}

/script>

HTML5 Canvas水面下太阳特效