Skip to content

jeromeetienne/threex.volumetricspotlight

master
Switch branches/tags
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.

threex.volumetricspotlight

threex.volumetricspotlight is a three.js extension which provide a 'good enought' spot light. as in described in "Good Enough" Volumetrics for Spotlights post from john chapman. Well almost the same, it doesn't include the soft particles feature when the spot cross the ground. I implemented it but THREE.DepthMaterial is storing depth on 8 bit. It creates strong precisions issues.

Show Don't Tell

How To Install It

You can install it via script tag

<script src='threex.volumetricspotlight.js'></script>

Or you can install with bower, as you wish.

bower install threex.volumetricspotlight

How To Use It

threex.volumetricspotlighthelper.js

Create the object and attached it to the scene.

var helper  = new THREEx.VolumetricSpotLightHelper(light)
scene.add(helper.object3d);

Then at every frame rendered, you update it.

helper.update(deltaSecond, nowSecond);

threex.volumetricspotlightmaterial.js

var geometry = new THREE.CylinderGeometry(0.0, 1.5, 5, 32*2, 20, true)
var material = new THREEx.VolumetricSpotLightMaterial(light)
var mesh = new THREE.Mesh(geometry, material)
scene.add(mesh)

Possible Improvements

TODO

  • do a minecraft animation
    • elvis skin
    • 2 spots
    • one music
  • simple minecraft animation
    • a mincraft character animatied
    • 2 spots

use Depth for 'soft particles'

  • the original post from chapman include 'soft particles'
    • i couldnt get it to work
    • to be precise, it worked with THREE.MeshDepthMaterial
    • but it lacked precision because the depth is stored on 8bits
    • i tried with 'depthRGBA' shader which pack it in 32bits
    • but i failed to take it off
  • issue with depthMap
    • using DepthMaterial atm so 8bits for depth
    • using 'depthRGBA' would provide a 32bits... much better
      • i cant take it off for whatever reason
  • may be in the rendering of the depth texture with shader material
  • THREE.MeshDepthMaterial produces 8bits depth… not too funky
    • What about rewriting the 'depth' shader... would that fix my issue ?
    • if so it isnt in the packDepth function
    • it is in the init/rendering of the depthPass

About

three.js extension to provide a volumetric spot light

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published