8. Alive, point experiment

HTML

              
                
<script id="butterfly-vertex" type="x-shader/x-fragment">
      #define PI 3.14159265358979323846
  
  precision highp float;
  attribute float count;
  uniform float u_total;
  uniform float u_time;
  uniform float u_pointSize;
  uniform float u_noiseDiff;
  uniform float u_radius;
  void main(){
    vec3 pos = position;
    pos.x = snoise(vec3(sin(count/u_total * u_noiseDiff * 200.   * PI + u_time ))) ;
    pos.y = snoise(vec3(sin(count/u_total * u_noiseDiff * 200. * PI + PI / 3. * 2. + u_time) ) );
    pos.z = snoise(vec3(sin(count/u_total * u_noiseDiff * 200.   * PI + PI / 3. + u_time )  ) );
    float distance = snoise(vec3(length(pos)));
    vec3 r = curlNoise(vec3((distance ) * smoothstep(-0.9,0.9,sin(u_time *10.)) *2. -1. )) ;
    pos *= r *u_radius + 5.;
    gl_PointSize = u_pointSize;
    gl_Position = projectionMatrix * modelViewMatrix * vec4(pos,1.);
  }
</script>
<script id="deer-vertex" type="x-shader/x-fragment">
      #define PI 3.14159265358979323846
  
  precision highp float;
  attribute float count;
  uniform float u_total;
  uniform float u_time;
  uniform float u_pointSize;
  uniform float u_noiseDiff;
  uniform float u_radius;
  void main(){
    vec3 pos = position;
    float noiseChange =  u_time * smoothstep(0.,1.,sin(u_time * 20.)) * u_noiseDiff;
    pos.x = snoise(vec3(sin(count/u_total    * PI + noiseChange ))) ;
    pos.y = snoise(vec3(sin(count/u_total   * PI + PI / 3. * 2. + noiseChange ) ) );
    pos.z = snoise(vec3(sin(count/u_total    * PI + PI / 3. + noiseChange )  ) );
    float distance = length(pos);
    vec3 r = curlNoise(vec3((distance ) + smoothstep(-0.9,0.9,sin(u_time *10.)) *2. -1. )) ;
    pos *= r* u_radius + 5.;
    gl_PointSize = u_pointSize;
    gl_Position = projectionMatrix * modelViewMatrix * vec4(pos,1.);
  }
</script>


<script id="search-vertex" type="x-shader/x-fragment">
      #define PI 3.14159265358979323846
  
  precision highp float;
  attribute float count;
  uniform float u_total;
  uniform float u_time;
  uniform float u_pointSize;
  uniform float u_noiseDiff;
  uniform float u_radius;
  void main(){
    vec3 pos = position;
    pos.x = snoise(vec3(sin(count/u_total * PI + u_time))) ;
    pos.y = snoise(vec3(sin(count/u_total * PI + PI / 3. * 2. + u_time) ) );
    pos.z = snoise(vec3(sin(count/u_total * PI + PI / 3. + u_time)  ) );
    float distance = length(pos);
    vec3 r = curlNoise(vec3((distance ) * u_time *20. *1. )) ;
    pos *= r * u_radius + 1.;
    gl_PointSize = u_pointSize;
    gl_Position = projectionMatrix * modelViewMatrix * vec4(pos,1.);
  }
</script>

<script id="home-vertex" type="x-shader/x-fragment">
  
  precision highp float;
  attribute float count;
  uniform float u_total;
  uniform float u_time;
  uniform float u_pointSize;
  uniform float u_noiseDiff;
  uniform float u_radius;
  void main(){
    vec3 pos = position;
    pos.x = snoise(vec3(count ) * u_time);
    pos.y = snoise(vec3(count ) * u_time);
    pos.z = snoise(vec3(count )*u_time);
    float distance = length(pos);
    vec3 r = curlNoise(vec3((distance + 0.) * 1.  + u_time * 10.)) * u_radius + 1.;
    pos *= r;
    gl_PointSize = u_pointSize;
    gl_Position = projectionMatrix * modelViewMatrix * vec4(pos,1.);
  }
