GithubHelp home page GithubHelp logo

imclab / threex.volumetricspotlight Goto Github PK

View Code? Open in Web Editor NEW

This project forked from jeromeetienne/threex.volumetricspotlight

0.0 3.0 0.0 540 KB

three.js extension to provide a volumetric spot light

Home Page: http://jeromeetienne.github.io/threex.volumetricspotlight/examples/basic.html

License: MIT License

threex.volumetricspotlight's Introduction

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

threex.volumetricspotlight's People

Contributors

jeromeetienne avatar

Watchers

 avatar  avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.