.

.

.

"ʍǟӄɛ ǟռ օʄʄɛʀ, ʍǟӄɛ ǟ ȶʀǟɖɛ

ֆȶʀɛռɢȶɦ, ʍǟɢɨƈ, ɦօռօʀ

ֆքʊռ ɨռ ֆɨʟʋɛʀ, ƈǟʀʋɛɖ ɨռ ʝǟɖɛ

ʟɛȶ ʏօʊʀ ֆօʊʟ ɮɛƈօʍɛ ʏօʊʀ քʏʀɛ

աɦɛռ ʄʀǟɢʍɛռȶֆ ɮɛʟɨɛ ʏօʊʀ ɦɛǟʀȶ'ֆ ɛռȶɨʀɛ"

**

My ears rang in the darkness,
I could barely make out the words

Think, Think

The last thing I remember was a glass bell on the ceiling...
I was suffocating, hyperventilating and then the feeling of something heavy on my chest...

I felt strangely calm, I was in the flow state of mind.

It was only now that I realized that the voice wasn't in my head
It was around me...
and getting stronger

It was in a strange melody that I heard it,
It was a whisper, yet it filled me entirely,
It sounded strange, out of this world,
almost faerie, frightening,
it was honest and It chilled me to the bone.

I wonder if this is a part of the MCT, some new Chrono-tech

f̳͓̩͇̎͌ͣ̽́aͨͧͤ҉̙̹̞͇̙͓̠ͅ.̧̱͉̌.̧̩͇͉̱͔̙̥͛̏̂͂.̨̻͇̦͎͖͙̮̱͛̃̀ ̘͈̘̥ͤ̾͒ͪ͘ì͍̯̩̅́͟l̢͈̟̺̳̦̫ͫ̍e̴̜̳̙ͮ͒ͫ̑.͍̘̞̰̳͔͙͕̆͗̍͟.̫̞͉̖̌̌͡.̵̦͇͍̖̹͎͑ ͨ̓̑̎͏̳̥d̨̞̰͊ͅͅ

No... I remember, I failed, I was dying, it's certain, I'm going to die like this

Think, Think

The cause is likely a breakdown of the nervous and cardiovascular system
from an intense turbulent chrono-particle concentration

I was even being given chest compressions, but that won't work
I need to regulate the flow of the particles since my nervous system is a mess

the transfer Crystal !!
My nervous system couldn't become a pseudo-chrono-Xtal... so what!
I have a literal one right here, please give me enough time to reprogram this!!

I opened a terminal on the crystal somewhere nearby me

-------
Choose language: javascript
-------

I didn't have enough time to worry about data types, so I chose JS

-------
Initializing runtime environment: 100%
Accessing auxiliary scripts: 3% ^C
~Emergency Override: loading the main function in vim
-------

First I wiped out previous configurations clean

I used an already implemented linked lattice structure
I made the crystal into 2 nodes, my body into another and the environment into the final one,
it's usually pretty dangerous to do it like this, it would destroy
the crystal for sure and me most likely, but I had no choice and this wasn't usually

I willed the particles to go into the environment through the crystal's first node
and into my body from my surroundings through its second
Good, A flow was established, and the pressure on my heart was gone
I just needed someone to restart it now

...

Someone restart it now, please

...

Someone...

Anyone...

I'm going to die like this...

"Please Someone Help MEEEEEEEE!!!!" I tried to scream

In the end... is it useless after all?

Am I going to die here?

I'm going to die, aren't I?

"ɖօ ʏօʊ աǟռȶ ȶօ ʟɨʋɛ?"

The voice around me echoed violently inside my head
I could hear clearly what it said
It was asking me, to make a trade, It was offering me
offering me anything I wanted, right now my desire to live
It was conveyed, it was understood

Maybe I was just going crazy, hallucinations near the end
of one's life weren't uncommon after all, but for some reason,
I trusted it, I felt it wasn't lying, and it really would give me anything

"Yes! Please! Whatever you are, Get me out of this mess!"

I felt as if the voice nodded (don't ask)

And...

nothing happened,

...

it was a joke after all,

I didn't know what I expected,

It was the end,

I felt my consciousness slipping,

I wanted to cry

In the end, even in this, I was the minority 10%

what an absolute joke!
And with a cold numb rage, I slipped into nothingness.

Prologue <- Table of Contents -> Next Chapter

[If you need to contact me, you can comment below or email me at heaust.azure@gmail.com]

looks at it with sleepy eyes
_____

Name: Aston Blake

Scriptor Rank: 665 million

Provider Type: Rare

Chronos Density: Abnormally High

Magic Aptitude Estimation: Abnormally High

Provider Pay Grade: S+ Tier

_____

I still can't believe these readings, they scream Noble and that's what people call us "The Nobles". Beings with an extremely high density of Chronos and an abundance of wealth as a reward.

I woke up to a feeling of something moving in my pants {It was the IDX don't get happy too early}.

_____

Aston Blake,

Report to your assigned MCT venue,

Failure to report in 20:00 minutes will result in your disqualification for this round.

Do Not Reply.

Regards,
Chrono-X
_____

I panicked like an introvert who has been called on stage and can't figure out why

Oh god! Oh god! Oh god! I have to rush!

I just leaped off of the bed and landed on the floor using my elbow as my point of initial contact

Oww, no time to waste gotta get ready, where are my things when I need them?

I tried to find my toothbrush but failed so I just drank a lot of water

Struggled to find appropriate formal clothes, and found a nice half coat and a white shirt with some decent black trousers and some formal black shoes

Made some poached eggs for breakfast, and had them with a glass of chilled milk (just the regular)

Headed out locking the house, forgot I can just teleport by transfer crystal at the MCT Venue, unlocked the house went back in

Uses transport crystal

It's so dark when we are mid-transport, I wonder if there are ways to light up this darkness

I was lost in thoughts with my eyes closed, suddenly the foreground lit up

Ok, that wasn't a lot of people, they had such elegance, such manners, and such boring behavior almost all of them were nobles.

I was completely lost, looking at the building's structure in awe, they really outdid themselves with this site.

A humble girl noticed my lost expression and directed me to the help desk

I approached the desk, "Excuse me, I am kind of lost and don't know where to go from here"

The woman at the desk looked me over.

"May I have your IDX please?"

"Here", I cheerfully handed it to her

She went . . . . .

She legit stood up and made a run for it to the support room.

As I stood there awkwardly, I wonder what she saw

Two helpers arrived from the same support room and told me they are there to direct me to the test chamber

I was skeptical of the special treatment

After that being a little scared {it was my first time}, I went into the directed room

I thought there would be monitoring devices, tubes, and a whole bunch of interesting devices strapped to me

But I was told to stand under a huge glass bell-like thing for 3 mins

and that was it, bummer, I was kinda looking forward to interacting with all kinds of new chrono-tech

I came out of the test chamber, the help desk lady came back wearing an expression of disbelief

She asked me about how I felt, I told her not so good after how cold she was just before

She apologized and asked me how I felt after the test, I said I feel normal

The shock she wore was exaggerated to cartoonish proportions at this point.

She said "Your Chronos Density was the highest recorded till now, even the recorder hit its limiter, Your Density is immeasurable as it has Ultra Dynamic flow which lets you convert and generate Chronos at impossible speeds, We had to put our Chrono radiators at full power for verifying if you have what it says on the IDX"

"to be honest I felt nothing at all", I remarked

She parted her lips to speak, only no voice came out.

Actually, in hindsight she might have said something after all, I was too distracted.

My eyes were drawn to the corner of the room,

I saw someone being transported over on a hover trolley, an accident?

For some reason, I felt my heart sink and a strange feeling of unbearable irrational grief washed over me.

I was angry, I was afraid, I was seeing red and I never felt so helpless in my entire life, I broke into tears, I gasped, I flailed, I screamed.

I was shocked at my reaction and what I felt that I could only consider a gross overreaction.

If only I knew then.

Prologue <- Table of Contents -> Next Chapter

[If you need to contact me, you can comment below or email me at heaust.azure@gmail.com]

This chapter will be all about how to enhance the renders you get from ThreeJs and give them some flair ✨

This can all be done with the resources ThreeJs provides as well : )

We're going to learn about Post-Processing, as the name suggests, it's processing that happens after the scene has been rendered.

Essentially, we're taking the rendered scene and applying a filter to it, like you would in your native phone camera, Instagram, Snapchat etc.

Prerequisite ✔️

We covered how to make a scattering of cubes and how to make them light up on click in the last chapter, we won't go over that again, here's the boilerplate we're using,

<div style="position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;" class="threeD"></div>
    <script async src="https://unpkg.com/es-module-shims@1.3.6/dist/es-module-shims.js"></script>
    <script type="importmap">
    {
        "imports": {
            "three": "https://unpkg.com/three/build/three.module.js"
        }
    }
    </script>
    <script type="module">
        import * as THREE from "three";
        import { OrbitControls } from "https://unpkg.com/three/examples/jsm/controls/OrbitControls.js";

        const init = (
            targetClass = "threeD"
        ) => {
            const target = document.getElementsByClassName(targetClass);
            if (target) {
                // Renderer and Scene Setup
                const renderer = new THREE.WebGLRenderer({ alpha: true });
                const Cwidth = () => {
                    return document.getElementsByClassName(targetClass)[0].clientWidth;
                };
                const Cheight = () => {
                    return document.getElementsByClassName(targetClass)[0].clientHeight;
                };
                renderer.shadowMap.enabled = false;
                renderer.setPixelRatio(window.devicePixelRatio);
                renderer.setSize(Cwidth(), Cheight());
                renderer.physicallyCorrectLights = true;
                renderer.domElement.setAttribute("id", "three-canvas");

                target[0].appendChild(renderer.domElement);
                const scene = new THREE.Scene();
                const ambientLight = new THREE.AmbientLight(0xffffff, 2);
                scene.add(ambientLight);

                // Camera Setup
                const aspect = Cwidth() / Cheight();
                const fov = 60;
                const near = 1.0;
                const far = 200.0;
                const camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
                camera.position.set(0, 30, 0);
                camera.lookAt(0, 0, 0);

                // Setting Up Orbital Controls 
                const controls = new OrbitControls(camera, renderer.domElement);
                controls.update();

                // Setting up Store for Raycasting
                let raycastStore = [];
                const addToRCStore = (obj) => raycastStore.push(obj);
                const removeFromRCStore = (obj) => {
                    for (let i = 0; i < raycastStore.length; i++) {
                        if (raycastStore[i] === obj) raycastStore.splice(i, 1);
                    }
                }

                // Setting up RayCaster
                let ndcMouseX = -1;
                let ndcMouseY = -1;
                let rc = new THREE.Raycaster();

                document.addEventListener("mousemove", (e) => {
                    ndcMouseX = (e.clientX / window.innerWidth) * 2 - 1;
                    ndcMouseY = -(e.clientY / window.innerHeight) * 2 + 1;
                });

                const CheckRC = (camera, onIntersection, onEmpty = () => { }) => {
                    rc.setFromCamera(new THREE.Vector3(ndcMouseX, ndcMouseY, 0), camera);
                    let intersects = rc.intersectObjects(raycastStore);
                    if (intersects.length > 0) {
                        onIntersection(intersects);
                    } else {
                        onEmpty();
                    }
                }

                const RCJob = setInterval(() => {
                    CheckRC(
                        camera,
                        () => { document.body.style.cursor = "pointer"; },
                        () => { document.body.style.cursor = "auto"; }
                    );
                }, 100); // Start an Hover Job

                document.addEventListener("mousedown", () => {
                    CheckRC(
                        camera,
                        (intersects) => {
                            const col = new THREE.Color("#b62886");
                            if (!intersects[0].object.material.color.equals(col)) {
                                intersects[0].object.material.color = col;
                                intersects[0].object.material.emissive = new THREE.Color("#AAAAAA");
                            } else {
                                intersects[0].object.material.color = new THREE.Color("#639af6");;
                                intersects[0].object.material.emissive = new THREE.Color("#000000");
                            }
                        }
                    );
                }); // Start a Click Job

                // Adding Stuff to Our World  
                // Add Point Light
                const light = new THREE.PointLight(
                    0xffffff /* Color */,
                    80 /* Intensity */,
                    100 /* Maximum Range of Light */
                );
                light.position.set(30, 30, 30);
                scene.add(light);

                // Add Primitive Shapes
                const randomIntFromInterval = (min, max) => { // min and max included 
                    return Math.floor(Math.random() * (max - min + 1) + min)
                }

                const spawnRandomCube = () => {
                    // Make Shape
                    const size = randomIntFromInterval(2, 7);
                    const geometry = new THREE.BoxBufferGeometry(
                        size /** height */,
                        size /** width */,
                        size /** length */);
                    // Make Texture
                    const material = new THREE.MeshStandardMaterial({ color: 0x639af6 });
                    // Make Cube
                    const cube = new THREE.Mesh(geometry, material);
                    // Random Position
                    cube.position.set(
                        randomIntFromInterval(-80, 80),
                        randomIntFromInterval(-80, 80),
                        randomIntFromInterval(-80, 80)
                    );
                    // Random Angle
                    cube.rotation.set(
                        THREE.Math.degToRad(randomIntFromInterval(0, 90)),
                        THREE.Math.degToRad(randomIntFromInterval(0, 90)),
                        THREE.Math.degToRad(randomIntFromInterval(0, 90))
                    )
                    // Add to Scene
                    scene.add(cube);
                    addToRCStore(cube);
                }

                for (let i = 0; i < 200; i++) spawnRandomCube();

                // Play Animation
                const RAF = () => {
                    requestAnimationFrame(() => {
                        // Animations

                        // Recursively Render
                        renderer.render(scene, camera);
                        RAF();
                    });
                };

                RAF();

                // Responsiveness
                window.addEventListener(
                    "resize",
                    () => {
                        camera.aspect = Cwidth() / Cheight();
                        renderer.setSize(Cwidth(), Cheight());
                        camera.updateProjectionMatrix();
                    },
                    false
                );
            }
        };

        init();
    </script>

Concept 🤔

We'll have to setup an effects Composer which we can basically pass effects to, "effects" here are called Passes ( eg: Glitch Effect is called a Glitch Pass )

Render Effect or Render Pass is our base render, so we definitely need that, and then all the effects that we add will be applied in the order that we mention them in our code.

So if we do something like this in our code,

composer.addPass( renderPass );
/** some code */
composer.addPass( bloomPass );
/** some more code */
composer.addPass( glitchPass );

We'll get the following effect,

Also, now that our Composer is actually giving us the final result, Composer should be one that handles the final rendering, not the WebGLRenderer.

Setting Up 🏗️

We'll need EffectComposer and RenderPass to use any post-processing effect, so let's add them to our imports,

import { EffectComposer } from "https://unpkg.com/three/examples/jsm/postprocessing/EffectComposer.js";
import { RenderPass } from "https://unpkg.com/three/examples/jsm/postprocessing/RenderPass.js";

And now just above // Play Animation, we setup our post processing,

Let's make our composer and hand it the Render Pass,

// Post Processing
const composer = new EffectComposer(renderer); // make composer
const renderPass = new RenderPass(scene, camera); // make render pass
composer.addPass(renderPass); // add render pass

And now, since our Composer will actually give us the real final result, it should be the one that handles the final rendering (painting on the HTML Canvas),

So let's replace

renderer.render(scene, camera);

in our // Play Animation section with

composer.render(scene, camera);

Now our Setup is complete!!

Right now things should look exactly as they did before, but now we can easily add more effects, so let's try it :D

Adding Bloom Effect 🌟

Alright, let's first import the Bloom effect constructor from ThreeJs,

import { UnrealBloomPass } from "https://unpkg.com/three/examples/jsm/postprocessing/UnrealBloomPass.js";

Now in our Post Processing section, we can configure and add our Bloom : )

