EffectHub.com: your best source for gaming

Recommendation

More Effects...

'use strict';

THREE.GodrayShader = {
  uniforms: {
    texture: { type: 't', value: null },
    lightPosition: { type: 'v2', value: new THREE.Vector2(0, 0) }
  },
  vertexShader: '\n    varying vec3 vPos;\n    varying vec2 vUv;\n\n    void main() {\n      vPos = position;\n      vUv = uv;\n      gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );\n    }\n  ',
  fragmentShader: '\n    uniform sampler2D texture;\n    uniform vec2 lightPosition;\n\n    varying vec3 vPos;\n    varying vec2 vUv;\n\n    const int NUM_SAMPLES = 75;\n\n    void main() {\n      vec2 dist = vec2(vPos.xy - lightPosition.xy);\n      vec2 texPos = vUv;\n\n      float weight = 3.25;\n      float illuminationDecay = 1.0;\n      float decay = 0.75;\n      float exposure = 0.525;\n      float density = 0.996;\n\n      dist *= 1.0 /  float(NUM_SAMPLES) * density;\n\n      vec4 blurColor = vec4(0.0, 0.0, 0.0, 0.0);\n\n      for (int i = 0; i < NUM_SAMPLES; i += 1) {\n        texPos -= dist;\n        vec4 sample = texture2D(texture, texPos);\n        sample *= illuminationDecay * weight;\n        blurColor += sample;\n        illuminationDecay *= decay; \n      }\n\n      blurColor *= exposure;\n      gl_FragColor = mix(blurColor, texture2D(texture, vUv), 0.55);\n    }\n  '
};

var width = window.innerWidth;
var height = window.innerHeight;

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(45, width / height, 0.1, 1000);
var renderer = new THREE.WebGLRenderer();
var bufferScene = new THREE.Scene();
var bufferTexture = new THREE.WebGLRenderTarget(width, height, { minFilter: THREE.LinearFilter, magFilter: THREE.NearestFilter });

var meshes = [];
var composer = undefined;

var lightMesh = new THREE.Mesh(new THREE.SphereGeometry(15, 12, 12), new THREE.MeshBasicMaterial({ color: 0xFCFCFC }));
lightMesh.position.set(0, 0, 0);
bufferScene.add(lightMesh);

var renderFrame = function renderFrame() {
  window.requestAnimationFrame(renderFrame);
  renderer.render(bufferScene, camera, bufferTexture);
  composer.render(scene, camera);
  //renderer.render(scene, camera)

meshes.forEach(function (mesh, index) {
    mesh.position.x = Math.sin(mesh.angle * mesh.offsets[0]) * 15;
    mesh.position.y = Math.sin(mesh.angle * mesh.offsets[1]) * 15;
    mesh.position.z = 15.1;
    mesh.angle += mesh.speed;
  });
};

var init = function init() {
  renderer.setSize(width, height);
  renderer.setClearColor(0x111111);
  document.body.appendChild(renderer.domElement);

camera.position.set(0, 0, 100);
  camera.lookAt(new THREE.Vector3(0, 0, 0));

composer = new THREE.EffectComposer(renderer);
  var bufferRender = new THREE.RenderPass(bufferScene, camera);
  var customShader = new THREE.ShaderPass(THREE.GodrayShader);
  customShader.uniforms['texture'].value = bufferTexture.texture;
  customShader.uniforms['lightPosition'].value = new THREE.Vector2(lightMesh.position.x, lightMesh.position.y);
  customShader.renderToScreen = true;

composer.addPass(bufferRender);
  composer.addPass(customShader);

var geo = new THREE.SphereGeometry(2, 14);
  var mat = new THREE.MeshBasicMaterial({ color: 0x111111 });

for (var i = 0; i < 100; i += 1) {
    var mesh = new THREE.Mesh(geo, mat);
    mesh.speed = 0.01 + Math.random() * 0.015;
    mesh.offsets = [Math.random(), 0.9 + Math.random() * 0.1];
    mesh.angle = Math.random() * 360;
    mesh.position.set(0, 0, 0);
    bufferScene.add(mesh);
    meshes.push(mesh);
  }

renderFrame();
};

init();

CSS

HTML

Recommendation

Join Effecthub.com