Skip to content

Ayush7486/WebGL-Practice

Repository files navigation

WebGL Practice

An experimental creative frontend project exploring immersive visual experiences through WebGL, cinematic composition, and editorial design.


Preview

GOATCLUB.mp4

About

This project was built as part of my learning journey into WebGL and Three.js.

The foundational concepts and workflow were learned from:

WebGL Basics — Sawaraj Singh

Video / Tutorial : https://www.youtube.com/watch?v=C2IRBJYbdSg&t=1071s

C2IRBJYbdSg-MQ

While learning the fundamentals, I wanted to create something with its own visual identity and atmosphere. Rather than focusing only on implementation, the goal was to explore how visual design and WebGL can work together to create immersive experiences.


Process

The workflow involved:

  • Using reference visuals to establish the overall mood and theme
  • Creating structured prompts based on the selected visual language
  • Using AI to generate the HTML/CSS foundation of the website
  • Integrating custom WebGL effects into the experience
  • Experimenting with hover distortion interactions

Learning Journey

This project was primarily built as a learning and experimentation project while exploring WebGL and Three.js.

Areas explored during development:

  • WebGL fundamentals
  • Three.js basics
  • Interactive visual experiences
  • Responsive visual behavior
  • Hover distortion effects

Built With

  • HTML
  • CSS
  • JavaScript
  • Three.js
  • WebGL

Focus Areas

  • Creative Frontend Development
  • Interactive Experiences

Visual Sources & Credits

The visual language of this project was built using a combination of curated references and using them for custom-generated imagery.

image - [Cosmos — Visual Source 02] - https://www.cosmos.so/e/271064534 image - [Cosmos — Visual Source 03] - https://www.cosmos.so/e/1483968447 image - [Cosmos — Visual Source 04] - https://www.cosmos.so/e/245357766 image

AI Generated Visual Assets

Additional visuals were generated during the design process to maintain consistency in:

  • atmosphere
  • composition
  • typography
  • cinematic framing
  • overall art direction

The goal was to make all visuals feel like they belonged to the same creative universe.


Notes

This project was created as part of a learning process and serves as a space for experimentation, exploration, and understanding creative frontend workflows.