Let's make our Bloom effect with some config,

const bloomPass = new UnrealBloomPass(new THREE.Vector2(Cwidth(), Cheight()));
/** You can tweak the settings below to get best effect you desire */
bloomPass.threshold = 0;
bloomPass.strength = 0.8;
bloomPass.radius = 0.5;
bloomPass.exposure = 1;

Now that we have our Bloom Effect prepared, let's add it to the composer,

composer.addPass(bloomPass);

And we're done! that's it :D

Here's how it looks,

The bloom effect essentially works on the emission / emissive property of the material, if we didn't give our cubes any emission there wouldn't be this glow-y effect.

Here's the ThreeJs demo on Bloom where you can play with all the settings and see what does what. (Click the image below to be redirected)

Summary 📝

So in this chapter we saw how to setup an Effects Composer and apply cool filters on our renders to make them really pop out :D

Here's the collection of all the effects ThreeJs offers built in, use these for now, somewhere down the line we'll learn how to make our own : )

Here's all the code for this chapter,

<div style="position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;" class="threeD"></div>
    <script async src="https://unpkg.com/es-module-shims@1.3.6/dist/es-module-shims.js"></script>
    <script type="importmap">
    {
        "imports": {
            "three": "https://unpkg.com/three/build/three.module.js"
        }
    }
    </script>
    <script type="module">
        import * as THREE from "three";
        import { OrbitControls } from "https://unpkg.com/three/examples/jsm/controls/OrbitControls.js";
        import { UnrealBloomPass } from "https://unpkg.com/three/examples/jsm/postprocessing/UnrealBloomPass.js";
        import { EffectComposer } from "https://unpkg.com/three/examples/jsm/postprocessing/EffectComposer.js";
        import { RenderPass } from "https://unpkg.com/three/examples/jsm/postprocessing/RenderPass.js";
        const init = (
            targetClass = "threeD"
        ) => {
            const target = document.getElementsByClassName(targetClass);
            if (target) {
                // Renderer and Scene Setup
                const renderer = new THREE.WebGLRenderer({ alpha: true });
                const Cwidth = () => {
                    return document.getElementsByClassName(targetClass)[0].clientWidth;
                };
                const Cheight = () => {
                    return document.getElementsByClassName(targetClass)[0].clientHeight;
                };
                renderer.shadowMap.enabled = false;
                renderer.setPixelRatio(window.devicePixelRatio);
                renderer.setSize(Cwidth(), Cheight());
                renderer.physicallyCorrectLights = true;
                renderer.domElement.setAttribute("id", "three-canvas");

                target[0].appendChild(renderer.domElement);
                const scene = new THREE.Scene();
                const ambientLight = new THREE.AmbientLight(0xffffff, 2);
                scene.add(ambientLight);

                // Camera Setup
                const aspect = Cwidth() / Cheight();
                const fov = 60;
                const near = 1.0;
                const far = 200.0;
                const camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
                camera.position.set(0, 30, 0);
                camera.lookAt(0, 0, 0);

                // Setting Up Orbital Controls 
                const controls = new OrbitControls(camera, renderer.domElement);
                controls.update();

                // Setting up Store for Raycasting
                let raycastStore = [];
                const addToRCStore = (obj) => raycastStore.push(obj);
                const removeFromRCStore = (obj) => {
                    for (let i = 0; i < raycastStore.length; i++) {
                        if (raycastStore[i] === obj) raycastStore.splice(i, 1);
                    }
                }

                // Setting up RayCaster
                let ndcMouseX = -1;
                let ndcMouseY = -1;
                let rc = new THREE.Raycaster();

                document.addEventListener("mousemove", (e) => {
                    ndcMouseX = (e.clientX / window.innerWidth) * 2 - 1;
                    ndcMouseY = -(e.clientY / window.innerHeight) * 2 + 1;
                });

                const CheckRC = (camera, onIntersection, onEmpty = () => { }) => {
                    rc.setFromCamera(new THREE.Vector3(ndcMouseX, ndcMouseY, 0), camera);
                    let intersects = rc.intersectObjects(raycastStore);
                    if (intersects.length > 0) {
                        onIntersection(intersects);
                    } else {
                        onEmpty();
                    }
                }

                const RCJob = setInterval(() => {
                    CheckRC(
                        camera,
                        () => { document.body.style.cursor = "pointer"; },
                        () => { document.body.style.cursor = "auto"; }
                    );
                }, 100); // Start an Hover Job

                document.addEventListener("mousedown", () => {
                    CheckRC(
                        camera,
                        (intersects) => {
                            const col = new THREE.Color("#b62886");
                            if (!intersects[0].object.material.color.equals(col)) {
                                intersects[0].object.material.color = col;
                                intersects[0].object.material.emissive = new THREE.Color("#AAAAAA");
                            } else {
                                intersects[0].object.material.color = new THREE.Color("#639af6");;
                                intersects[0].object.material.emissive = new THREE.Color("#000000");
                            }
                        }
                    );
                }); // Start a Click Job

                // Adding Stuff to Our World  
                // Add Point Light
                const light = new THREE.PointLight(
                    0xffffff /* Color */,
                    80 /* Intensity */,
                    100 /* Maximum Range of Light */
                );
                light.position.set(30, 30, 30);
                scene.add(light);

                // Add Primitive Shapes
                const randomIntFromInterval = (min, max) => { // min and max included 
                    return Math.floor(Math.random() * (max - min + 1) + min)
                }

                const spawnRandomCube = () => {
                    // Make Shape
                    const size = randomIntFromInterval(2, 7);
                    const geometry = new THREE.BoxBufferGeometry(
                        size /** height */,
                        size /** width */,
                        size /** length */);
                    // Make Texture
                    const material = new THREE.MeshStandardMaterial({ color: 0x639af6 });
                    // Make Cube
                    const cube = new THREE.Mesh(geometry, material);
                    // Random Position
                    cube.position.set(
                        randomIntFromInterval(-80, 80),
                        randomIntFromInterval(-80, 80),
                        randomIntFromInterval(-80, 80)
                    );
                    // Random Angle
                    cube.rotation.set(
                        THREE.Math.degToRad(randomIntFromInterval(0, 90)),
                        THREE.Math.degToRad(randomIntFromInterval(0, 90)),
                        THREE.Math.degToRad(randomIntFromInterval(0, 90))
                    )
                    // Add to Scene
                    scene.add(cube);
                    addToRCStore(cube);
                }

                for (let i = 0; i < 200; i++) spawnRandomCube();

                // Post Processing
                const composer = new EffectComposer(renderer); // make composer
                const renderPass = new RenderPass(scene, camera); // make render pass
                composer.addPass(renderPass); // add render pass

                const bloomPass = new UnrealBloomPass(new THREE.Vector2(Cwidth(), Cheight()));
                bloomPass.threshold = 0;
                bloomPass.strength = 0.8;
                bloomPass.radius = 0.5;
                bloomPass.exposure = 1;

                composer.addPass(bloomPass);



                // Play Animation
                const RAF = () => {
                    requestAnimationFrame(() => {
                        // Animations

                        // Recursively Render
                        composer.render(scene, camera);
                        RAF();
                    });
                };

                RAF();

                // Responsiveness
                window.addEventListener(
                    "resize",
                    () => {
                        camera.aspect = Cwidth() / Cheight();
                        renderer.setSize(Cwidth(), Cheight());
                        camera.updateProjectionMatrix();
                    },
                    false
                );
            }
        };

        init();
    </script>

