Kira0 Proto

Three.js take on Kira0 (https://twitter.com/kira0art) WIP to demonstrate soft shadows

Live version here : https://www.ulucode.com/fanart/kiraproto/

The question was wether or not taking the project in 3D for shadows was worthwhile. I'd say it depend for the shadows. But I think it's extremely worthwhile for the rest : easy lighting, composition, realtime rendering, etc.

Might be a bit advanced if you're just starting with 3D concepts, but I tried to comment and be readable Everything concerning shadows is tagged "!SHADOW!" in the code for easy lookup

Also contains many things useful in genart:

• Example of fxhash integration with Liam Egan wrapper https://github.com/liamegan/fxhash-helpers
• Container / resize / aspect ratio handling
• Custom mesh generation ( BuildingGoemetry.ts )
• Scene optimization techniques, with merging and instancing ( City.ts )
• Example glsl injection by extending three.js materials (./materials/* )
• Seeded random texture generation to feed shaders ( RandTexGen.ts )

Based on the official fxhash webpack boilerplate project https://github.com/fxhash/fxhash-webpack-boilerplate

How to use

You will need to have nodejs installed.

Installation

First, make sure that your node version is >= 14

Clone the repository on your machine and move to the directory

$ git clone https://github.com/ULuIQ12/Kiraproto.git your_folder && cd your_folder

Install the packages required for the local environment

$ npm i

Start local environment

$ npm start

This last command will start a local http server with live reloading enabled so that you can iterate faster on your projects. Open http://localhost:8080 to see your project in the browser.

Build

$ npm run build