Hey there! I’m Jeremy, a inventive developer at Energetic Idea, a inventive know-how studio centered on crafting significant, impactful digital experiences.
Over the previous few years, I’ve turn into more and more excited about how WebGL experiences are structured behind the scenes, particularly in the case of transitions, layered interfaces, and post-processing results. Rendering a single 3D scene on to the display works for easy instances, nevertheless it shortly turns into limiting as complexity grows.
On this walkthrough, I’ll revisit one in every of my earlier initiatives, Private Log 2024, to discover its implementation, break down my thought course of, and mirror on what I may have accomplished higher.
Going Past Simply 3D Scenes
Earlier than becoming a member of Energetic Idea, I spent a whole lot of time diving into private initiatives to sharpen my expertise and construct up my portfolio. Wanting again, there are many issues I want I had understood sooner, insights that may have made an actual distinction within the work I used to be constructing. One idea, particularly, actually stands out and it’s composite rendering in WebGL.
Earlier than I proceed, you will need to know that there are lots of completely different names for this idea. Composite rendering may be referred to as render-to-texture, FBO compositing or multipass rendering.
At a excessive stage, composite rendering entails rendering a scene into an off-screen texture moderately than rendering it on to the display. This intermediate step provides us the power to govern the rendered picture and add extra results. If this sounds acquainted, that’s as a result of it’s how post-processing works in Three.js. As a substitute of outputting the scene instantly, we first render it to a render goal, the place results might be utilized and layered on with a number of passes. The processed result’s then rendered both by means of the composer or, in our case, mapped to a aircraft geometry and enhanced additional with a customized shader.
// Arrange Scene A
const sceneA = new THREE.Scene();
const cameraA = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, .1, 1000);
const dice = new THREE.Mesh(
new THREE.BoxGeometry(1, 1, 1),
new THREE.MeshBasicMaterial()
);
sceneA.add(cameraA, dice);
// Setup Scene B - For remaining render: render goal's texture on aircraft
const sceneB = new THREE.Scene();
const cameraB = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, .1, 1000);
const aircraft = new THREE.PlaneGeometry(1, 1);
const shader = new THREE.ShaderMaterial({
vertexShader: compositeVertex,
fragmentShader: compositeFragment,
uniforms: {
uTexture: new THREE.Uniform(),
},
});
const planeMesh = new THREE.Mesh(aircraft, shader);
sceneB.add(cameraB, planeMesh);
// Arrange Renderer
const renderer = new THREE.WebGLRenderer({
canvas,
antialias: true,
})
renderer.setSize(window.innerWidth, window.innerHeight);
// Arrange Render Goal
const renderTarget = new THREE.WebGLRenderTarget(window.innerWidth, window.innerHeight);
// Render Loop
operate startRender() {
renderer.setRenderTarget(renderTarget);
shader.uniforms.uTexture.worth = renderTarget.texture;
renderer.render(sceneA, cameraA);
renderer.setRenderTarget(null);
renderer.render(sceneB, cameraB);
window.requestAnimationFrame(startRender);
}
startRender();Having this in your toolkit opens up a brand new stage of inventive freedom. It unlocks a variety of prospects, from transitioning between scenes to compositing textures and experimenting with extra expressive visible results.
Listed here are some examples that make the most of composite render in several ideas:
- Energetic Idea & Slosh Seltzer: Scrolling and transitioning between a number of sections.
- Kenta Toshikura: Rendering 3D Scenes as challenge thumbnails.
- Aircord: Layering a number of scenes making a seamless transition between pages.
The Spark of Brilliance
I used to be first launched to composite rendering by means of an article by Backyard Eight that dives into the tech behind the Aircord web site. It provided a deep clarification on how they layer a number of scenes and deal with web page transitions, and it turned a private breakthrough shaping how I now construction scenes with out pointless duplication.
For my challenge, the scene setup mirrors Backyard Eight’s method, however with fewer layers. Two components are at all times current on display: the face geometry and the “UI.” Whereas the UI adapts to every web page, the face geometry stays constant throughout all views with a distinct type of interplay.
As a substitute of duplicating the face, I arrange a important scene containing the face geometry and a aircraft serving because the render goal. To deal with responsiveness, I calculate the render goal measurement from the digicam’s vertical discipline of view and apply it proportionally to the X and Y scales.
const fovY =
(this.digicam.place.z + this.aircraft.place.z) *
this.digicam.getFilmHeight() /
this.digicam.getFocalLength();
this.aircraft.scale.set(fovY * digicam.side, fovY, 1);With the render goal setup, I can now modify the render order so it sits behind the face geometry, swap the feel to the corresponding UI, and apply post-processing, which primarily acts as a router for my expertise.
Identical Work, Higher Mind
Whereas the answer above does the job, there’s at all times room to refine it to spice up efficiency, simplify the construction, and permit for extra scalability.
FIRST, moderately than rebuilding the digicam, renderer, and scene scaffolding each single time, we will summary that into reusable scene parts utilizing JavaScript’s extends function. This permits us to outline a shared basis as soon as and construct upon it.
Within the demo, I launched a BaseScene class to encapsulate an ordinary Three.js scene setup to deal with necessities just like the scene occasion, digicam configuration, and challenge utils. On high of that, I created an FXScene (a reputation shamelessly borrowed from Energetic Idea’s inside tooling) designed particularly for scenes that require a render goal.
With this structure, we get rid of repetitive setup code whereas retaining full entry to all shared properties and behaviors. Extra importantly, because the challenge grows, we will enrich the bottom courses with new capabilities like extra utilities, shared assets, debugging instruments, and each inheriting scene mechanically advantages from these enhancements.
Under is a minimal instance of an FXScene, conceptually much like BaseScene however prolonged with render goal configuration.
import * as THREE from 'three';
import Expertise from '../../Expertise'; // Singleton setup to run the complete Three.js challenge
export default class FXScene {
constructor() {
this.expertise = new Expertise();
this.renderer = this.expertise.renderer;
this.initScene();
this.initCamera();
this.initRenderTarget();
this.sizes = this.expertise.sizes;
this.sizes.on('resize', () => {
this.onResize();
});
}
initScene() {
this.scene = new THREE.Scene();
this.scene.background = null;
}
initCamera() {
this.digicam = new THREE.PerspectiveCamera(45, this.sizes.width / this.sizes.peak, 1, 15);
this.digicam.place.set(0, 0, 5);
this.scene.add(this.digicam);
}
initRenderTarget() {
this.rt = new THREE.WebGLRenderTarget(this.sizes.width, this.sizes.peak, {
minFilter: THREE.LinearFilter,
magFilter: THREE.LinearFilter,
format: THREE.RGBAFormat,
stencilBuffer: false,
});
}
onResize() {
this.digicam.side = this.sizes.width / this.sizes.peak;
this.digicam.updateProjectionMatrix();
}
}SECOND, we will simplify the composite move by rendering a fullscreen quad instantly in clip house, avoiding pointless projection calculations since there’s no want for depth testing or 3D calculations because it’s solely displaying a texture. This entails stripping out all of the matrices within the vertex shader, which you’ll see a big rectangle protecting the scene with out them. To make sure it stays behind all different objects, you may management its render order manually.
// const fovY = digicam.getFilmHeight() / digicam.getFocalLength();
// renderTarget.scale.set(fovY * digicam.side, fovY, 1);
this.aircraft.renderOrder = -1;void important() {
gl_Position = vec4(place.xy, 1.0, 1.0);
}NEXT, we will simplify the routing construction and get rid of the large if-statement litter. By making a devoted class to handle route modifications utilizing a lookup desk, we will streamline the logic. The category or operate would take the from and to scene textures and deal with rendering and transitioning between them seamlessly.
// Setup scenes, cameras, and render targets...
constructor() {
this.currentView = null;
}
operate onViewChange(to) {
let viewMap= {
scene1: this.sceneOne.rt.texture,
scene2: this.sceneTwo.rt.texture
};
if (!this.currentView) {
this.currentView = viewMap['scene1'];
this.shader.uniforms.uFromTexture.worth = this.currentView;
this.shader.uniforms.uTransition.worth = 0;
return;
}
if (this.currentView === viewMap[to]) return;
this.shader.uniforms.uToTexture.worth = viewMap[to];
this.currentView = viewMap[to];
gsap.to(this.shader.uniforms.uTransition, {
worth: 1,
period: 1,
onComplete: () => {
this.shader.uniforms.uFromTexture.worth = viewMap[to]
this.shader.uniforms.uTransition.worth = 0
}
});
}void important(){
vec4 fromTexture = texture2D(uFromTexture, vUv);
vec4 toTexture = texture2D(uToTexture, vUv);
vec4 coloration = combine(toTexture, fromTexture, uTransition);
gl_FragColor = coloration;
}By utilizing this methodology, we will simply preserve and scale our challenge as we want, permitting us to have extra inventive freedom with transitions. Yuri Artiukh on YouTube offers nice examples to comply with:
combine(toTexture, fromTexture, uTransition);
combine(toTexture, fromTexture, step(uTransition, vUv.y));
combine(toTexture, fromTexture, step(uTransition, 0.5 * ( vUv.y + vUv.x )));
combine(toTexture, fromTexture, smoothstep(uTransition, uTransition + 0.3, ( vUv.x + vUv.y ) / 2.));Lastly, within the authentic challenge, there was a delicate however necessary difficulty: the blur operate was unintentionally overwriting the alpha channel of the ultimate output. Reasonably than diving deep into the internal workings of blur itself, a cleaner answer was to maneuver the blur logic instantly into the composite shader we constructed earlier and deal with all post-processing there. The mouse fluid impact can reside in that very same composite move as effectively.
Consolidating these steps right into a single composite shader reduces the entire variety of render passes, main to raised efficiency total. It additionally centralizes all final-stage impact processing, which improves readability and maintainability, and minimizes factors of failure—since we’re primarily working on textures making debugging much more easy.
void important() {
vec4 fromTexture = texture2D(uFromTexture, vUv);
vec4 toTexture = texture2D(uToTexture, vUv);
vec4 coloration = combine(toTexture, fromTexture, uTransition);
// Postprocessing for coloration
gl_FragColor = coloration;
}Wanting Again, Shifting Ahead
Initially, thanks a lot for taking the time to learn all the best way to the top. Penning this has been an extremely rewarding expertise—revisiting work from a 12 months in the past and reflecting alone development has been each humbling and deeply inspiring. I really feel genuinely grateful (and really fortunate) to have the ability to share my work, and to collaborate with such a considerate and proficient staff at Energetic Idea. I’m excited to see how all the pieces I’ve discovered to this point will form the subsequent chapter of my journey as a inventive developer.
Cheers!