Conclusion 🍂

So now the objects in our scene look great!, but does the background always have to be this dark depressing void though?

Sure we can always do {alpha: true} in our WebGLRenderer initialization (and we have) and add a background image... but static background images are boring, we're doing 3D here! we won't accept anything less for any of our creations : )

So we'll learn how to easily import a 3D google-street-view-like environment into our scene to give some substance to it.

So do follow up on the chapter ThreeJs: Skyboxes and HDRIs!

Thank you so much for reading and as always, I hope you learned something : )

ThreeJs renders everything on a plain HTML Canvas, that raises an interesting question, how do we interact with individual objects inside your 3D environment ?

We can't identify a click as we usually do with the DOM as the target of the click will always be the Canvas.

In this article we'll go over the concept and implementation of a clever clicking method, the ThreeJs way!

Prerequisite ✔️

We went over the process of setting up a bunch of scattered cubes with ThreeJs in the last chapter, we won't go over that again here.

This is the boilerplate we're using,

<div style="position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;" class="threeD"></div>
<script async src="https://unpkg.com/es-module-shims@1.3.6/dist/es-module-shims.js"></script>
<script type="importmap">
{
    "imports": {
        "three": "https://unpkg.com/three/build/three.module.js"
    }
}
</script>
<script type="module">
    import * as THREE from "three";
    import { OrbitControls } from "https://unpkg.com/three/examples/jsm/controls/OrbitControls.js";

    const init = (
        targetClass = "threeD"
    ) => {
        const target = document.getElementsByClassName(targetClass);
        if (target) {
            // Renderer and Scene Setup
            const renderer = new THREE.WebGLRenderer({ alpha: true });
            const Cwidth = () => {
                return document.getElementsByClassName(targetClass)[0].clientWidth;
            };
            const Cheight = () => {
                return document.getElementsByClassName(targetClass)[0].clientHeight;
            };
            renderer.shadowMap.enabled = false;
            renderer.setPixelRatio(window.devicePixelRatio);
            renderer.setSize(Cwidth(), Cheight());
            renderer.physicallyCorrectLights = true;
            renderer.domElement.setAttribute("id", "three-canvas");

            target[0].appendChild(renderer.domElement);
            const scene = new THREE.Scene();
            const ambientLight = new THREE.AmbientLight(0xffffff, 2);
            scene.add(ambientLight);

            // Camera Setup
            const aspect = Cwidth() / Cheight();
            const fov = 60;
            const near = 1.0;
            const far = 200.0;
            const camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
            camera.position.set(0, 30, 0);
            camera.lookAt(0, 0, 0);

            // Setting Up Orbital Controls 
            const controls = new OrbitControls(camera, renderer.domElement);
            controls.update();

            // Adding Stuff to Our World  
            // Add Point Light
            const light = new THREE.PointLight(
                0xffffff /* Color */,
                80 /* Intensity */,
                100 /* Maximum Range of Light */
            );
            light.position.set(30, 30, 30);
            scene.add(light);

            // Add Primitive Shapes
            const randomIntFromInterval = (min, max) => { // min and max included 
                return Math.floor(Math.random() * (max - min + 1) + min)
            }

            const spawnRandomCube = () => {
                // Make Shape
                const size = randomIntFromInterval(2, 7);
                const geometry = new THREE.BoxBufferGeometry(
                    size /** height */,
                    size /** width */,
                    size /** length */);
                // Make Texture
                const material = new THREE.MeshStandardMaterial({ color: 0x639af6 });
                // Make Cube
                const cube = new THREE.Mesh(geometry, material);
                // Random Position
                cube.position.set(
                    randomIntFromInterval(-80, 80),
                    randomIntFromInterval(-80, 80),
                    randomIntFromInterval(-80, 80)
                );
                // Random Angle
                cube.rotation.set(
                    THREE.Math.degToRad(randomIntFromInterval(0, 90)),
                    THREE.Math.degToRad(randomIntFromInterval(0, 90)),
                    THREE.Math.degToRad(randomIntFromInterval(0, 90))
                )
                // Add to Scene
                scene.add(cube);
            }

            for (let i = 0; i < 200; i++) spawnRandomCube();

            // Play Animation
            const RAF = () => {
                requestAnimationFrame(() => {
                    // Animations

                    // Recursively Render
                    renderer.render(scene, camera);
                    RAF();
                });
            };

            RAF();

            // Responsiveness
            window.addEventListener(
                "resize",
                () => {
                    camera.aspect = Cwidth() / Cheight();
                    renderer.setSize(Cwidth(), Cheight());
                    camera.updateProjectionMatrix();
                },
                false
            );
        }
    };

    init();
</script>

Concept 🤔

Let's go back to the basics,

We know that whatever the camera sees is being rendered on the canvas,

So visually, there's no difference if the cursor was being rendered by browser on top of the canvas or on just above the camera by ThreeJs, so let's pretend the latter for a minute here, in that case...

So now that we know where the cursor is half of our problem is solved!

Now all we have to do is Cast a ray from where the cursor is supposed to be perpendicular to our camera's plane,

Now whatever intersects with that ray, we can say is the object our cursor is "hovering" over : )

We can do this Ray casting thing over and over constantly to check what our cursor is hovering over.

We can now, having the hover object, easily do "click actions", "hover actions" etc with any objects in the Scene.

A few things to keep in mind here though, you have to keep Ray Casting over and over to stay updated on what the "hover object" is in real time.

Ray Casting is really expensive so doing it too frequently and too much might cause lag, so in our example here we're doing it every 100 ms.

If you're not too concerned with performance you can make it more frequently, just be aware of the trade off.

Implementation ⚙️

This will be right after we set up our Orbit Controls

First we set up a store of items we want to respond to.

It'll just be an array of those objects, but let's give it a proper structure to make it easy to add and remove items.

    // Setting up Store for Raycasting
    let raycastStore = [];
    const addToRCStore = (obj) => raycastStore.push(obj);
    const removeFromRCStore = (obj) => {
        for (let i = 0; i < raycastStore.length; i++) {
            if (raycastStore[i] === obj) raycastStore.splice(i, 1);
        }
    }

now whenever you do scene.add(/** An Object you wanna respond to */), be sure to also do addToRCStore(/** The object */) and removeFromRCStore(/** The Object */) when you no longer want to respond to it.

Now let's setup the Ray Caster that ThreeJs offers and initialize the variables that'll keep track of the mouse position.

    // Setting up RayCaster
    let ndcMouseX = -1;
    let ndcMouseY = -1;
    let rc = new THREE.Raycaster();

We'll refresh the mouse positions whenever the mouse moves,

    document.addEventListener("mousemove", (e) => {
        ndcMouseX = (e.clientX / window.innerWidth) * 2 - 1;
        ndcMouseY = -(e.clientY / window.innerHeight) * 2 + 1;
    });

Now notice we aren't exactly keeping track of the mouse pointer but some function of it.

That's because the browser gives us the mouse position values in pixels as units, from 0 to width or height,

But ThreeJs, at render time, scales everything down to a cube of -1 to 1

So we need to make a transformation like so,

Now that that's done, let's actually make a function that checks for intersections and does something if an intersection is found and some other thing when it isn't.

const CheckRC = (camera, onIntersection, onEmpty = () => { }) => {
    rc.setFromCamera(new THREE.Vector3(ndcMouseX, ndcMouseY, 0), camera);
    let intersects = rc.intersectObjects(raycastStore);
    if (intersects.length > 0) {
        onIntersection(intersects);
    } else {
        onEmpty();
    }
}

Now we have a function that performs 1 Ray Cast for us and performs required actions.

This enables us to perform a myriad of responses, for example let's change cursor to pointer on hover of an object,

    const RCJob = setInterval(() => {
        CheckRC(
            camera,
            () => { document.body.style.cursor = "pointer"; },
            () => { document.body.style.cursor = "auto"; }
        );
    }, 100); // Start an Hover Job

Or lets make an object glow on Click,

    document.addEventListener("mousedown", () => {
        CheckRC(
            camera,
            (intersects) => {
                const col = new THREE.Color("#b62886");
                if (!intersects[0].object.material.color.equals(col)) {
                    intersects[0].object.material.color = col;
                    intersects[0].object.material.emissive = new THREE.Color("#AAAAAA");
                } else {
                    intersects[0].object.material.color = new THREE.Color("#639af6");;
                    intersects[0].object.material.emissive = new THREE.Color("#000000");
                }
            }
        );
    }); // Start a Click Job

After all that, this is what we get,

Summary

So in this Chapter we learned how to interact with the objects inside our ThreeJs with our cursor with a clever Ray Casting setup,

Here's the full code for you to setup,

