Introduction & Motivation
We aimed to update our 2018 portfolio while maintaining its essence. Our main goals were to enhance the art direction, add more color, revamp our 3D character, improve performance, explore creativity, and incorporate a CMS. The V01 version of the portfolio sought to present an original concept with a touch of surrealism and provocation through the 3D elements, navigation, and character’s behavior.
Home – V01 Project – V01 Contact – V01
In this article, we will delve into the key concepts and effects of the website, supported by examples.
Challenges
Our challenges included reimagining the mesh rendering to achieve a cartoonish/drawn appearance, ensuring smooth transitions between pages with varied lighting and rendering, stylizing texts in WebGL for a unique experience, and maintaining optimal performance.
Tech stack
Our tech stack comprised Nuxt.js, Prismic, Three.js, and Custom WebGL Tools, including GSAP and Custom Toon Shading.
Toon Shading
Toon Shading involves two components: limiting color changes to create regions of the same color and outlining objects. While Three.js provided a Toon Material example, we needed more control and added grain to the image through a custom shader.
Post Effects
The website featured post-processing effects like Vignette, RGB Shift, Bulge Effect, Fluid and Datamoshing simulations, Bloom, Blur, Color Grain, and Cursor effects. These effects were efficiently managed through a custom in-house post-processing library for optimal performance.
WebGL Texts
We integrated text in WebGL to align with the website’s design, while also ensuring accessibility by including HTML text for click and select functions. Our custom library utilizing MSDF texts allowed for clear, flexible typography and dynamic text animations.
3D Character
Our iconic character, created in Character Creator with textures from Substance Painter, played a significant role in the website’s identity. To optimize the character for the web, we streamlined the file size, posed the character using skeletal mesh, and incorporated custom textures and facial expressions for enhanced realism.
By overcoming these challenges and implementing innovative solutions, we successfully updated our portfolio to reflect our creative vision.
Source link
