I write tutorials about WebGL and Threejs. You can read my articles on Medium. Also, you can follow my work in progress on twitter @onirenaud
Since 2020 I joined the developer jury panel of Awwwards.
After working in Canada for 2 years+, I moved to Japan in September 2019. In 2021 I created my studio in Osaka Utsubo.
My last open source project is React Three Next Starter.
I travelled in japan and I really loved the culture and the country. So I decided to make this portfolio and to go to live in Japan.
NUXT.JS, Yarn, Es6. If you don't know Nuxt.js already it was made by the two french brothers Sébastien Chopin and Alexandre Chopin, and damn I love it. The website total size is around 1.6mo transferred size, host on my AWS, served with http2 and gzip compression, and delivered with Cloudfare.
I added a custom shader to limit the the diffusion of the light and to give it that low poly / toon effect. Furthemore, I added a custom cell shading to the shader which is just a copy of the scene merge in a unique geometry colorized black and translated by 0.02%. I didn't wanted to use the basic post-processing outline effect of Three for performances matters.
My optimisation process for the 3D is the following : Blender export glb > DRACO Compressor > ThreeJS gltf + DRACOLoader --> Gzip. The result for the scene is a file size around 70ko (initial blender glb file is 1100ko (╯°□°)╯︵ ┻━┻)
The first best optimisation to do is to set every object with the property matrixAutoUpdate to false and manually call the updateMatrix() method when needed. The second is to merge and draw all the elements which are using the same material with THREE.BuffergeometryUtils. All the scenes on this portfolio are arounds 13 draws 120 calls / render.
For the infinite map I used the same process as in Detective Moustachio. There is 6 maps stacked and everytime 1 part of the map is offscreen I just translate the big block to the size of that part. All the process is on my twitter. The blender scene that I stack on the first part of the website is the following :
I used Anime made by Julian Garnier for the animations. I mixed a custom smooth scroll to manually trigger the update (with the seek method) of my timelines in my main RequestAnim. For the font animation I used Movement a free variable font created by Noel Pretorius and Maria Ramos.
To avoid bad timing animations I try to always have only 1 requestAnim, avoid css animations and put all my stuff in it. If there is a fps drop, everything will be impacted and so the user will just experience a slower animation. Not a big deal instead of a choppy / unwanted timeline logic.