七彩背景（Background）
七彩背景（Background）
- 示例
- HTML
- CSS
- JS
更多有趣示例 尽在 小红砖社区
示例
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/88/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;
uniform vec2 u_mouse;
const int octaves = 2;
const float seed = 43758.5453123;
const float seed2 = 73156.8473192;
// Epsilon value
const float eps = 0.005;
const vec3 ambientLight = 0.99 * vec3(1.0, 1.0, 1.0);
const vec3 light1Pos = vec3(10., 5.0, -25.0);
const vec3 light1Intensity = vec3(0.35);
const vec3 light2Pos = vec3(-20., -25.0, 85.0);
const vec3 light2Intensity = vec3(0.2);
// movement variables
vec3 movement = vec3(.0);
// Gloable variables for the raymarching algorithm.
const int maxIterations = 256;
const int maxIterationsShad = 16;
const float stepScale = .7;
const float stopThreshold = 0.001;
mat4 rotationMatrix(vec3 axis, float angle)
{
axis = normalize(axis);
float s = sin(angle);
float c = cos(angle);
float oc = 1.0 - c;
return mat4(oc * axis.x * axis.x + c, oc * axis.x * axis.y - axis.z * s, oc * axis.z * axis.x + axis.y * s, 0.0,
oc * axis.x * axis.y + axis.z * s, oc * axis.y * axis.y + c, oc * axis.y * axis.z - axis.x * s, 0.0,
oc * axis.z * axis.x - axis.y * s, oc * axis.y * axis.z + axis.x * s, oc * axis.z * axis.z + c, 0.0,
0.0, 0.0, 0.0, 1.0);
}
float length2( vec2 p )
{
return sqrt( p.x*p.x + p.y*p.y );
}
float length6( vec2 p )
{
p = p*p*p; p = p*p;
return pow( p.x + p.y, 1.0/6.0 );
}
float length8( vec2 p )
{
p = p*p; p = p*p; p = p*p;
return pow( p.x + p.y, 1.0/8.0 );
}
// Distance function primitives
// Reference: http://iquilezles.org/www/articles/distfunctions/distfunctions.htm
float sdBox( vec3 p, vec3 b )
{
vec3 d = abs(p) - b;
return min(max(d.x,max(d.y,d.z)),0.0) + length(max(d,0.0));
}
float udBox( vec3 p, vec3 b )
{
return length(max(abs(p)-b,0.0));
}
float udRoundBox( vec3 p, vec3 b, float r )
{
return length(max(abs(p)-b,0.0))-r;
}
float sdSphere( vec3 p, float s )
{
return length(p)-s;
}
float sdCylinder( vec3 p, vec3 c )
{
return length(p.xz-c.xy)-c.z;
}
float sdCappedCylinder( vec3 p, vec2 h )
{
vec2 d = abs(vec2(length(p.xz),p.y)) - h;
return min(max(d.x,d.y),0.0) + length(max(d,0.0));
}
float sdTorus82( vec3 p, vec2 t )
{
vec2 q = vec2(length2(p.xz)-t.x,p.y);
return length8(q)-t.y;
}
float sdPlane( vec3 p)
{
return p.y;
}
// smooth min
// reference: http://iquilezles.org/www/articles/smin/smin.htm
float smin(float a, float b, float k) {
float res = exp(-k*a) + exp(-k*b);
return -log(res)/k;
}
vec3 random3( vec3 p ) {
return fract(sin(vec3(dot(p,vec3(127.1,311.7,319.8)),dot(p,vec3(269.5,183.3, 415.2)),dot(p,vec3(362.9,201.5,134.7))))*43758.5453);
}
vec2 random2( vec2 p ) {
return fract(sin(vec2(dot(p,vec2(127.1,311.7)),dot(p,vec2(269.5,183.3))))*43758.5453);
}
vec3 path(float delta) {
return vec3(sin(delta * .2) * 2., cos(delta * .1) * 2., delta * 5.);
}
// The world!
float world_sdf(in vec3 p, inout vec3 rand) {
float world = 10.;
vec2 m = path(p.z).xy;
float c = cos(p.z*.2);
float s = sin(p.z*.2);
p.xy *= mat2(c, -s, s, c);
p.xy += m;
vec3 grid = floor(p * .5);
rand = random3(grid);
p = mod(p, 2.0) - 1.;
world = sdSphere(p, .55);
return world;
}
void main() {
// Setting up our screen coordinates.
vec2 aspect = vec2(u_resolution.x/u_resolution.y, 1.0); //
vec2 uv = (2.0*gl_FragCoord.xy/u_resolution.xy - 1.0)*aspect;
// This just gives us a touch of fisheye
// uv *= 1. + dot(uv, uv) * 0.4;
// movement
movement = path(u_time);
// The sin in here is to make it look like a walk.
vec3 lookAt = vec3(-0., 0.2, -1.); // This is the point you look towards, or at, if you prefer.
vec3 camera_position = vec3(0,0, -1.0); // This is the point you look from, or camera you look at the scene through. Whichever way you wish to look at it.
lookAt += path(u_time + 2.);
// lookAt.z += sin(u_time / 10.) * .5;
// lookAt.x += cos(u_time / 10.) * .5;
camera_position += vec3(0,0,movement.z);
vec3 forward = normalize(lookAt-camera_position); // Forward vector.
vec3 right = normalize(vec3(forward.z, 0., -forward.x )); // Right vector... or is it left? Either way, so long as the correct-facing up-vector is produced.
vec3 up = normalize(cross(forward,right)); // Cross product the two vectors above to get the up vector.
// FOV - Field of view.
float FOV = 0.4;
// ro - Ray origin.
vec3 ro = camera_position;
// rd - Ray direction.
vec3 rd = normalize(forward + FOV*uv.x*right + FOV*uv.y*up);
// Ray marching
const float clipNear = 0.0;
const float clipFar = 16.0;
const float minDist = .3;
vec3 colour = vec3(0.);
float density = 0.;
float sceneDist = 1e4;
float rayDepth = clipNear;
float weighting = 0.;
float local_density = 0.;
for ( int i = 0; i < maxIterations; i++ ) {
vec3 rand;
sceneDist = world_sdf( ro + rd * rayDepth, rand ); // Distance from the point along the ray to the nearest surface point in the scene.
// if(sceneDist < .1) sceneDist = .1;
local_density = abs(minDist - sceneDist) * step(sceneDist, minDist);
weighting = (1. - density) * local_density;
rand *= .5;
rand += .2;
local_density = weighting*(1.-minDist);
density += local_density * .1;
colour.r += local_density * .2 * rand.x;
colour.g += local_density * .2 * rand.y;
colour.b += local_density * .2 * rand.z;
local_density *= local_density;
local_density *= .15;
colour += local_density;
if(density > 1. || sceneDist>80.) {
sceneDist = 20.;
break;
}
rayDepth += max(sceneDist*.2, .02);
}
gl_FragColor = vec4(colour, 1);
}
script>
<div id="container" touch-action="none">div>
CSS
body {
margin: 0;
padding: 0;
}
#container {
position: fixed;
touch-action: none;
}
JS
/*
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.
*/
let container;
let camera, scene, renderer;
let uniforms;
let loader=new THREE.TextureLoader();
let texture;
loader.setCrossOrigin("anonymous");
loader.load(
'https://s3-us-west-2.amazonaws.com/s.cdpn.io/982762/noise.png',
function do_something_with_texture(tex) {
texture = tex;
texture.wrapS = THREE.RepeatWrapping;
texture.wrapT = THREE.RepeatWrapping;
texture.minFilter = THREE.LinearFilter;
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 = {
u_time: {
type: "f", value: 1.0 },
u_resolution: {
type: "v2", value: new THREE.Vector2() },
u_noise: {
type: "t", value: texture },
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
} );
material.extensions.derivatives = true;
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.addEventListener('pointermove', (e)=> {
let ratio = window.innerHeight / window.innerWidth;
uniforms.u_mouse.value.x = (e.pageX - window.innerWidth / 2) / window.innerWidth / ratio;
uniforms.u_mouse.value.y = (e.pageY - window.innerHeight / 2) / window.innerHeight * -1;
e.preventDefault();
});
}
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.01;
renderer.render( scene, camera );
}