cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - Activehtmlicon-personicon-teamoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External CSS

These stylesheets will be added in this order and before the code you write in the CSS editor. You can also add another Pen here, and it will pull the CSS from it. Try typing "font" or "ribbon" below.

Quick-add: + add another resource

Add External JavaScript

These scripts will run in this order and before the code in the JavaScript editor. You can also link to another Pen here, and it will run the JavaScript from it. Also try typing the name of any popular library.

Quick-add: + add another resource

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

            
              function particlesVS() {
  return `
    precision highp float;
    uniform float time;
    uniform mat4 modelViewMatrix;
    uniform mat4 projectionMatrix;
    attribute vec3 position;
    attribute vec3 offset;
    attribute vec4 color;
    attribute vec4 orientationStart;
    attribute vec4 orientationEnd;
    attribute float timeOffset;
    varying vec3 vPosition;
    varying vec4 vColor;
    varying float lifeProgress;

    void main(){

      vPosition = offset;

      lifeProgress = mod(time+timeOffset,1.0);

      vPosition = offset * lifeProgress + position;
      vec4 orientation = normalize(mix(orientationStart, orientationEnd, lifeProgress));
      vec3 vcV = cross(orientation.xyz, vPosition);
      vPosition = vcV * (2.0 * orientation.w) + (cross(orientation.xyz, vcV) * 2.0 + vPosition);
      vColor = color;
      gl_Position = projectionMatrix * modelViewMatrix * vec4( vPosition, 1.0 );
    }`;
}

function particlesFS() {
  return `
    precision highp float;
    uniform float time;
    varying vec3 vPosition;
    varying vec4 vColor;
    varying float lifeProgress;

    void main() {
      float depth = gl_FragCoord.z / gl_FragCoord.w / 5.0;
      float opacity = clamp(0.2, 1.0, depth);
      vec4 color = vColor;
      //color.a = sin(lifeProgress*100.0)*opacity;
      gl_FragColor = color;
    }`;
}

class ParticleSystem {
  constructor () {
    this.time = 0.0
    let triangles = 1
    let instances = 10000
    let geometry = new THREE.InstancedBufferGeometry()

    let vertices = new THREE.BufferAttribute(new Float32Array(triangles * 3 * 3), 3)
    let unit = 0.15
    vertices.setXYZ(0, unit, -unit, 0)
    vertices.setXYZ(1, -unit, unit, 0)
    vertices.setXYZ(1, 0, 0, unit)
    geometry.addAttribute('position', vertices)

    let offsets = new THREE.InstancedBufferAttribute(new Float32Array(instances * 3), 3, 1)
    let dist = 5
    for (let i = 0, ul = offsets.count; i < ul; i++) {
      offsets.setXYZ(i, (Math.random() - 0.5) * dist, (Math.random() - 0.5) * dist, (Math.random() - 0.5) * dist)
    }
    geometry.addAttribute('offset', offsets)

    let colors = new THREE.InstancedBufferAttribute(new Float32Array(instances * 5), 4, 1)

    let threeColor = new THREE.Color()
    for (let i = 0, ul = colors.count; i < ul; i++) {
      let c = threeColor.setHex(0xf7f7f7)
      colors.setXYZW(i, c.r, c.g, c.b, 1)
    }
    geometry.addAttribute('color', colors)

    let timeOffsets = new THREE.InstancedBufferAttribute(new Float32Array(instances * 1), 1, 1)

    for (let i = 0, ul = timeOffsets.count; i < ul; i++) {
      timeOffsets.setX(i, Math.random())
    }
    geometry.addAttribute('timeOffset', timeOffsets)

    let vector = new THREE.Vector4()
    let orientationsStart = new THREE.InstancedBufferAttribute(new Float32Array(instances * 4), 4, 1)
    for (let i = 0, ul = orientationsStart.count; i < ul; i++) {
      vector.set(Math.random() * 2 - 1, Math.random() * 2 - 1, Math.random() * 2 - 1, Math.random() * 2 - 1)
      vector.normalize()
      orientationsStart.setXYZW(i, vector.x, vector.y, vector.z, vector.w)
    }
    geometry.addAttribute('orientationStart', orientationsStart)

    let orientationsEnd = new THREE.InstancedBufferAttribute(new Float32Array(instances * 4), 4, 1)
    for (let i = 0, ul = orientationsEnd.count; i < ul; i++) {
      vector.set(Math.random() * 2 - 1, Math.random() * 2 - 1, Math.random() * 2 - 1, Math.random() * 2 - 1)
      vector.normalize()
      orientationsEnd.setXYZW(i, vector.x, vector.y, vector.z, vector.w)
    }
    geometry.addAttribute('orientationEnd', orientationsEnd)

    let material = new THREE.RawShaderMaterial({
      uniforms: {
        time: { value: 1.0 }
      },
      vertexShader: particlesVS(),
      fragmentShader: particlesFS(),
      side: THREE.DoubleSide,
      transparent: true
    })

    let mesh = new THREE.Mesh(geometry, material)
    mesh.frustumCulled = false
    this.mesh = mesh
  }

  update (dt) {
    this.time += 0.0009
    this.mesh.material.uniforms.time.value = Math.sin(this.time)
  }
}

const size = {
  width: window.innerWidth,
  height: window.innerHeight
}

const canvas = document.querySelector('canvas')
canvas.width = size.width
canvas.height = size.height

const renderer = new THREE.WebGLRenderer({
  canvas,
  antialias: true,
  alpha: false
})
renderer.setClearColor(0xff3333, 1)
const camera = new THREE.PerspectiveCamera(105, size.width / size.height, 1, 500)
const scene = new THREE.Scene()
scene.add(camera)

// particles
const particleSystem = new ParticleSystem()
particleSystem.mesh.position.y = 0 // 10
scene.add(particleSystem.mesh)

function renderFrame() {
  window.requestAnimationFrame(renderFrame)
  particleSystem.update()
  renderer.render(scene, camera)
}

// start rendering
renderFrame()
            
          
!
999px
Close

Asset uploading is a PRO feature.

As a PRO member, you can drag-and-drop upload files here to use as resources. Images, Libraries, JSON data... anything you want. You can even edit them anytime, like any other code on CodePen.

Go PRO

Loading ..................

Console