<div style="position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;" class="threeD"></div>
    <script async src="https://unpkg.com/es-module-shims@1.3.6/dist/es-module-shims.js"></script>
    <script type="importmap">
    {
        "imports": {
            "three": "https://unpkg.com/three/build/three.module.js"
        }
    }
    </script>
    <script type="module">
        import * as THREE from "three";
        import { OrbitControls } from "https://unpkg.com/three/examples/jsm/controls/OrbitControls.js";

        const init = (
            targetClass = "threeD"
        ) => {
            const target = document.getElementsByClassName(targetClass);
            if (target) {
                // Renderer and Scene Setup
                const renderer = new THREE.WebGLRenderer({ alpha: true });
                const Cwidth = () => {
                    return document.getElementsByClassName(targetClass)[0].clientWidth;
                };
                const Cheight = () => {
                    return document.getElementsByClassName(targetClass)[0].clientHeight;
                };
                renderer.shadowMap.enabled = false;
                renderer.setPixelRatio(window.devicePixelRatio);
                renderer.setSize(Cwidth(), Cheight());
                renderer.physicallyCorrectLights = true;
                renderer.domElement.setAttribute("id", "three-canvas");

                target[0].appendChild(renderer.domElement);
                const scene = new THREE.Scene();
                const ambientLight = new THREE.AmbientLight(0xffffff, 2);
                scene.add(ambientLight);

                // Camera Setup
                const aspect = Cwidth() / Cheight();
                const fov = 60;
                const near = 1.0;
                const far = 200.0;
                const camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
                camera.position.set(0, 30, 0);
                camera.lookAt(0, 0, 0);

                // Setting Up Orbital Controls 
                const controls = new OrbitControls(camera, renderer.domElement);
                controls.update();

                // Setting up Store for Raycasting
                let raycastStore = [];
                const addToRCStore = (obj) => raycastStore.push(obj);
                const removeFromRCStore = (obj) => {
                    for (let i = 0; i < raycastStore.length; i++) {
                        if (raycastStore[i] === obj) raycastStore.splice(i, 1);
                    }
                }

                // Setting up RayCaster
                let ndcMouseX = -1;
                let ndcMouseY = -1;
                let rc = new THREE.Raycaster();

                document.addEventListener("mousemove", (e) => {
                    ndcMouseX = (e.clientX / window.innerWidth) * 2 - 1;
                    ndcMouseY = -(e.clientY / window.innerHeight) * 2 + 1;
                });

                const CheckRC = (camera, onIntersection, onEmpty = () => { }) => {
                    rc.setFromCamera(new THREE.Vector3(ndcMouseX, ndcMouseY, 0), camera);
                    let intersects = rc.intersectObjects(raycastStore);
                    if (intersects.length > 0) {
                        onIntersection(intersects);
                    } else {
                        onEmpty();
                    }
                }

                const RCJob = setInterval(() => {
                    CheckRC(
                        camera,
                        () => { document.body.style.cursor = "pointer"; },
                        () => { document.body.style.cursor = "auto"; }
                    );
                }, 100); // Start an Hover Job

                document.addEventListener("mousedown", () => {
                    CheckRC(
                        camera,
                        (intersects) => {
                            const col = new THREE.Color("#b62886");
                            if (!intersects[0].object.material.color.equals(col)) {
                                intersects[0].object.material.color = col;
                                intersects[0].object.material.emissive = new THREE.Color("#AAAAAA");
                            } else {
                                intersects[0].object.material.color = new THREE.Color("#639af6");;
                                intersects[0].object.material.emissive = new THREE.Color("#000000");
                            }
                        }
                    );
                }); // Start a Click Job

                // Adding Stuff to Our World  
                // Add Point Light
                const light = new THREE.PointLight(
                    0xffffff /* Color */,
                    80 /* Intensity */,
                    100 /* Maximum Range of Light */
                );
                light.position.set(30, 30, 30);
                scene.add(light);

                // Add Primitive Shapes
                const randomIntFromInterval = (min, max) => { // min and max included 
                    return Math.floor(Math.random() * (max - min + 1) + min)
                }

                const spawnRandomCube = () => {
                    // Make Shape
                    const size = randomIntFromInterval(2, 7);
                    const geometry = new THREE.BoxBufferGeometry(
                        size /** height */,
                        size /** width */,
                        size /** length */);
                    // Make Texture
                    const material = new THREE.MeshStandardMaterial({ color: 0x639af6 });
                    // Make Cube
                    const cube = new THREE.Mesh(geometry, material);
                    // Random Position
                    cube.position.set(
                        randomIntFromInterval(-80, 80),
                        randomIntFromInterval(-80, 80),
                        randomIntFromInterval(-80, 80)
                    );
                    // Random Angle
                    cube.rotation.set(
                        THREE.Math.degToRad(randomIntFromInterval(0, 90)),
                        THREE.Math.degToRad(randomIntFromInterval(0, 90)),
                        THREE.Math.degToRad(randomIntFromInterval(0, 90))
                    )
                    // Add to Scene
                    scene.add(cube);
                    addToRCStore(cube);
                }

                for (let i = 0; i < 200; i++) spawnRandomCube();

                // Play Animation
                const RAF = () => {
                    requestAnimationFrame(() => {
                        // Animations

                        // Recursively Render
                        renderer.render(scene, camera);
                        RAF();
                    });
                };

                RAF();

                // Responsiveness
                window.addEventListener(
                    "resize",
                    () => {
                        camera.aspect = Cwidth() / Cheight();
                        renderer.setSize(Cwidth(), Cheight());
                        camera.updateProjectionMatrix();
                    },
                    false
                );
            }
        };

        init();
    </script>

Conclusion

Now we're really getting into the 3D world and how we can interact with it.

One thing you probably noticed in here is that the glow of the cubes looks less like glow and more like a change of color, and you would be right.

To make the glow more "glow"-like we need to apply a post-processing step called bloom.

We'll see that and everything Post-Processing in the next article Post Processing in ThreeJs | Make your Scene Pop

So see you there! As always, hope you learned something : )

[If you need to contact me, you can comment down below, or email me at heaust.azure@gmail.com]

In this article, we'll mess with a bunch of ThreeJs features and try to make interesting things using purely ThreeJs.

We'll create lots of shapes, tinker with all sorts of material options to make them look a certain way, and go over some time saving optimizations!

So let's get into it!

(PS: If you just want the code, head to the Summary Section.)

Prerequisite ✔️

We went over the process of setting up ThreeJs in the last chapter, we won't go over that again here.

This is the boilerplate we're using,

<div
    style="position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;"
    class="threeD-Canvas"
></div>
<script async src="https://unpkg.com/es-module-shims@1.3.6/dist/es-module-shims.js"></script>
<script type="importmap">
{
    "imports": {
        "three": "https://unpkg.com/three/build/three.module.js"
    }
}
</script>
<script type="module">
    import * as THREE from "three";

    const init = (
        targetClass = "threeD-Canvas"
    ) => {
        const target = document.getElementsByClassName(targetClass);
        if (target) {
            // Renderer and Scene Setup
            const renderer = new THREE.WebGLRenderer({ alpha: true });
            const Cwidth = () => {
                return document.getElementsByClassName(targetClass)[0].clientWidth;
            };
            const Cheight = () => {
                return document.getElementsByClassName(targetClass)[0].clientHeight;
            };
            renderer.shadowMap.enabled = false;
            renderer.setPixelRatio(window.devicePixelRatio);
            renderer.setSize(Cwidth(), Cheight());
            renderer.physicallyCorrectLights = true;
            renderer.domElement.setAttribute("id", "three-canvas");

            target[0].appendChild(renderer.domElement);
            const scene = new THREE.Scene();
            const ambientLight = new THREE.AmbientLight(0xffffff, 2);
            scene.add(ambientLight);

            // Camera Setup
            const aspect = Cwidth() / Cheight();
            const fov = 60;
            const near = 1.0;
            const far = 200.0;
            const camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
            camera.position.set(0, 30, 0);
            camera.lookAt(0, 0, 0);

            // Adding Stuff to Our World  
            // Add Point Light
            const light = new THREE.PointLight(
                0xffffff /* Color */,
                30 /* Intensity */,
                100 /* Maximum Range of Light */
            );
            light.position.set(30, 30, 30);
            scene.add(light);

            // Add Primitive Shapes

            // Play Animation
            const RAF = () => {
                requestAnimationFrame(() => {
                    // Animations

                    // Recursively Render
                    renderer.render(scene, camera);
                    RAF();
                });
            };

            RAF();

            // Responsiveness
            window.addEventListener(
                "resize",
                () => {
                    camera.aspect = Cwidth() / Cheight();
                    renderer.setSize(Cwidth(), Cheight());
                    camera.updateProjectionMatrix();
                },
                false
            );
        }
    };

    init();

</script>

So just copy-paste this in an html file, and you should be good to follow along.

If you want the details of setting up ThreeJs, checkout chapter 2.

Playing with a Cube 🧊

The snippets discussed here should go below the // Add Primitive Shapes in the boilerplate if you're following along (unless stated otherwise).

Naturally let's start with,

Spawning a Cube 🧊💥

Reiterating what we discussed in chapter 1,

A 3D object, called a Mesh, is made of Geometry (the shape) and Material (the texture, which is how the surface looks)

So what we'll do is create a Cube's Geometry,

const geometry = new THREE.BoxBufferGeometry(
    7, /** height */
    7, /** width */
    7  /** length */);

a Material,

const material = new THREE.MeshStandardMaterial( { color: 0x639af6 } );

and make a Mesh using those,

const cube = new THREE.Mesh( geometry, material );

And we just made a 3D cube!

Let's add it to the scene now so we can see it,

scene.add( cube );

And we have a cube now!

Wait... isn't that a rectangle?

Nope it's still a cube, we're just looking at it directly from the top,

Transforms 🔄

Let's rotate it a bit so it actually looks 3D,

cube.rotation.x = THREE.MathUtils.degToRad(60);
cube.rotation.y = THREE.MathUtils.degToRad(60);

Since ThreeJs uses Radians as units for angles, we had to use THREE.MathUtils.degToRad(/** Angle in Degrees */) to convert 60° into (π/3) Radians

Let's look at our cube now,

Looks much better!

As we saw, we can rotate an object simply by changing,

• object.rotation.x
• object.rotation.y
• object.rotation.z

Similarly we change change its position by changing,

• object.position.x
• object.position.y
• object.position.z

Or alternatively, we can do it by using functions,

like for rotation,

• object.rotateX(/** Angle in Radian */)
• object.rotateY(/** Angle in Radian */)
• object.rotateZ(/** Angle in Radian */)

and for position,

• object.translateX(/** Number */)
• object.translateY(/** Number */)
• object.translateZ(/** Number */)

Now keep in mind that there's some differences between the 2 methods,

Specifically,

Comparison	object.property.x = /** Value*/;	object.changePropertyX(/** Value */);
Axis	Uses Global Axes	Uses Object's Axes
Transform	Sets object's property to the value	Increases Object's property by that value
Test Code in // Animations Section	cube.rotation.x += 0.05;	cube.rotateX(0.05);
Result
Test Code in // Animations Section	cube.position.x += 0.05;	cube.translateX(0.05);
Result

So be mindful of what you want to use and when.

We can also change the object's size by changing,

• object.scale.x
• object.scale.y
• object.scale.z

For example,

cube.scale.x = 0.5;

halves the cube along its X axis,

Now that we can easily throw our cube around, let's see if we can tinker with how it looks,

Material

We can change a range of properties in our object's material to get different results.

The general syntax would be this,

object.material.property = /** Value */;

These are some specific properties we can change,

here are some examples of how we'd go about changing these,

cube.material.color = new THREE.Color("#0f9d58");
cube.material.metalness = 0.2; /** 0 to 1*/
cube.material.roughness = 0.5; /** 0 to 1 */
cube.material.transparent = true;
cube.material.opacity = 0.3; /** 0 to 1 */
cube.material.wireframe = true;

ThreeJs has an awesome documentation that explains every property and even gives you a playground to tinker with every property with a simple GUI,

Definitely check that out here.

So we can throw our Cube around and style it in interesting ways,

Still, if it isn't interactive, it might as well be an animation right?

So let's really step into the 3rd dimension and learn to move around!

Orbital Controls

ThreeJs provides us a very helpful module to make the camera orbit around a target with click and drag.

We can import it like this,

import { OrbitControls } from "https://unpkg.com/three/examples/jsm/controls/OrbitControls";

or if you're using webpack it'd be,

import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";

Now to actually use it, we need to initialize and update it,

So let's do that after the camera setup, right before // Adding Stuff to Our World,

const controls = new OrbitControls( camera, renderer.domElement );
controls.update();

And we're done! We can,

• Click and Drag to Orbit
• Shift + Click and Drag to Move
• Scroll to Zoom in and out.

Sky Full of Cubes 🌌

Okay we can do a ton of stuff with a cube now.... what about TWO cubes though, or even THREE?

What if we went even FURTHER?

First let's make a random function,

const randomIntFromInterval = (min, max) => { // min and max included 
  return Math.floor(Math.random() * (max - min + 1) + min)
}

and do what we did when we first spawned a cube, except this time with random values,

const spawnRandomCube = () => {
    // Make Shape
    const size = randomIntFromInterval(2, 7);
    const geometry = new THREE.BoxBufferGeometry(
        size /** height */,
        size /** width */,
        size /** length */);
    // Make Texture
    const material = new THREE.MeshStandardMaterial({ color: 0x639af6 });
    // Make Cube
    const cube = new THREE.Mesh(geometry, material);
    // Random Position
    cube.position.set(
        randomIntFromInterval(-80, 80),
        randomIntFromInterval(-80, 80),
        randomIntFromInterval(-80, 80)
    );
    // Random Angle
    cube.rotation.set(
        THREE.MathUtils.degToRad(randomIntFromInterval(0, 90)),
        THREE.MathUtils.degToRad(randomIntFromInterval(0, 90)),
        THREE.MathUtils.degToRad(randomIntFromInterval(0, 90))
    )
    // Add to Scene
    scene.add(cube);
}

now Let's repeat it 10000 times!!

for (let i = 0; i < 10000; i++) spawnRandomCube();

This is what we get,

Something feels off though,