</script>
<script id="time-vertex" type="x-shader/x-fragment">
  
      #define PI 3.14159265358979323846
  precision highp float;
  attribute float count;
  uniform float u_total;
  uniform float u_time;
  uniform float u_pointSize;
  uniform float u_noiseDiff;
  uniform float u_radius;
  void main(){
    vec3 pos = position;
    float distance = 0.;
    pos.x = snoise(vec3(count / u_total * u_time ) );
    pos.y = snoise(vec3( count / u_total * u_time+ PI /3. * 2. ));
    pos.z = snoise(vec3( count/u_total * u_time + PI/3.) ) ;
    distance = length(pos);
    vec3 r = curlNoise(vec3( sin(distance * PI) * u_time ));
    pos *= r* u_radius + 1.;
    gl_PointSize = u_pointSize;
    gl_Position = projectionMatrix * modelViewMatrix * vec4(pos,1.);
  }
</script>

<script id="fragment" type="x-shader/x-fragment">
  void main(){
    
    gl_FragColor = vec4(vec3(1.),1.);
  }
</script>


<script id="curlnoise" type="x-shader/x-fragment">
  
//
// Description : Array and textureless GLSL 2D/3D/4D simplex
//               noise functions.
//      Author : Ian McEwan, Ashima Arts.
//  Maintainer : ijm
//     Lastmod : 20110822 (ijm)
//     License : Copyright (C) 2011 Ashima Arts. All rights reserved.
//               Distributed under the MIT License. See LICENSE file.
//               https://github.com/ashima/webgl-noise
//

vec3 mod289(vec3 x) {
  return x - floor(x * (1.0 / 289.0)) * 289.0;
}

vec4 mod289(vec4 x) {
  return x - floor(x * (1.0 / 289.0)) * 289.0;
}

vec4 permute(vec4 x) {
  return mod289(((x*34.0)+1.0)*x);
}

vec4 taylorInvSqrt(vec4 r){
  return 1.79284291400159 - 0.85373472095314 * r;
}

float snoise(vec3 v) {

  const vec2  C = vec2(1.0/6.0, 1.0/3.0) ;
  const vec4  D = vec4(0.0, 0.5, 1.0, 2.0);

  // First corner
  vec3 i  = floor(v + dot(v, C.yyy) );
  vec3 x0 =   v - i + dot(i, C.xxx) ;

  // Other corners
  vec3 g = step(x0.yzx, x0.xyz);
  vec3 l = 1.0 - g;
  vec3 i1 = min( g.xyz, l.zxy );
  vec3 i2 = max( g.xyz, l.zxy );

  //   x0 = x0 - 0.0 + 0.0 * C.xxx;
  //   x1 = x0 - i1  + 1.0 * C.xxx;
  //   x2 = x0 - i2  + 2.0 * C.xxx;
  //   x3 = x0 - 1.0 + 3.0 * C.xxx;
  vec3 x1 = x0 - i1 + C.xxx;
  vec3 x2 = x0 - i2 + C.yyy; // 2.0*C.x = 1/3 = C.y
  vec3 x3 = x0 - D.yyy;      // -1.0+3.0*C.x = -0.5 = -D.y

  // Permutations
  i = mod289(i);
  vec4 p = permute( permute( permute(
      i.z + vec4(0.0, i1.z, i2.z, 1.0 ))
    + i.y + vec4(0.0, i1.y, i2.y, 1.0 ))
    + i.x + vec4(0.0, i1.x, i2.x, 1.0 ));

  // Gradients: 7x7 points over a square, mapped onto an octahedron.
  // The ring size 17*17 = 289 is close to a multiple of 49 (49*6 = 294)
  float n_ = 0.142857142857; // 1.0/7.0
  vec3  ns = n_ * D.wyz - D.xzx;

  vec4 j = p - 49.0 * floor(p * ns.z * ns.z);  //  mod(p,7*7)

  vec4 x_ = floor(j * ns.z);
  vec4 y_ = floor(j - 7.0 * x_ );    // mod(j,N)

  vec4 x = x_ *ns.x + ns.yyyy;
  vec4 y = y_ *ns.x + ns.yyyy;
  vec4 h = 1.0 - abs(x) - abs(y);

  vec4 b0 = vec4( x.xy, y.xy );
  vec4 b1 = vec4( x.zw, y.zw );

  //vec4 s0 = vec4(lessThan(b0,0.0))*2.0 - 1.0;
  //vec4 s1 = vec4(lessThan(b1,0.0))*2.0 - 1.0;
  vec4 s0 = floor(b0)*2.0 + 1.0;
  vec4 s1 = floor(b1)*2.0 + 1.0;
  vec4 sh = -step(h, vec4(0.0));

  vec4 a0 = b0.xzyw + s0.xzyw*sh.xxyy ;
  vec4 a1 = b1.xzyw + s1.xzyw*sh.zzww ;

  vec3 p0 = vec3(a0.xy,h.x);
  vec3 p1 = vec3(a0.zw,h.y);
  vec3 p2 = vec3(a1.xy,h.z);
  vec3 p3 = vec3(a1.zw,h.w);

  //Normalise gradients
  vec4 norm = taylorInvSqrt(vec4(dot(p0,p0), dot(p1,p1), dot(p2, p2), dot(p3,p3)));
  p0 *= norm.x;
  p1 *= norm.y;
  p2 *= norm.z;
  p3 *= norm.w;

  // Mix final noise value
  vec4 m = max(0.6 - vec4(dot(x0,x0), dot(x1,x1), dot(x2,x2), dot(x3,x3)), 0.0);
  m = m * m;
  return 42.0 * dot( m*m, vec4( dot(p0,x0), dot(p1,x1), dot(p2,x2), dot(p3,x3) ) );

}

