Hafiz's Cinema

Intro

Hafiz's Cinema is my work-in-progress personal portfolio website.

I started this project for fun and to self-learn 3D & WebGL development.

The scene primarily focuses on a cinema building, a modified version of Radio City Music Hall in New York.

The website is live here:
https://hafiz-cinema.vercel.app/

Viewers can click and drag to orbit/view around the scene in the web experience.

This web experience is inspired by Jesse Zhou's portfolio.
www.jesse-zhou.com

The process:

I sketched out plans and ideas for the web experience journey, which I need to code later. Currently, I'm following this Three.js Journey course to learn how to do the code part.

https://threejs-journey.com/

Something about CG environments is so fascinating to me. So I chose New York City as my project to begin learning environment art.

I find the buildings & environment there aesthetically pleasing and I could enjoy the view all day.

Also, I loved watching the VFX breakdown of ILM & Sony creating CG environments of New York so I added it as part of my reference.

After blocking out the cinema and environments, I exported it in .gltf format to the WebGL scene. 

The lighting and materials are not accurate because Blender is using Ray Tracing & the WebGL experience is not. So, I will need to bake the textures from Blender and load it to WebGL, which will be a long process. (Work in progress)

User interface design

The billboard on the side of the building will be interactive and I'm designing its interface and experience with Figma.

That's all, folks! (for now)

Yeah, I know. It’s not much yet, mostly a work in progress. But I'm excited to share it because this is quite a milestone for me :D

Do expect more to come in this project. I plan to add interactions such as the signboard as a navbar, car/pedestrian animations, and a more polished high-fidelity environment.

Thank you for viewing my project!