Let's Check on how much time takes for us to do this,

console.time("Spawning Cubes");
for (let i = 0; i < 10000; i++) spawnRandomCube();
console.timeEnd("Spawning Cubes");

The time taken should be logged in the console,

Woah... that's a lot...

It isn't really ideal that this task alone takes a fourth of a second to complete,

Can we do something to speed the process up? Any glaring optimizations we skipped over?

The problem is, we're making the same Material and Geometry over and over each time we spawn a cube,

since it's the same exact Geometry and Material, we don't necessarily need to do that,

So let's just make it once and use it anytime we need it next, like this,

// Make Texture
const material = new THREE.MeshStandardMaterial({ color: 0x639af6 });
// Make Shape
const geometry = new THREE.BoxBufferGeometry(
    1 /** height */,
    1 /** width */,
    1 /** length */);

const spawnRandomCube = () => {
    // Make Cube
    const cube = new THREE.Mesh(geometry, material);
    const scale = randomIntFromInterval(2, 7);
    cube.scale.set(scale, scale, scale)
    // Random Position
    cube.position.set(
        randomIntFromInterval(-80, 80),
        randomIntFromInterval(-80, 80),
        randomIntFromInterval(-80, 80)
    );
    // Random Angle
    cube.rotation.set(
        THREE.MathUtils.degToRad(randomIntFromInterval(0, 90)),
        THREE.MathUtils.degToRad(randomIntFromInterval(0, 90)),
        THREE.MathUtils.degToRad(randomIntFromInterval(0, 90))
    )
    scene.add(cube);
}

And just like that, we achieve a much better result!

This process of using the same Geometry and / or Material to create many similar objects is called Instancing.

This was just an example to understand how instancing works though,

ThreeJs Provides a way to use Instancing that's much more optimized than our little setup here,

We can utilize it like so,

console.time("Spawning Cubes");
// Make Texture
const material = new THREE.MeshStandardMaterial({ color: 0x639af6 });
// Make Shape
const geometry = new THREE.BoxBufferGeometry(
    1 /** height */,
    1 /** width */,
    1 /** length */);
// Creating 10000 Instanced Cubes
const InstancedCubes = new THREE.InstancedMesh(geometry, material, 10000);
// Creating helper 3D object to get matrix from
let tmp = new THREE.Object3D();
// Iterating Over All the Cubes that are Created
for (let i = 0; i < InstancedCubes.count; i++) {
    /** Transforming the helper 3D Object */
    const scale = randomIntFromInterval(2, 7);
    tmp.scale.set(scale, scale, scale);
    // Random Position
    tmp.position.set(
        randomIntFromInterval(-80, 80),
        randomIntFromInterval(-80, 80),
        randomIntFromInterval(-80, 80)
    );
    // Random Angle
    tmp.rotation.set(
        THREE.MathUtils.degToRad(randomIntFromInterval(0, 90)),
        THREE.MathUtils.degToRad(randomIntFromInterval(0, 90)),
        THREE.MathUtils.degToRad(randomIntFromInterval(0, 90))
    );
    // Updating the helper 3D Object's Matrix
    tmp.updateMatrix();
    // Setting the Cube's Matrix to the same as our helper
    InstancedCubes.setMatrixAt(i, tmp.matrix);
};
// Telling ThreeJs we just changed the matrices of the Cubes
// So it can update them sooner rather than later
InstancedCubes.instanceMatrix.needsUpdate = true;
// Adding the Instanced Cubes to the Scene
scene.add(InstancedCubes);
console.timeEnd("Spawning Cubes");

Every 3D Object has a matrix that stores its transforms, we can't directly transform Instanced Cubes, but we Can change their matrix, so that's what we did.

We got to know what the matrix was by creating an empty 3D object and transforming it as we wanted and copying its matrix.

And we get the same result as we did previously (as seen from a different angle this time),

with less than 5% of our original time,

Instancing is a method that saves both Memory and Time.

If Instancing can be utilized in your use case, there's no reason to not use it.

And that's it! We've reached the end! Hope you had fun : )

Let's go over what we learned,

Summary

So in this Article we learned,

• How to Create ThreeJs Primitive Shapes
• How to Make and Style Materials
• How to Make and Transform a 3D Object
• How to make ThreeJs interactive with Orbital Controls
• How to create a scattering of similar Objects
• What is Instancing, Why it's useful and How to use it

If we repeat what we did with Spheres, we'll get something like this,

To achieve what we did above, just copy paste the following into your HTML,

<div
style="position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;"
class="threeD"
></div>
<script async src="https://unpkg.com/es-module-shims@1.3.6/dist/es-module-shims.js"></script>
<script type="importmap">
{
    "imports": {
        "three": "https://unpkg.com/three/build/three.module.js"
    }
}
</script>
<script type="module">
    import * as THREE from "three";
    import { OrbitControls } from "https://unpkg.com/three/examples/jsm/controls/OrbitControls";

    const init = (
        targetClass = "threeD"
    ) => {
        const target = document.getElementsByClassName(targetClass);
        if (target) {
            // Renderer and Scene Setup
            const renderer = new THREE.WebGLRenderer({ alpha: true });
            const Cwidth = () => {
                return document.getElementsByClassName(targetClass)[0].clientWidth;
            };
            const Cheight = () => {
                return document.getElementsByClassName(targetClass)[0].clientHeight;
            };
            renderer.shadowMap.enabled = false;
            renderer.setPixelRatio(window.devicePixelRatio);
            renderer.setSize(Cwidth(), Cheight());
            renderer.physicallyCorrectLights = true;
            renderer.domElement.setAttribute("id", "three-canvas");

            target[0].appendChild(renderer.domElement);
            const scene = new THREE.Scene();
            const ambientLight = new THREE.AmbientLight(0xffffff, 2);
            scene.add(ambientLight);

            // Camera Setup
            const aspect = Cwidth() / Cheight();
            const fov = 60;
            const near = 1.0;
            const far = 200.0;
            const camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
            camera.position.set(0, 30, 0);
            camera.lookAt(0, 0, 0);

            // Setting Up Orbital Controls 
            const controls = new OrbitControls(camera, renderer.domElement);
            controls.update();

            // Adding Stuff to Our World  
            // Add Point Light
            const light = new THREE.PointLight(
                0xffffff /* Color */,
                80 /* Intensity */,
                100 /* Maximum Range of Light */
            );
            light.position.set(30, 30, 30);
            scene.add(light);

            // Add Primitive Shapes
            const randomIntFromInterval = (min, max) => { // min and max included 
                return Math.floor(Math.random() * (max - min + 1) + min)
            }

            console.time("Spawning Spheres");
            // Make Texture
            const material = new THREE.MeshStandardMaterial({
                color: 0x639af6,
                metalness: 0.2,
                roughness: 0.8,
            });
            // Make Shape
            const geometry = new THREE.SphereBufferGeometry(
                1 /** Radius */,
            );
            // Creating 500 Instanced Spheres
            const InstancedSpheres = new THREE.InstancedMesh(geometry, material, 500);
            // Creating helper 3D object to get matrix from
            let tmp = new THREE.Object3D();
            // Iterating Over All the Spheres that are Created
            for (let i = 0; i < InstancedSpheres.count; i++) {
                /** Transforming the helper 3D Object */
                const scale = randomIntFromInterval(2, 7);
                tmp.scale.set(scale, scale, scale);
                // Random Position
                tmp.position.set(
                    randomIntFromInterval(-80, 80),
                    randomIntFromInterval(-80, 80),
                    randomIntFromInterval(-80, 80)
                );
                // Random Angle
                tmp.rotation.set(
                    THREE.MathUtils.degToRad(randomIntFromInterval(0, 90)),
                    THREE.MathUtils.degToRad(randomIntFromInterval(0, 90)),
                    THREE.MathUtils.degToRad(randomIntFromInterval(0, 90))
                );
                // Updating the helper 3D Object's Matrix
                tmp.updateMatrix();
                // Setting the Sphere's Matrix to the same as our helper
                InstancedSpheres.setMatrixAt(i, tmp.matrix);
            };
            // Telling ThreeJs we just changed the matrices of the Spheres
            // So it can update them sooner rather than later
            InstancedSpheres.instanceMatrix.needsUpdate = true;
            // Adding the Instanced Spheres to the Scene
            scene.add(InstancedSpheres);
            console.timeEnd("Spawning Spheres");

            // Play Animation
            const RAF = () => {
                requestAnimationFrame(() => {
                    // Animations

                    // Recursively Render
                    renderer.render(scene, camera);
                    RAF();
                });
            };

            RAF();

            // Responsiveness
            window.addEventListener(
                "resize",
                () => {
                    camera.aspect = Cwidth() / Cheight();
                    renderer.setSize(Cwidth(), Cheight());
                    camera.updateProjectionMatrix();
                },
                false
            );
        }
    };

    init();
</script>

Conclusion

We've only worked with Cubes here, but you can go here and see a list of all the Geometries (Shapes) ThreeJs has to offer and the details on how to use them as well,

If you're using, them though, be sure to use Buffer Geometries instead of normal ones, Buffer Geometries are more optimized and you can only use instancing with Buffer Geometries.

To do that you just have to add "Buffer" between the Geometry names,

So for example, use ConeBufferGeometry instead of ConeGeometry, BoxBufferGeometry instead of BoxGeometry and so on.

Thank you so much for reading!

Our ThreeJs adventure continues in the next article, where we'll take our little setup here, and see how we can select individual spheres and make them light up like little bulbs!

So see you in ThreeJs: How to Click, I hope you learned something : )

[If you need to contact me, you can comment down below, or email me at heaust.azure@gmail.com]

.

.

.

I looked down at my IDX (eXperience and ID).

____________

Name: Heaust Azure

Scriptor Rank: 14 million

Provider Type: Unique

Chronos Density: Very Low

Magic Aptitude Estimation: Average

Provider Pay Grade: Minimum

____________

My Scriptor Rank, the measure of my programming ability, went up by 2 million since the last test.

A scriptor rank of 14 million is generous since almost all of the world competes, more importantly it would let me take the Magic Conversion Therapy despite my low provider pay grade, so I was in a pleasant mood.

Even though, I had a provider type that was above even "Rare", the highest I've ever seen or heard anyone get, that only meant my heart produced all types of chronos but since it didn't produce very much of it and stack that with the difficulty of separating the chronos from each other, It wasn't much cost effective to say at the very least, resulting my provider pay to be "Minimum" which was minimum wage...

The Magic Aptitude Estimation is a new addition, "Average" didn't bother me much, everyone starts somewhere right?

Magic Conversion Therapy (MCT) claims to make the entire nervous system like a pseudo chrono-crystal, so theoretically those who had gone through it can control chronos by just thinking!

The concepts behind it are so complex that one person can't hope to wrap their minds around all the technicalities given their whole life. That said the Adventurers (those who successfully undergo MCT) are expected to know how things work and they need it to be practically digestible since most of their time will go to training.

This was solved by the "Magic Theory", the use of chrono-control by Adventurers is called Magic and the entire theory is just a system to navigate the concepts without getting into technicalities. It is widely popular and only extremely passionate research graduates go into the actual technicalities.

My parents were against this decision since the test has a 10% absolute mortality rate, "absolute" meaning they couldn't be revived with chrono-tech. I'm independent now though, so it is my decision and I know the risks but I simply can't sit on the sidelines, perhaps that's why they're called Adventurers.

As I was lost in thought my IDX buzzed

____________

Heaust Azure,

Please report to your assigned MCT venue,

Failure to report in 20:00 minutes will result in your disqualification for this round.

