Introduction & Motivation
We wished to replace our portfolio, which was created in 2018. For this, our primary goal was to take care of the essence of the web site, retaining its key factors, however rework the artwork route, make it extra colourful, evaluate our 3D character, the efficiency, go additional on the inventive facet and add a CMS amongst different issues.
The V01 aimed to supply an unique idea as a portfolio with a contact of surrealism and provocation through our 3D, navigation and thru the character’s habits capturing the consumer’s consideration (with awkward, humorous and even boastful poses).
On this submit, we’ll clarify among the primary ideas and results of the web site together with some examples.
Challenges
We wished to utterly rethink the rendering of the meshes to realize a barely cartoonish/drawing consequence.
Additionally sustaining clean transitions between pages, with totally different lighting and rendering, having texts in WebGL stylized with randomized parameters for a novel expertise and higher integration with the 3D.
In fact, all of this wants to stay as performant as potential.
Tech stack
- Nuxt.js
- Prismic
- Three.js & Customized WebGL Instruments
- GSAP
Customized Toon Shading
There are two components that compose Toon Shading (additionally name cel shading).
The primary is that, somewhat than a steady change of colour, values of luminance are clamp leading to some areas which can be all the identical colour.
Second is that normally Toon shaders objects have outlines round them.
We use Three.js as our WebGL library. There’s a Toon Materials within the examples, however sadly, it wasn’t fairly what we have been in search of. We wished higher management over the rendering and so as to add some grain to the picture. So we needed to create a customized shader.
Three.js instance: https://threejs.org/examples/webgl_materials_toon.html
Step one was to acquire solely 2 tones within the shading: the lit half in some colour and the shadow half in black. For this, we used the maths of the lights within the shader and evaluate the worth the luminance of the pixel with a threshold. Then, we change the shadows from black to blue.
The second step was to calculate a gradient for the place to use afterwards the noise steadily.
The third step was to insert noise into this gradient to interrupt up the linear side and provides it a extra drawn side.
Afterward, we adjusted the assorted parameters based mostly on the lighting, character, and the remainder of the web site to get the specified consequence.
Put up Results
The web site has a number of post-processing results.
For context, every web page has its personal scene, with its personal meshes (character, texts, and so on.) relying on the content material of the web page. The totally different pages are drawn in 2 render targets utilized in ping-pong technique (solely lively pages are rendered) in order that the Slice transition will be potential and carried out in a fullscreen airplane.
Some extra post-effects are added on this airplane shader:
- Vignette, RGB Shift and Bulge Impact: linked to scroll and mouse motion
Subsequent, the remainder of the results are then utilized:
- Fluid simulation: linked to mouse motion and paired with datamoshing simulation afterwards
- Datamoshing: UVs deformation based mostly on fluid simulation + optical movement algorithm linked to scroll + pixelation and noise on the results of each simulations
- Bloom: primarily for movies within the mission pages
- Blur: used when the gallery in mission pages is open
- Colour grain: reminder of the toon shader
- Cursor: the cursor is totally managed in submit with shapes within the shader utilizing remodel, state, shading, mix
- Movie Grain
We used our personal in-house library of post-processing to present us higher management, outcomes and efficiency for all these results.
Certainly, some results equivalent to simulations or bloom require separate render targets for calculations, however all the ultimate calculations and computation of theses don’t require separate rendering, so they’re mechanically compiled right into a single shader (leading to just one move). This avoids having 1 impact = 1 render, which might be too heavy by way of efficiency, and lose some high quality.
// Preview of the fragment shader logic
void fluid(inout vec4 colour, in vec2 uv) {// fluid maths}
void datamosh(inout vec4 colour, in vec2 uv) {// datamosh maths}
void bloom(inout vec4 colour, in vec2 uv) {// bloom maths}
void dof(inout vec4 colour, in vec2 uv) {// dof maths}
void drawCursor(inout vec4 colour, in vec2 uv) {// drawCursor maths}
void noise(inout vec4 colour, in vec2 uv) {// noise maths}
void colorGrain(inout vec4 colour, in vec2 uv) {// colorGrain maths}
void primary() {
vec4 c = texture2D(tInput, vUv);
vec2 uv = vUv;
fluid(c, uv);
datamosh(c, vUv);
bloom(c, vUv);
dof(c, uv);
colorGrain(c, vUv);
drawCursor(c, vUv);
noise(c, vUv);
gl_FragColor = vec4(c.rgb, 1.0);
}WebGL Texts
We wished to have textual content in WebGL as properly to higher combine them with the remainder of the web site and the artwork route. Nevertheless, we didn’t wish to fully neglect accessibility, which is why we additionally had HTML textual content beneath some WebGL texts for click on and choose functions.
This additionally gave us extra potentialities for rendering (strong texts, outlines, noise, gradients…).
Sadly, it’s at all times a bit sophisticated to work with textual content in WebGL (measurement, wrapping, responsive…), however just a few years in the past, we additionally created a customized library to deal with this, which we had to enhance lots for this portfolio replace. This library makes use of MSDF texts, permitting for clear, sharp, versatile typography whereas remaining environment friendly.
One of many challenges was to capable of customise the shader based on our needs, dynamic parameters and the animations of every textual content, as in the event that they have been HTML texts, particularly hiding the texts letter by letter, which was an actual problem, we’re doing so with customized attribute and uniforms within the shaders.
Extra infos on MSDF: https://github.com/Chlumsky/msdfgen
3D Character
A big a part of the web site id additionally comes from our iconic character. This was created in Character Creator (CC), a 3D character design software program. All textures have been carried out in Substance Painter.
We wished to take up the idea of the V01 of the web site, the place the character might have a number of poses and comply with the cursor together with his head to trace the consumer motion.
Nevertheless, we wished to make it extra vigorous and distinctive with every pose. For this, we considered making his eye blink, in addition to giving it extra pronounced facial expressions and customized textures for every pose.
The character presently has 7 states, subsequently 7 poses, facial expressions, and set of textures (head, arms, physique).
This resulted in a number of challenges:
- Tips on how to use the character from CC however optimize it for the net?
- Tips on how to load a number of poses and facial expressions with out loading totally different recordsdata for loading efficiency?
- Tips on how to make the character blink his eyes?
- Tips on how to optimize textures if we wished a number of?
- Since we solely see the highest of the character, we eliminated the underside half and bones under the waist, permitting us to cut back drastically the filesize. Due to CC, we might additionally export this character in decrease definition.
- To keep away from loading a number of fashions, we determined to have just one file utilizing a skeletal mesh. This permits us to maneuver the bones and thus recreate the poses we wished. Sadly, this doesn’t work for facial expressions, for this we would have liked morphs targets. For optimization and filesize causes, we determined to divide the character into 2 components, the physique and the top, which we’d recombine in code. Certainly, the morphs duplicate all of the vertices. Solely the vertices of the top wanted to be modified, not like the physique which remained static. So we exported the top with all of the bones and the morphs we have to set them in code just like the bones to present us the expression we wished. This implies we can also animate the face if we wished. We additionally exported the physique however with solely the bones, a lot smaller filesize.
- Due to the morphs, we have been capable of acquire one for opening or closing the eyes. We are able to play with totally different timing and delays so as to add some randomness and realism to the blinking.
- Regardless of our efforts, the burden of the mesh, particularly the top, and all of the textures have been too heavy and took up an excessive amount of GPU RAM for our style. We transformed the mesh into binary glTF with mesh optimizer extension to optimize the vertices and weight. As for textures, we grouped totally different components of the physique (head, arms, legs) right into a spritesheet, which we then transformed into the idea format, which is extra appropriate (and lighter) for the GPU. With all this, we achieved a extra satisfying consequence.
With the workflow we had discovered, it’s fully potential to simply create new poses and loopy mixture and combine them into the web site with out including to a lot weight in filesize.
Earlier than optimization:
- Head: 4.9Mo
- Physique: 631Ko
- 21 textures (7 poses x 3 mesh components): 3.9Mo
After optimization:
- Head: 2.9Mo
- Physique: 301Ko
- 7 textures spritesheet: 1.39Mo
Extra infos on gltfpack and mesh optimizer: https://meshoptimizer.org/gltf/
Foundation compression: https://github.com/BinomialLLC/basis_universal
Conclusion
We hope you loved this case research. We are able to’t go into particulars about each side and situation we encountered, however we hope this offers you an excellent overview of the challenges and ambitions we had and maybe you even realized just a few suggestions and tips.
When you have any questions, be happy to ask us on Twitter or Instagram.