// via: https://petewerner.blogspot.jp/2015/02/intro-to-curl-noise.html
vec3 curlNoise( vec3 p ){

  const float e = 0.1;

  float  n1 = snoise(vec3(p.x, p.y + e, p.z));
  float  n2 = snoise(vec3(p.x, p.y - e, p.z));
  float  n3 = snoise(vec3(p.x, p.y, p.z + e));
  float  n4 = snoise(vec3(p.x, p.y, p.z - e));
  float  n5 = snoise(vec3(p.x + e, p.y, p.z));
  float  n6 = snoise(vec3(p.x - e, p.y, p.z));

  float x = n2 - n1 - n4 + n3;
  float y = n4 - n3 - n6 + n5;
  float z = n6 - n5 - n2 + n1;


  const float divisor = 1.0 / ( 2.0 * e );
  return normalize( vec3( x , y , z ) * divisor );
}
</script>

CSS

              
                body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: #05050a;
}

.stats {
  position: absolute;
  top: 5px;
  left: 5px;
}

JS

              
                
class ThreeBasic {
  constructor(withControls = false){
    this.hasControls = withControls;
    this.useControls = false;
    this.renderer = null;
    this.camera = null;
    this.scene = null;
    this.controls = null;
  }
  init(){
    const VIEW_ANGLE = 45,
    ASPECT = window.innerWidth / window.innerHeight,
    NEAR = 0.1,
    FAR = 10000;
    const camera = new THREE.PerspectiveCamera(VIEW_ANGLE, ASPECT, NEAR, FAR);
    camera.position.z = 50;
    
    
    const scene = new THREE.Scene();
    
    const renderer = new THREE.WebGLRenderer({ alpha: true,  antialias: true , preserveDrawingBuffer: true });
				// renderer.autoClearColor = false;
    if(this.hasControls){
    }
    document.body.appendChild(renderer.domElement);
    
    
    this.camera = camera;
    this.scene = scene;
    this.renderer = renderer;
    this.onResize();
  }
  add(mesh){
    this.scene.add(mesh);
  }
onResize(){
  
  this.renderer.setSize(window.innerWidth, window.innerHeight);
  // uniforms.u_res.value.x = renderer.domElement.width;
  // uniforms.u_res.value.y = renderer.domElement.height;
  this.camera.aspect = window.innerWidth / window.innerHeight;
}
  render(){
	  this.renderer.render( this.scene, this.camera );
  }
}
const point  = new THREE.BufferGeometry();
const vertices =  new Float32Array([0,0,0]);
point.addAttribute( 'position', new THREE.BufferAttribute( vertices, 3 ) );

// const pointMat = new THREE.PointsMaterial( { color: 0x888888 } );
// const pointMesh = new THREE.Points(point,pointMat);


const makeInstanced = (originalBufferGeometry, count, maxCount)=>{
  
  maxCount = maxCount ? maxCount : count;
  console.log(maxCount)
  
  const geometry  = new THREE.InstancedBufferGeometry();
  geometry.addAttribute("position", originalBufferGeometry.attributes.position.clone());
  if(originalBufferGeometry.attributes.normal)
  geometry.addAttribute('normal',originalBufferGeometry.attributes.normal.clone());
  if(originalBufferGeometry.attributes.uv)
  geometry.addAttribute('uv',originalBufferGeometry.attributes.uv.clone());
  geometry.maxInstancedCount = maxCount;
  const nums = new THREE.InstancedBufferAttribute(new Float32Array(maxCount), 1, 1);
  for(var i = 0; i < nums.count; i++){
    nums.setX(i, i);
  }
  geometry.addAttribute('count', nums);
  geometry.setIndex(originalBufferGeometry.getIndex())
  geometry.setDrawRange(0,count);
  return geometry;
}

