Skip to content

jeeyoonhyun/ImmersiveWeb

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

63 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

50 Days of Immersive Web

Project Website

50 days of immersive web is a personal challenge where I am trying different 3d stuff that runs in the web browser. My primary goal here is to make mini experiments, fail fast and find out what I really want to focus. Eventually, I hope to rid of perfectionism and value quantity over quality, breadth over depth and consistency over intensity. The updated experiments will also be archived in instagram and a github repo.

Project Goal

  • Make 50 interactive mini websites including immersive elements: three.js, GLSL and WebGL
  • Make a dedicated collage website where you can try the interactions
Several transparent grey asteroids floating around, materializing when mouse is pressed

Experimenting with react-three-fiber.

rotating torus knot with dithered texture

Random noise & ordered dithering postprocessing shaders. I used these resources: https://surma.dev/things/ditherpunk/ & https://github.com/hughsk/glsl-dither/blob/master/4x4.glsl .

rotating torus knot with blurry outlines

Custom threshold shader combined with UnrealBloomPass.

10000 particles floating around

10,000 particles moving in parallax.

Floating tube object

I tried using the DeviceOrientation API. You can rotate the shape with your mobile device.

white glowing linear shapes that are intertwined

Today I played around with making random shapes and applying the Bloom postprocessing effect on the scene.

3d text written '50 days of immersive web' with black ocean waves
  • Typeface credit: Anthony by Sun Young Oh, downloded from Velvetyne Type Foundry

About

A personal project making 3d web experiments for 50 days

Resources

Stars

Watchers

Forks