WebGL Three.js 创世大爆炸景象

Birth of a Star or universe，宇宙（星球）诞生时混沌鸿蒙状态模拟着色器代码

webgl, three, cloud, shader

《three.js使用多个渐变torus模拟光环光晕》申请公开！

第三方库
作品简介 3125
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

var container = void 0;
var camera = void 0,
    scene = void 0,
    renderer = void 0;
var uniforms = void 0;

var loader = new THREE.TextureLoader();
var texture = void 0;
loader.setCrossOrigin("anonymous");
loader.load(
    '/uploads/1805/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', function(e) {
        var 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( 1000, 1000 );
    renderer.setSize(window.innerWidth, window.innerHeight);
    uniforms.u_resolution.value.x = renderer.domElement.width;
    uniforms.u_resolution.value.y = renderer.domElement.height;
}

function animate(delta) {
    requestAnimationFrame(animate);
    render(delta);
}

var capturer = new CCapture({
    verbose: true,
    framerate: 30,
    // motionBlurFrames: 4,
    quality: 90,
    format: 'webm',
    workersPath: 'js/'
});

var capturing = false;

isCapturing = function isCapturing(val) {
    if (val === false && window.capturing === true) {
        capturer.stop();
        capturer.save();
    } else if (val === true && window.capturing === false) {
        capturer.start();
    }
    capturing = val;
};
toggleCapture = function toggleCapture() {
    isCapturing(!capturing);
};

window.addEventListener('keyup', function(e) {
    console.log(e.keyCode);
    if (e.keyCode == 68) toggleCapture();
});

var then = 0;

function render(delta) {

uniforms.u_time.value = -11200 + delta * 0.0015;
    renderer.render(scene, camera);

if (capturing) {
        capturer.capture(renderer.domElement);
    }
}

编译

CSS

HTML

vec3 hash33(vec3 p){ 
    return texture2D(u_noise, p.xy * p.z * 256.).rgb;
    
  }

mat2 rot2( float a ){ vec2 v = sin(vec2(1.570796, 0) + a);	return mat2(v, -v.y, v.x); }
  
  float pn( in vec3 p ) {
    vec3 i = floor(p); p -= i; p *= p*(3. - 2.*p);
    p.xy = texture2D(u_noise, (p.xy + i.xy + vec2(37, 17)*i.z + .5)/256., -100.).yx;
    return mix(p.x, p.y, p.z);
  }

// otaviogood's noise from https://www.shadertoy.com/view/ld2SzK
const float nudge = 0.739513;	// size of perpendicular vector
float normalizer = 1.0 / sqrt(1.0 + nudge*nudge);	// pythagorean theorem on that perpendicular to maintain scale
float SpiralNoiseC(vec3 p)
{
    float n = 0.0;	// noise amount
    float iter = 1.0;
    for (int i = 0; i < 8; i++)
    {
        // add sin and cos scaled inverse with the frequency
        n += -abs(sin(p.y*iter) + cos(p.x*iter)) / iter;	// abs for a ridged look
        // rotate by adding perpendicular and scaling down
        p.xy += vec2(p.y, -p.x) * nudge;
        p.xy *= normalizer;
        // rotate on other axis
        p.xz += vec2(p.z, -p.x) * nudge;
        p.xz *= normalizer;
        // increase the frequency
        iter *= 1.733733;
    }
    return n;
}

float SpiralNoise3D(vec3 p)
{
    float n = 0.0;
    float iter = 1.0;
    for (int i = 0; i < 5; i++)
    {
        n += (sin(p.y*iter) + cos(p.x*iter)) / iter;
        p.xz += vec2(p.z, -p.x) * nudge;
        p.xz *= normalizer;
        iter *= 1.33733;
    }
    return n;
}

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 world(vec3 p, vec3 lookAt) {
    
    p = (vec4(p, 1.) * rotationMatrix(vec3(.1, 0., 0.), u_time * .1)).xyz;
    
    float l = length(p);
    vec3 spherical = vec3((l - u_time * .5) * 8., atan(p.y, p.x), acos(p.z / l) * 2.);
    spherical.yz = sin(spherical.yz);
    // spherical.x -= u_time;
    l = length(lookAt - p);
    // float l = length(p)
    
    vec3 _p = spherical * vec3(1., 8., 8.);
    float _sp = 0.;
    _sp -= SpiralNoiseC(_p.xyz);
    _sp += SpiralNoiseC(_p.zxy*0.4+100.0)*4.0;
    _sp -= SpiralNoise3D(_p);
    _sp *= .2;
    _sp -= .2;
    
//    p = mod(p, 2.) -1.;
    
    l = l * .1;
    l = clamp(l, 0., 1.);
    
    return abs(_sp) * l;
    
    
  }
  
  vec3 path(float p) {
    return vec3(3.);
    return vec3(sin(p * .3), cos(p * .3), p);
  }

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;
    // vec3 rd = normalize(vec3(gl_FragCoord.xy - u_resolution.xy*.5, u_resolution.y*.5)); 
    
    float modtime = u_time * 2.;
    float t = u_time * .2;
    vec3 movement = path(modtime);
    
      // The sin in here is to make it look like a walk.
      vec3 lookAt = vec3(0, 0., 0);  // This is the point you look towards, or at, if you prefer.
      vec3 camera_position = vec3(cos(t) * 8., 0, sin(t) * 4.); // This is the point you look from, or camera you look at the scene through. Whichever way you wish to look at it.
    
      
      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 = .8;

// ro - Ray origin.
      vec3 ro = camera_position; 
      // rd - Ray direction.
      vec3 rd = normalize(forward + FOV*uv.x*right + FOV*uv.y*up);
      // rd += hash33(rd)*.002;
      rd.xy = rot2( movement.x * .04 )*rd.xy;

// Camera
    // vec3 ro = vec3(sin(modtime)*3., 0, u_time*2.);

vec3 lp = lookAt;

float local_density = 0.;
    float density = 0.;
    float weighting = 0.;

float dist = 1.;
    float travelled = 0.;

const float distanceThreshold = .3;

// Initializing the scene color to black, and declaring the surface position vector.
    vec3 col = vec3(0);
    vec3 sp;

vec3 sn = normalize(-rd); // surface normal
    
    // vec3 lookVec = camera_position - lookAt;
    // float l = length(forward.xz)*.5;
    // l = clamp(l, 0., 1.);

// Raymarching loop.
    for (int i=0; i<64; i++) {

if((density>1.) || travelled>80.) {
        travelled = 20.;
        break;
      }
      
      float l = 1. / length(lookAt - sp);
      l = clamp(l * l * 2., 0., 1.);

sp = ro + rd*travelled; // Ray position.
      dist = world(sp, lookAt); // Closest distance to the surface... particle.
      
      if(dist < .1) dist = .15;

local_density = (distanceThreshold - dist)*step(dist, distanceThreshold);
      weighting = (1. - density)*local_density;

density += weighting*(1.-distanceThreshold)*1./dist*.1;

vec3 ld = lp-sp; // Direction vector from the surface to the light position.
      float lDist = max(length(ld), .001); // Distance from the surface to the light.
      ld/=lDist; // Normalizing the directional light vector.

// Using the light distance to perform some falloff.
      float atten = 1./(1. + lDist*.125 + lDist*lDist*.55);

col += weighting*atten*1.25 ;
      
      col = mix(
        vec3(0., 0., 0.),
        mix(
          mix(
            vec3(0., 0., 1.),
            vec3(-0.2),
            clamp(weighting, 0., 1.)
          ),
          mix(
            vec3(10., 7., -1.),
            vec3(5.),
            clamp(atten * .8, 0., 1.)
          ),
          clamp(atten * .5, 0., 1.)
        ),
        clamp(atten * 3., 0., 1.)
      );
      
      // col += vec3(mix(
      //   vec3(weighting),
      //   vec3(1., 2., 0.),
      //   l * l
      // ));

travelled += max(dist*.2, .02);
    }
    
    vec3 sunDir = normalize(lp-ro);
    float sunF = 1. - dot(rd,sunDir);

// gl_FragColor = vec4(sin(col), 1.0);
    gl_FragColor = vec4(col, 1.0);
    // gl_FragColor = vec4(density);
  }
</script>

Birth of a Star or universe，宇宙（星球）诞生时混沌鸿蒙状态模拟着色器代码

webgl, three, cloud, shader

编辑器支持Emmet

快捷键

Birth of a Star or universe，宇宙（星球）诞生时混沌鸿蒙状态模拟着色器代码

webgl, three, cloud, shader

WebGL Three.js暗夜森林景象

Three.js 基于WebGL的云海景色

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：