Do Not Reply.

Regards,

Chrono-X

____________

The timer started counting down, Finally, I took out the state of the art specialised chrono-crystal I was gifted for my birthday, It's called a transfer-crystal, it can teleport people to the very few places in the world that have a transfer-receiver installed.

The MCT venue happens to be one of them.

I activated my crystal and the view around me changed, my small apartment room was now gone.

I was standing in a wide circular hall, looking up I found the ceiling to be a dome, the architecture was roman, as was characteristic of important government buildings.

Around me were 3.. 6.. 8.. 12.. 16.. 17 people, most of them clearly extremely well off and had a behavior that screamed nobility, the people with the top pay grades, I was probably the only one there that had been accepted because of their scriptor rank and not their pay grade.

I walked towards the central information desk and stood before a lady that looked to be in her 20s. She had the uniform and hat characteristic of a help desk server, her badge read "Emiris Parson"

Before I had the chance to greet her she held out her hand, "Your IDX please?", she said smiling.

"Oh sure here you go", I handed her my IDX.

She ran it through the verification sensor and hesitated for a short moment,

"You can still opt out if you want.", her tone was nervous, I wondered what she saw on her screen.

"I would rather continue if that's okay", I dismissed it to be routine verification, as I said that I saw her smile turn almost anxious.

"No really you should reconsi-", she halted mid sentence as she peeked over my shoulder

I turned my head and didn't see anything out of the ordinary, just people making their way to the desk.

"Door Number 16, the last one clockwise", she directed coldly, she wasn't smiling anymore.

I didn't think much of it, there was a lot of discrimination based on pay grade so I thought it was that.

I was a fool.

I should've heeded her warning.

I should've got out of that place.

I should've ran till my feet bled and then should've kept running.

But what I did next was the worst possible thing I could've done.

I took my IDX back and walked to door number 16.

The door scanned my IDX and I went through.

Prologue <- Table of Contents -> Next Chapter

[If you need to contact me, you can comment below or email me at heaust.azure@gmail.com]

All was dark, except for a certain faint emerald glow...

At the edge of the world an agonized howl started it's march with a brilliant white light followed by what one could, if they so heard it, make out to be the faint sound of a sharply drawn breath.

And then

All was silent.

All was dark.

This is not a story of justice, It may be a story of vengeance, it is certainly not one of redemption, it is a story of a festering world and the catastrophe that follows as consequence. It is a story of humanity's forgetfulness and it's longing for the clarity... of disaster.

.

.

.

It's the year 2077,

12 years ago the discovery of the magic particle chronos, a particle that was thought to have the ability to manipulate time, revolutionised technology, it was soon found out that the particles came in varieties much like the atoms and much like the atoms they had an entire chemistry of interaction but unlike them there were only 16 of the chronos.

The chronos was everywhere, it didn't interact with matter directly, but it did so significantly, it was especially concentrated in living beings, the human heart was found to have another major function, to produce and regulate chronos, lungs could absorb or get rid of chronos.

Some martial arts enthusiasts likened it to "chi", and as time, whatever that may be, would tell... they weren't far off.

A specific crystal, later named to be chrono-crystal, showed promise to control and co-ordinate the chronos, provided it be appropriately programmed. The void of it's lattice stored chronos and the vertices regulated its reactions.

And so the horizons of the sciences expanded, Chemistry, Physics, Geology, Programming, technology, even the modern human society would undergo drastic changes

The chronos had it's applications everywhere, chrono-crystals started being mass manufactured by the Industry, all societal power shifted to the Corporations who had made the right decisions.

Where did the chronos stored inside the crystals come from?

The human heart is an excellent producer of the chronos, and the lungs and nerve endings can help rid the chronos...

And so people were mass employed at slightly over minimum wage to be strapped to an extractor and have a substance sucked out their body that they weren't aware so far even did anything functional.

There were those who didn't agree, but most did.

There was also the service of programming the crystals...

Schools doubled down on education on the chronos, working the students day and night, utilizing all the recent chrono-tech to try and remove the adverse affects of sleep deprivation.

Chrono-tech was expensive, and most people needed to be chronos provider on top of a regular job to be able to afford it. The people who could provide more chronos were payed more, those that could provided the rare types were payed handsomely.

Eventually the ideals of the corporation and the governments clashed...

Chrono-X, the largest chrono-crystal manufacturer, declared war.

Against the latest chrono-weaponry the world didn't stand a chance.

Nations surrendered when even nuclear weapons were frozen.

The world was now united under a global government, it was of course a people's government, since the sub-organisation of Chrono-X that made the highest profit controlled most of the power.

So it still barely resembled a democracy.

Just when the dust was beginning to settle down,

The world was yet again shaken to it's core...

Table of Contents -> Next Chapter

[If you need to contact me, you can comment below or email me at heaust.azure@gmail.com]

This is a Science Fiction and High Fantasy Novel that takes inspiration from the MMORPG genre of games and Software Development and wraps it all into a neat little package.

So Cover Art's Not Ready Yet, I'll eventually make one, but for now please bear with no cover :P

First couple chapters I'd already written once on watt-pad, but since I forgot the password of that account and I'm gonna write software articles here anyway,

It's more convenient for me to put everything here.

Please provide feedback wherever you can ^^ The hard details of future chapters isn't set in stone yet, only basic plot and world-building, so feel free to suggest ways I can improve on those too and I'll implement them : )

Table of Contents

• Prologue
• Chapter 1
• Chapter 2
• Chapter 3

[If you need to contact me, you can comment below or email me at heaust.azure@gmail.com]

This article will acquaint you with some ThreeJs Boilerplate, Basic Animation, and Importing Models.

If you don't want a rundown and just want the code, head to the end.

Let's get started!

Getting ThreeJs ⬇️

First we'll need to actually get the ThreeJs Package so we can work with it.

If you're working with webpack, you can just

yarn add three

OR

npm install --save three

and then it's a simple matter of

import * as THREE from 'three';

You can also do this if you're using react or any of its derivative lessons, but it'd be more appropriate to use React-Three-Fiber for that, tutorials for that coming soon as well : )

If you're using vanilla JS you can do

<script async src="https://unpkg.com/es-module-shims@1.3.6/dist/es-module-shims.js"></script>
<script type="importmap">
{
    "imports": {
        "three": "https://unpkg.com/three/build/three.module.js"
    }
}
</script>
<script type="module">
    import * as THREE from 'three';

    /** CODE HERE */
</script>

Checking for WebGL ✔️

For ThreeJs to Render (with WebGL Renderer), the browser needs to have a WebGL implementation,

You can check if it does or not by,

/* If using Webpack */
import { WEBGL } from "three/examples/jsm/WebGL.js";
/* If using vanilla */
import { WEBGL } from "https://cdn.skypack.dev/three/examples/jsm/WebGL.js";

if ( WEBGL.isWebGLAvailable() ) {
/* It does, Go ahead */
} else {
    const warning = WEBGL.getWebGLErrorMessage();
    document.getElementById( 'container' ).appendChild( warning );
}

Most browsers already have WebGL compatibility though so usually you wouldn't need to do this.

Renderer and Scene Setup 🌎

Let's Create the Renderer First

const renderer = new THREE.WebGLRenderer({ alpha: true });

The { alpha: true } makes the empty parts of the scene transparent instead of black.

Do we want Shadow Maps? Nope. It's a very basic scene and we don't like shadows anyway.

(If you don't know what Shadow Maps are, we discusses them in Chapter 1, in Lighting and Shadows.)

renderer.shadowMap.enabled = false;

Now we set pixel ratio to prevent blurring for HiDPI devices,

renderer.setPixelRatio(window.devicePixelRatio);

Now we set the size of our canvas,

renderer.setSize(window.innerWidth, window.innerHeight);

Let's go with lights that mimic the real world lights,

renderer.physicallyCorrectLights = true;

Now let's give our canvas element an id for easy future interaction,

renderer.domElement.setAttribute("id", "three-canvas");

We need append the Canvas to the body (or any HTML element you desire, point is we need to have the canvas in our actual HTML) to actually see it,

document.body.appendChild(renderer.domElement);

Time to set the scene now! Let's create our 3D world,

const scene = new THREE.Scene();

Let's make an ambient light,

const ambientLight = new THREE.AmbientLight(
  0xffffff, /* Color */
  1 /* Intensity */
);

and add it to the scene so it isn't pitch black,

scene.add(ambientLight);

And we're all done with setting up the renderer and the scene!

There's a universe now, a 3D world, there's no one in that world to see it though, which is kind of sad. Let's Fix that!

Camera Setup 📸

So the camera needs to have,

• FOV
• Aspect Ratio
• Near
• Far

Aspect Ratio is width:height of the Camera and Field of View (FOV) is how much of the world the Camera can see.

We covered what Near and Far are in Chapter 1, The Camera.

So Let's define these,

const fov = 60;
const aspect = window.innerWidth / window.innerHeight;
const near = 20.0;
const far = 200.0;

Now we need to Make a Camera with those specs,

const camera = new THREE.PerspectiveCamera(fov, aspect, near, far);

Let's place our camera 50 metres up on the Z-Axis,

camera.position.set(0, 50, 0);

and make it look at the origin

camera.lookAt(0, 0, 0);

Our Camera is Setup and it looks something like this

Let's now have Something to populate the Scene

Importing a GLTF Model ⌛

For this we need to import GLTFLoader from ThreeJs.

You can do this with webpack by,

import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader";

or with vanilla by,

import { GLTFLoader } from "https://cdn.skypack.dev/three/examples/jsm/loaders/GLTFLoader";

I've already made a ThreeJs logo in blender and exported it as GLTF (which means the format is .glb or .gltf)

Here's how you export your model as GLTF in Blender

Importing a model takes time, So the method that imports a model also takes a callback on what to do with the model once it's imported.

Let's see how that works,

We'll define a variable that'll hold the model in this scope,

let gltfmodel;

Let's make a GLTF loader now,

const gltfLoader = new GLTFLoader();

The .load() method on the loader, has the file path as the 1st argument and the callback function as the 2nd,

Let's load in our model now,

gltfLoader.load("./path/to/model/file.glb", (gltf) => {

here, gltf will be the model data that'll be provided to our function, you can think of gltf.scene to be our actual model

Let's place our model at origin so the Camera stares directly at it,

    gltf.scene.position.set(0, 0, 0);

Set its rotation to none,

    gltf.scene.rotation.set(0, 0, 0);

And Scale it up a bit in all directions,

    gltf.scene.scale.set(5, 5, 5);

Now that our model is exactly how we want it, let's add it to the scene,

    scene.add(gltf.scene);

Since the model doesn't yet exist outside this callback function scope, let's assign it to the gltfmodel variable we created earlier so we can later tinker with it later,

    gltfmodel = gltf.scene;
});

Now our Canvas looks like this,

let's add a Point Light to make it look a little better, more 3D,

// Creating the Light
const light = new THREE.PointLight(
  0xffff00, /* Color */
  30, /* Intensity */
  100 /* Maximum Range of Light */
);

// Placing it at some co-ordinates, here (30, 30, 30)
light.position.set(30, 30, 30);

// Adding it to the scene
scene.add(light);

Now it looks much better,

But it's still... still.

If all we wanted was this, we could've just had an image.

So let's animate it

Rendering and Animation 🏃

Every time we want the Canvas to display the new frame, we need to call requestAnimationFrame with a callback that asks ThreeJs renderer to Render.

And since we need to call a new requestAnimationFrame every time the previous finishes, we can just do a recursive implementation, like so,

const RAF = () => {
  requestAnimationFrame(() => {
    // Recursively Render
    renderer.render(scene, camera); /* ThreeJs renders */
    RAF(); /* new requestAnimationFrame is called */
  });
};

and then just call it once,

RAF();

Moreover, we can do small increments / decrements in Rotation, Scale, Position and other properties before each render to get an animation effect, for example,

const RAF = () => {
  requestAnimationFrame(() => {
    /* We're increasing the Z rotation value of our
    model by 0.01 radians every frame */

    if (gltfmodel) gltfmodel.rotation.z += 0.01;

    // Getting our model in the parent scope comes in use now

    renderer.render(scene, camera);
    RAF();
  });
};

We need to be careful of one thing though, see how we're checking if the model exists before we increment it in the above example?

That's because loading a model takes time, and the model might not even be created when the 1st frame renders, so to avoid any errors, we check if it exists first.

And Just like that, we have a Spinning 3D Logo,

Responsiveness ⚖️

Remember all the things we defined earlier related to the width and the height of the canvas?

Yeah we gotta change all that every time the window (the canvas) gets resized.

So let's do that with a resize event listener,

window.addEventListener(
  "resize",
  () => {
    /* Redefining things with new width and height */
    camera.aspect = window.innerWidth / window.innerHeight;
    renderer.setSize(window.innerWidth, window.innerHeight);

    /* Updating the Camera */
    camera.updateProjectionMatrix();
  },
  false
);

Summary 📝

We did it! Our very first ThreeJs App : )

