Back

Karhu Koding

Mix of WebGL and a traditional easy to use Navigation

Visit Page ↗

2022

concept, models and code created by myself

Website for my own company, 3D scenery with real-time shadows and wind animation, characters (Bear and Fisherman) are rigged and animated in Blender.

Mix of baked textures for the building and basic materials to create a contrast for this low-poly cubic world

Technologies Used

  • React + Zustand + Three.js + Camera-Controls + Blender
  • Models are done by myself

Main Challenges

  1. Models: I had to learn how to rig and animate characters in Blender.
  2. Performance: expensive scene, uses instantiation for the trees, optimizes the amount of vertices, bakes some textures, and has not yet achieved optimal performance.
  3. Mobile View: Projects runs at 30 fps on an old Iphone 6S

Take Aways / ToDos

  1. I could improve the overall performance quite a bit and will still do, the loading time is bad, and the loader is a bit broken.
  2. It's really important to optimize the overall amount of vertices and keyframes in animations, set lights and cast and receive shadows strategically.
  3. I have already written a shader for the wind animation, which you can find here, not yet implemented
  4. I could bake way more textures in Blender, since the real-time shadows just matter for the background.