const updateInstanceCount = (instancedBuffer, count)=>{
  instancedBuffer.setDrawRange(0,count);
  
}

const App = new ThreeBasic(true);
App.init();

const variables = {
  instances: 10000,
  stopTime: false,
  timeSpeed: 0.0005,
  variant: 'deer'
}
const variants = ['time','home', 'search','deer','butterfly'];

// CODE GOES HERE
let total = 100;


const uniforms = {
  
   u_time: {type:'f', value: 0},
  u_total: {type: 'f', value: variables.instances},
  u_noiseDiff: { type: 'f', value: 0.01},
  u_radius: {type: 'f', value: 25 },
  u_pointSize: {type: 'f', value: 1.}
}
let segments = 16;
let squareGeo =  makeInstanced(point, 10000,25000);
const curlNoise = document.getElementById('curlnoise').textContent;
const getVertexShader = (variant) => {
  
const variantFragment = document.getElementById(`${variables.variant}-vertex`).textContent;
const vertexShader = curlNoise + variantFragment;
 return vertexShader;
}

const squareMat = new THREE.ShaderMaterial({
  uniforms,
  vertexShader: getVertexShader(variables.variant),
  fragmentShader: document.getElementById('fragment').textContent
});
const squareMesh = new THREE.Points(squareGeo, squareMat );

// Adding materials 
  App.add(squareMesh);

//
let stats = new Stats();
stats.showPanel(0);
stats.domElement.className = "stats"
document.body.appendChild( stats.domElement );
/*
pow(
  (1 + noise.eval(
   4 * SEED + scl * pos.x/2,
   scl * pos.y / 2 + mr * cos(TWO_PI*t),
   scl * pos.z / 2 + mr * sin(TWO_PI*t))
  )/2,
  4.0);
*/
const test = {
  test: 'sans-serif'
}
const gui = new dat.GUI();
gui.add(variables, "stopTime");
gui.add(variables, "timeSpeed", 0.00001,0.001);
const instanceController  = gui.add(variables, "instances", 1000,25000);
instanceController.onFinishChange(function(val){
  val = Math.floor(val);
  updateInstanceCount(squareGeo, val);
  console.log(val,uniforms.u_total.value)
  uniforms.u_total.value = val;
});
gui.add(uniforms.u_noiseDiff, 'value', 0.001,0.02).name('noise diff');
gui.add(uniforms.u_radius, 'value', 10,25).name('max radius');
gui.close();
const guiVariants = gui.add(variables, "variant", variants);
guiVariants.onFinishChange(function(val){
  const vertex = getVertexShader(val);
  squareMat.vertexShader = vertex;
  uniforms.u_time.value = 0;
  squareMat.needsUpdate = true;
  
})
 // Gui controls go here

const update = ()=>{
  if(!variables.stopTime)
  uniforms.u_time.value += variables.timeSpeed;
  // squareMesh.rotation.y+=0.025;
}
function draw(){
  stats.begin();
  App.render();
  stats.end();
  update();
  
  requestAnimationFrame(draw)
}
function init(){
  requestAnimationFrame(draw)
}


window.addEventListener('resize', ()=>{
  App.onResize();
  
  
});
window.addEventListener('mousemove',(e)=>{
  // uniforms.u_mouse.value.x = e.clientX/window.innerWidth;
  // uniforms.u_mouse.value.y = e.clientY/window.innerHeight;
})

init();

999px

Insecure Resource

About JavaScript Preprocessors

About External Resources

About Packages

HTML

CSS

JS

Console

HTML

HTML Preprocessor

About HTML Preprocessors

Add Class(es) to <html>

Adding Classes

Stuff for <head>

About the <head>

Insecure Resource

CSS

CSS Preprocessor

About CSS Preprocessors

CSS Base

About CSS Base

Vendor Prefixing

About Vendor Prefixing

Add External Stylesheets/Pens

About External Resources

JavaScript

JavaScript Preprocessor

About JavaScript Preprocessors

Add External Scripts/Pens

About External Resources

Packages

Add Packages

About Packages

Behavior

Auto Save

Auto-Updating Preview

Format on Save

Editor Settings

Code Indentation

Code Indent width

Want to change your Syntax Highlighting theme, Fonts and more?

HTML

CSS

JS

Console

Editor Commands

Editor Focus

Misc

HTML Specific

Pen Actions