Here's a function that'll do everything we did here,

import * as THREE from "three";
import { GLTFLoader } from "https://unpkg.com/three/examples/jsm/loaders/GLTFLoader";
/* Or */
/*
import * as THREE from "three";
import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader";
*/
/* if you're using webpack */

const init = (
  modelPath = "/assets/model.glb",
  size = 5,
  targetClass = "threeD-Logo"
) => {
  const target = document.getElementsByClassName(targetClass);
  if (target) {
    // Renderer and Scene Setup
    const renderer = new THREE.WebGLRenderer({ alpha: true });
    const Cwidth = () => {
      return document.getElementsByClassName(targetClass)[0].clientWidth;
    };
    const Cheight = () => {
      return document.getElementsByClassName(targetClass)[0].clientHeight;
    };
    renderer.shadowMap.enabled = false;
    renderer.setPixelRatio(window.devicePixelRatio);
    renderer.setSize(Cwidth(), Cheight());
    renderer.physicallyCorrectLights = true;
    renderer.domElement.setAttribute("id", "three-canvas");

    target[0].appendChild(renderer.domElement);
    const scene = new THREE.Scene();
    const ambientLight = new THREE.AmbientLight(0xffffff, 1);
    scene.add(ambientLight);

    // Camera Setup
    const aspect = Cwidth() / Cheight();
    const fov = 60;
    const near = 1.0;
    const far = 200.0;
    const camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
    camera.position.set(0, 30, 0);
    camera.lookAt(0, 0, 0);

    // Load GLTF Model
    let gltfmodel;
    const gltfLoader = new GLTFLoader();
    gltfLoader.load(modelPath, (gltf) => {
      gltf.scene.scale.set(size, size, size);
      gltf.scene.position.set(0, 0, 0);
      gltf.scene.rotation.set(0, 0, 0);
      scene.add(gltf.scene);
      gltfmodel = gltf.scene;
    });

    // Add Point Light
    const light = new THREE.PointLight(
      0xffff00 /* Color */,
      30 /* Intensity */,
      100 /* Maximum Range of Light */
    );
    light.position.set(30, 30, 30);
    scene.add(light);

    // Play Animation
    const RAF = () => {
      requestAnimationFrame(() => {
        // Recursively Render
        if (gltfmodel) gltfmodel.rotation.z += 0.01;
        renderer.render(scene, camera);
        RAF();
      });
    };

    RAF();

    // Responsiveness
    window.addEventListener(
      "resize",
      () => {
        camera.aspect = Cwidth() / Cheight();
        renderer.setSize(Cwidth(), Cheight());
        camera.updateProjectionMatrix();
      },
      false
    );
  }
};

init();

You need to have an element already present in the html, preferably an empty div, with a specific class, "threeD-Logo" by default but you change it as the function's 3rd argument.

( If multiple such elements are present, the first one will be chosen )

The function's 1st argument is the model's path, and the 2nd is the Scaling factor.

The Canvas, instead of being window-wide, occupies the target div instead, this offers much better control.

PS: If you put this in a script tag, remember to add type="module" to that tag, like so, <script type="module"> /** CODE HERE */ </script>

Afterword

Hope you liked this article, We'll take a look at ThreeJs primitive shapes, textures, and more in the next article!

We'll see that we don't need to import models to get visually appealing websites, Everything is right there with ThreeJs!

See you in Fun With ThreeJs, I hope you learned something : )

[If you need to contact me, you can comment down below or email me at heaust.azure@gmail.com]

This chapter will acquaint you with the inner workings of the ThreeJs library so you're already familiar with the concepts when we start coding,

Even if you skip all the following articles of this series, this article alone will help you make informed decisions throughout your Journey!

First we'll look at different kinds of rendering engines and how ThreeJs actually renders your 3D world onto a 2D Canvas on your screen.

Then we'll dive into the three fundamentals,

• Camera
• 3D Models
• Lighting and Shadows

We'll then get to see how the images you set to be textures get shrunk and magnified, and then conclude right after with a concise summary of the article with a little teaser for the next one 😊

So let's get into it ^^

How does ThreeJs Render? 📝

There are 3 main kinds of rendering techniques,

• Rasterization <-
• Ray Casting
• Path Tracing

RAY TRACING and other RENDERING METHODS by Andrey Lebrov is a great video that explains all these better than I do here, if you watch that, you can safely skip this section.

If videos aren't your thing though, stick with me here, here we go!

Rasterization

Rasterization (or rasterisation) is the task of taking an image described in a vector graphics format (shapes) and converting it into a raster image (a series of pixels, dots or lines, which, when displayed together, create the image which was represented via shapes). - wikipedia

ThreeJs uses Rasterization to render, mainly because it's the only one that can provide real-time rendering without owning a beefy high-cost PC.

It makes sense too, considering we want our 3D web experience to be widely accessible, we Need an app you can run with,

If you've ever used Blender, the Eevee engine uses Rasterization.

It works by storing every object's image along with their distance from the camera and then drawing the pixels that are closest to the camera and ignoring the rest.

The Blazing fast speed of renders don't come without a price though, Blender provides a breakdown of the limitations that Eevee faces here.

Largely the drawbacks are an inability to compute,

• Physically accurate shadows
• Recursive reflections
• Refraction
• Bounced lights
• Caustics

These limitations are quite the handicap, so we've come up with some clever ways to fake those effects, that aren't quite accurate but come passably close. Keep this at the back of your mind for now as we'll revisit this in Lighting and Shadows.

You can safely skip the next 2 sections (Ray Casting and Path Tracing) as while they are prominent 3D rendering methods, they have little to do with ThreeJs.

Ray Casting

Ray casting is the methodological basis for 3-D CAD/CAM solid modeling and image rendering. It is essentially the same as ray tracing for computer graphics where virtual light rays are "cast" or "traced" on their path from the focal point of a camera through each pixel in the camera sensor to determine what is visible along the ray in the 3-D scene. - wikipedia

It works like this,

1. Cast a ray from the camera for every pixel out till the end of render distance.
2. Look at the closest intersection point.
3. Cast rays to all the lights from that point to calculate illumination.
4. If the ray reaches a light without any other closer intersections, factor in its contribution.

5. Now you have the color of that point, draw it on the pixel.

   

This is still relatively performant but since it doesn't factor in light bounces it still pays a lot of the same prices that rasterization does.

Path Tracing

Path tracing is a computer graphics Monte Carlo method of rendering images of three-dimensional scenes such that the global illumination is faithful to reality. Fundamentally, the algorithm is integrating over all the illuminance arriving to a single point on the surface of an object. This illuminance is then reduced by a surface reflectance function (BRDF) to determine how much of it will go towards the viewpoint camera. This integration procedure is repeated for every pixel in the output image. - wikipedia

If you've ever used Blender, the Cycles engine uses Path Tracing.

When someone's talking about Ray Tracing, unless specified or context clued otherwise, it's safe to assume they're talking about this.

This follows the same process as Ray Casting but recursively repeats the process at intersection points to gain more accurate information about reflections, refraction and shadows.

This provides extremely photo realistic results, but it's something so computationally expensive that the time it takes to render once is in the magnitude of hours.

That's unless of course, you have your

Now that we have a basic idea of how the 3D world is actually rendered on a 2D Canvas, let's dive into the fundamentals of a ThreeJs Project Setup!

The Camera 📷

The camera is a vital part of a ThreeJs render, it's something that looks at your 3D world, also called the scene, and renders (draws) whatever it sees on the canvas element.

The number of drawings it can make in 1 second is called your frame rate, measured in fps (frames per second), the more complex your scene is, the more time it takes to draw and that causes a drop in your fps.

You should try to keep your frame rate around 60fps, anything too low causes your animation to feel laggy, anything below 24 shatters the illusion of the video entirely and starts to feel like still images.

We'll discuss more about what actually makes a scene complex in 3D models and Lighting.

The Camera can take Near and Far values as parameters when created, the camera can only sees things between its near and far distances.

Try to keep it fairly tight as we don't want the camera to waste time looking for things at places we know are empty.

ThreeJs offers 2 types of Cameras, Perspective and Orthographic.

-> Perspective is designed to mimic the human eye and the cameras in the actual world, it's usually the one you'll want to use.

-> Orthographic is designed to give a flat and depth-less look. You'll want this if you're going for a more 2D vibe.

More about these ^ in detail in future chapters

Now that we know about Cameras, we need things to populate the scene and for the Camera to see : )

3D Models 🧘🏽

A complete 3D model is called a mesh.

There are 2 Components to 3D Models, the Geometry (shape) and the Material (texture).

3D Models come in many formats like .glb/.gltf, .fbx, .obj and more.

If you get your model from somewhere online, chances are you'll get it in one of these formats, it'll contain the entire model including both Geometry and Material.

The Geometry

It is the actual shape of the model.

Like images are made up of small pixels, A Geometry is made up of small triangles, why triangles? because it's the easiest shape for your GPU to calculate.

The number of these triangles is called the model's poly count, short for polygon count. Models with a high poly count are called high poly models, conversely those with a low poly count are called low poly models.

Higher poly models are more detailed and can offer greater realism but at a cost.

Essentially, increasing poly count increases the complexity of your scene.

The higher your Poly Count, the more data the Geometry needs to save that information, so high poly models tend be larger in file size, delaying a user's access to your web experience.

Not only that, high poly models require more computation to render, so they slow things down as well, causing lag on low end devices and with enough polygons, even on higher end ones.

That's why for our purposes, it's better to try and go with the lowest poly models we can to optimize our website.

Now that we know what Geometry is... how do we get it?

You can obtain Geometry in the following ways.

-> ThreeJs itself offers some primitive geometry for you to create in your scene.

-> You could Create your own Geometry in 3D Programs like Blender or Z-Brush, this is something I created in blender in about 30 minutes as anatomy practice.

-> It is understandable though if you don't want to spend a significant chunk of your time practicing modelling and wanna jump straight to creating awesome websites.

You can checkout Mixamo for free 3D Character Models and Animations, You can also checkout websites like Poly Haven, CG Trader and SketchFab for free or paid models.

