hello and welcome to red stapler channel in this tutorial we are going to show
you how to create a Batman logo with godrays background using javascript and
three.js in just a few minutes let's check it out in previous tutorial we
have shown you how to import 3d car model into the web page using three.js
this tutorial is going to reuse that code to import the batman logo model
you can check out the link to the video in the description box next i'm going to
find a suitable model for a bat logo after some search i found a free version
on a sketchfab so let's download it now here's the code from previous tutorial
let's replace the car model with a Batman logo and change the model scaling size
and next let's change the scene background to black and change the
camera position and angle I will also increase the fov angle and viewing range
of the camera next we are going to adjust the light source we already have
multiple light sources from previous tutorial now we only need just one
directional light from background I will set a light color to warm yellow and
reduce the intensity also change the direction to make the glowing background
now to create a volumetric light or godrays we need to create a shape of the
light source let's create a circle shape
the color of the godrays effect is determined by the color of the light
source material I'm going to set that to warm yellow I'll place it some distance
behind the bat logo also add a small horizontal scale to create an ellipse
shape okay the setup is ready the next step is to add a godrays post-processing
effects for the shape we have just created
there is a nice post-processing library for three.js that will do the heavy lifting
for you just download the latest release from github or use NPM install command it's up
to you once downloaded copy the post-processing.js and include it to
your page using script tag next create an effect object using GodRaysEffect
constructor we will pass the camera and our circle shape and next the option
object here we can customize the god rays characteristic first is resolution scale
which controls the light resolution I'll set it to 1 next is the density of the
light set it to 0.6 decay is how fast your light will fade set it to point 95
weight is light gray weight factor set it to 0.9 and a final one is number of
light samples per pixel set it to 100 there is no actual formula for these
numbers it depends on how you want your light to be try out the official demo of
the library to understand more about each property
alright the effect object is ready next step is to create the pass pass is how we
utilize the shader with the post-processing the first pass we need
is a render pass normally we will use our WebGL render to render the scene but
as we want to apply the post-processing we will have to use render pass instead
next is effect pass this is where you will pass the god rays effect object
that we created you can add more than one effect to the pass we also need to
set a render to screen property to true to enable it the final step is to create
an effect composer this is where you add all your passes to it you need to pass
your normal renderer to the constructor and use a pass to add all your passes
then render the scene with composer instead that looks good but if you look
closely you see jagged edge you can fix this problem by adding anti aliasing
effect using SMAA pass provided in this library and here's the final result you
can find a code of this tutorial on our website in the description box below and
it's all for this video hope you guys enjoy don't forget to subscribe our
channel if you love to see more thanks for watching and see you next time bye