This is what I can list off the top of my head and I'm sure there are other great websites like these.

Okay so now we can create Geometry, something doesn't feel right though, does it have to be all dull and gray? Nope, Let's fix that with

The Material

The material is the texture of the object. It dictates how the object's surface looks.

Say you have a plane, and you want it to look like tree bark, what we can do is just tell that plane to display an image of a tree bark, that's essentially how textures work, they're just polygons displaying images.

There's a flaw with that approach though, if we tell the plane to pretend to be an image, it's gonna look just that, a flat boring image, like we just pasted a printout on a flat piece of cardboard (which is kind of what we did).

Here's a visual on how it'll look.

And that makes sense because nothing in our world is truly flat, there's a lot of small irregularities in any surface we look at and usually different materials have different patterns of those irregularities.

If we had an ideal engine that could process a near infinite amount of light bounces and the amount of polygons in the order of 10 followed by 23 zeroes and someone who took the time to sculpt on that level, we'd get a completely photo-realistic render by just giving it the image of a tree bark.

We don't have an ideal engine nor an omnipotent sculptor though.

So what we need to do to make it more realistic is tell it how it should actually interact with the light as if the surface already had those irregularities. We need to tell our plane to pretend as if it wasn't just a plane.

We can do this by assigning it different kinds of images that give it information on what to pretend.

Some images used for this purpose are,

• bump map: The white makes the plane pretend to be raised and the black to be creased.
• roughness map: So the plane knows where it should be shiny and where it should be dull
• displacement map: Displaces the actual geometry, if your model is high poly enough for it.
• AO map: Dictates places that should be occluded.
• metalness map: So the plane knows where it should be metal-like and where not.

Here's how these images look. And if we utilize all the images we just saw, we'll end up with a result that looks way more realistic and appealing than our previous attempt.

The Material can be as complex as we just saw, or a simple plain color.

ThreeJs Provides a way to effortlessly create simple materials and pass in different maps as parameters for complex ones.

But how are textures applied on complex 3D models from a single image? Let's take a cube for example.

The cube can be easily be cut up along the edges and be unfolded flat. This process is called UV Unwrapping

The flat projection of the cube, called a UV Map can then display the parts of the image it overlaps with.

All 3D models go through a similar process if they have a texture.

We'll see more about texturing in detail in future chapters

If you've downloaded a model off the internet, it's already textured and you don't have to worry about either geometry or texture.

If you need textures, you can get them online at places like poly haven, poliigon, texture lib, ambient cg and many more such places! (Or you can directly texture paint a model in Blender, Z-brush and the like)

Now that we have populated our scene, we need some illumination to actually see our models, so let there be Light (and Shadows).

Lights and Shadows 💡👤

Expensive. If there's one thing I want you to take away from this section, it's that both Lighting and Shadows are expensive.

Lights 💡

There are a plethora of Lights you can choose from in ThreeJs, there's the omnipresent Ambient Light that illuminates everything equally, there's the Point Light which emits Light in all directions from a singular source, there's a Directional Light like the sunlight, there's Spot Light, Hemisphere Light and Rectangular Area Light.

A bunch of lights that can illuminate in a bunch of ways.

Lighting is essential to any 3D experience, it not only allows you to actually see areas of your scene well, a clever lighting setup with contrasting hues, visual cues and other design tricks will enhance the experience many folds!

While it is an excellent tool that we can make use of to enhance, it's a tool that we're often not able to afford.

Lights take a lot of computational power (some more than others), they increase the complexity of the scene by a lot and it's usually not a good idea to add too many lights to your scene.

Shadows 👤

Yes, there's a reason I've been mentioning Lights and Shadows separately, Shadows are something that are optional to have and for good reason, shadows on their own are very expensive to calculate and as such shouldn't be overused.

But Heaust, doesn't adding Lights automatically mean that you're getting shadows too since a shadow is nothing but an absence of light and wherever light doesn't reach should be dark?

Yes that would be the case if we were were using a Ray Tracing engine, but as we've already discussed we're using something called Rasterization, which doesn't actually calculate the render using light but distance from the camera instead.

And since we don't automatically get shadows, we have need to calculate Shadow Maps separately to get the shadows.

As you can see top left in this example, the renderer has to render shadow maps for each light it's calculating shadows for on every frame along with the main render.

You can guess how significantly this would impact the frame rate if for every frame you have to do multiple renders!

So a good rule of thumb would be to only use shadows if absolutely necessary and only for dynamic elements.

We'll talk about Lighting and Shadows in detail in future chapters

So... we can't use a lot of Lighting, and we can't even have any Shadows, are we doomed to suffer the cruel fate of mediocrity and bland design?

Nope, all isn't lost yet!

Baking 🥧

Since Everything we see is color anyway, we can paint the textures of surfaces to be dark or bright according to the environment we design for it! (we don't have to personally do it, Blender or other CG software can do it for us).

This removes the need to enable shadows altogether in static environments!

It's a great way to get all the performance without compromising any of the experience.

Here's what I mean, take a look at this render.

It's clear that the sphere is casting a shadow on the plane from a light coming from somewhere in the top right, right?

Nope! this entire thing is a facade, the shadow and highlights are painted (baked)!

There isn't a single light (other than ambient) in that scene. Here's how the texture for the plane looks.

So a lot of the times, you'll see we don't even need Lights and Shadows, we can just create clever illusions with baking that they're already in the scene.

For shadows of moving objects we can animate a plane with a Shadow texture.

Moreover we can add environment maps to shiny objects to tell them what to reflect so they don't have to waste time calculating.

We'll look at that and Many more things in future chapters.

MIP Mapping 🗺️

We know how we give textures to our models via images now.

The images we provide though, are 2D, and the models are 3D, So it stands to reason the closer parts of the model should be larger and the further parts should smaller, compared to our original image at times.

That means at some point that image has to go through a process of being enlarged and / or shrunk.

For shrinking what happens is your GPU takes your, say, 1024x1024 image, halves it to 512x512 and saves it, halves that to 256x256 and saves it and so on till it gets a 1x1 image.

It goes through this process so that if it ever has a need of a smaller res image, it already has it all computed and doesn't have to render from a high res image which really isn't as optimized and results in inaccurate rendering and noise.

So the takeaway from this is, always have your texture image's resolution in powers / exponents of 2, you will not be able to use mipmapping otherwise.

There are times that mipmapping will work against you though, if you want a pixelated look on your textures like in minecraft, you should probably turn mipmapping off as it results in blurred images when images get too stretched (this is usually desirable as we don't often want a pixelated look).

Skybox ⛅

Imagine your entire world is inside a Cube, now give that cube a texture to give the illusion of a 3D environment. That's a skybox and ThreeJs Makes it really easy to implement.

Think something like google street view.

Conclusion

Now you're completely ready to just dive into the api docs of ThreeJs and start creating amazing 3D web experiences.

If you're too lazy to read through all of that on your own though, stick with me for our next chapter, Create a Spinning 3D Model.

That's right! All of the theory is over (for now), we're getting our hands dirty with code for the next few chapters of the series!

Thanks for reading and Congrats! for making it all the way to the end. If you've never heard about this stuff before, I know it can be hard to wrap your head around, but give yourself a pat on the back! Now you'll be able to more intuitively navigate the CG world whether it's for creating awesome websites with ThreeJs or anything else.

See you in the next Chapter! I hope you learned something : )

[If you need to contact me, you can email me at heaust.azure@gmail.com]

If you go on their Github, they describe it thus,

"The aim of the project is to create an easy to use, lightweight, cross-browser, general purpose 3D library. The current builds only include a WebGL renderer but WebGPU (experimental), SVG and CSS3D renderers are also available in the examples."

Adding to that, what the library does is abstract away all the low level (closer to hardware: think languages like c++, rust, etc) webgl.

It gives you the ability and creative freedom to do things like importing a 3D model, animating it, applying textures on a mesh, setting up lights, cameras and plethora of other cool stuff without actually writing an odyssey length piece of code

To give you some context, it would take more than 20 lines of code just to create a plane with purely webgl, it would take only 3 with ThreeJs

It's an excellent tool to create performant 3D web apps, giving you all the control, without all the hassle, So you can get straight to creating.

Why should I care for 3D?

Adding 3D elements to your web app is an excellent way to make it stand out and pop out, It makes the users, aside from the content, enjoy the web experience itself and shoots the retention rate through the roof.

If you're a 2D javascript game-dev, this gives you the chance to explore an ocean of new possibilities.

If you need users to stay on your website, make an impact or just entertain, 3D web apps are just the thing for you!

Types of 3D Websites

Straight Up 3D

These kinds of websites are all or mostly a 3D experience, they have a game-y vibe to them. A great example is Bruno Simon's portfolio.

Augmented 2D

These Kinds are a carefully crafted mix of 3D and 2D, they take an interesting and attractive approach to design and are more suited to a simplistic consumption.

A good example would be the karman project

Virtual Reality and Augmented reality

You can use ThreeJs and WebXR to create interesting and mesmerizing VR / AR experiences.

How it Works: Basic Idea

At the very foundation, you need to set up a camera, the 3D models / the actual subjects of your scene, some lighting to illuminate it all.

You'll add a canvas element bound to ThreeJs in the HTML and the canvas will display whatever the camera sees.

You can animate your model, play with lighting and move your camera in real time and bind them to user actions to fuse it all together into a complete 3D experience

Challenges with ThreeJs and 3D Websites in general

Optimisation

Your web experience will be running on a wide range and variety of devices and platforms, a challenge all too familiar to those who've worked on the design and styling of websites, this time there's also the question of performance,

Since ThreeJs rendering utilizes the GPU and the specs vary widely across devices, something that'll give you 60fps on a laptop might not even manage 5fps on a smartphone or a tablet.

Lighting and Shadows are especially difficult to process. The point is you'll have to pay close attention to both sides of the coin, make the experience stunning for the cutting edge hardware while still keeping it manageable for even mobile devices.

Usually this calls for either clever design, platform specific code or both.

Loading Time

Sometimes you need multiple images for a single texture.

Consider this, you need to make a floor, So you make a plane and stick a wood floor image on it, done right?

Not really, while that sounds feasible, in practice it actually looks just that, like a photo pasted onto a flat cardboard.

To make a texture truly 3D you need to tell it where the surface bends and curves, where the bumps and the creases are, where it's shiny and where it's rough.

All this information is conveyed by different images like bump maps, displacement maps, metalness maps, roughness maps, normal maps, etc.

Here's an article if you want to know more about it.

The point is you can pile up a lot of images real fast.

Combine this with the actual 3D model, its animations, and the size of your app can quickly grow out of control and let's face it, most people aren't gonna wait for a 30MB website to load no matter how mesmerizing it is.

This is usually countered by fancy loading screens, a pure low-size 2D page for users to browse while they wait for the 3D content to load and minimizing the image sizes to have low asset sizes to begin with.

A general rule of thumb to follow is always use JPEGs wherever possible and use tools like squoosh to compress your images to the minimum possible size before the quality drop is unacceptable.

Is it Worth it?

Giving a lot of your time to learning an alien JavaScript library can be a long arduous process, and it's understandable to want to know what lies at the end of this journey before you start,

ThreeJs has you covered on that end too! The front page of their website boasts a plethora of amazing, captivating experiences crafted by developers using this wonderful library.

Did I read the Sub-Title wrong?

Nope, this is a prologue. Expect a series describing the ins and outs of 3D Web apps and ThreeJs to follow.

See you in the next Article, ThreeJs Essentials: Before you Start

[If you need to contact me for something you can email me at heaust.azure@gmail.com]