Data

Tools

Indexes

Applications

Experiments

Awesome

An open API service indexing awesome lists of open source software.

https://github.com/zavalit/awesome-3d-web

list of inspirational resources to get hands on
https://github.com/zavalit/awesome-3d-web

List: awesome-3d-web

Last synced: 20 days ago
JSON representation

list of inspirational resources to get hands on

Awesome Lists containing this project

README 

          
# Awesome 3d Web



A list of resources to take a look at if you want to try some awesome 3D in Web.



---

* `glsl` `shader` by @i_dianov



[![Tweet](https://img.shields.io/twitter/url/http/shields.io.svg?style=social)](https://twitter.com/i_dianov/status/1399054382465966080)



[https://twigl.app/](https://bit.ly/2SBRNai)



---

*



`r3f` `soft particles` `instanced mesh` `depth buffer` by @ggsimm



[![Tweet](https://img.shields.io/twitter/url/http/shields.io.svg?style=social)]

(https://twitter.com/ggsimm/status/1390017555612512257)

[![CodeSandbox](https://img.shields.io/badge/Open%20in-CodeSandbox-blue?style=flat-square&logo=codesandbox)](https://codesandbox.io/s/r3f-soft-particles-926t0)   



---

* bubbles by @stivaliserna



`three.js` `raycaster`



[![Tweet](https://img.shields.io/twitter/url/http/shields.io.svg?style=social)](https://twitter.com/stivaliserna/status/1366161119765819394)



[Codepen](https://codepen.io/stivaliserna/pen/GRNxGrR)



---

* WebGLBlobs by @marioecg



`webgl` `shader` `vertex displacement`



[![Tweet](https://img.shields.io/twitter/url/http/shields.io.svg?style=social)](https://twitter.com/marioecg/status/1354109672429654023)

   [![](https://img.shields.io/github/stars/codrops/WebGLBlobs?style=social&label=Github)](https://github.com/codrops/WebGLBlobs/)



---

* Rotating shapes by @akella



`webgl` `shaders` `rotation`



   [![Tweet](https://img.shields.io/twitter/url/http/shields.io.svg?style=social)](https://mobile.twitter.com/codrops/status/1356958704919314437)

   [![](https://img.shields.io/github/stars/akella/RotatingShapes?style=social&label=Github)](https://github.com/akella/RotatingShapes/)



---

* Explosion by @0xca0a



`r3f` `reflection` `audio` 



   [![Tweet](https://img.shields.io/twitter/url/http/shields.io.svg?style=social)](https://twitter.com/0xca0a/status/1357346054635544584)

[![CodeSandbox](https://img.shields.io/badge/Open%20in-CodeSandbox-blue?style=flat-square&logo=codesandbox)](https://codesandbox.io/s/sound-test-dvokj)   



---

* Selfie Girl by @iquilezles



`sign distance function` `raymarching` `min function` `cubic polynomial` `line segment` `smooth step function` `gradient vector`



[![Tweet](https://img.shields.io/twitter/url/http/shields.io.svg?style=social)](https://twitter.com/iquilezles/status/1332491882027384832)



[Shadertoy](https://www.shadertoy.com/view/WsSBzh)



[Youtube](https://www.youtube.com/watch?v=8--5LwHRhjk)



---

* Transmission materials and Physics @0xca0a



`r3f` `postprocessing` `transmission` `shader` `physics`



   [![Tweet](https://img.shields.io/twitter/url/http/shields.io.svg?style=social)](https://twitter.com/0xca0a/status/1348325348690317319)

[![CodeSandbox](https://img.shields.io/badge/Open%20in-CodeSandbox-blue?style=flat-square&logo=codesandbox)](https://codesandbox.io/s/r3f-ibl-envmap-simple-6ebrr)   



---

* Game starter by @simonghales



`r3f` `game`



   [![Tweet](https://img.shields.io/twitter/url/http/shields.io.svg?style=social)](https://twitter.com/simonghales/status/1347099945971564549)

[![](https://img.shields.io/github/stars/simonghales/react-three-game-starter?style=social&label=Github)](https://github.com/simonghales/react-three-game-starter)



---

* Animated hologen postproceessing by @mlperego



`r3f` `postprocessing` `displacementMap` `glich` `depth texture`



   [![Tweet](https://img.shields.io/twitter/url/http/shields.io.svg?style=social)](https://twitter.com/mlperego/status/1347616281638432770)

[![CodeSandbox](https://img.shields.io/badge/Open%20in-CodeSandbox-blue?style=flat-square&logo=codesandbox)](https://codesandbox.io/s/gwmd3)   



---

* Cross fading opacity by @davidbismut



`r3f` `react-spring` `ScreenQuad` `FXAA`



   [![Tweet](https://img.shields.io/twitter/url/http/shields.io.svg?style=social)](https://twitter.com/davidbismut/status/1347910911311405058)

[![CodeSandbox](https://img.shields.io/badge/Open%20in-CodeSandbox-blue?style=flat-square&logo=codesandbox)](https://xm76k.csb.app/)   



---

* Animatied mesh distort material from @0xca0a



`r3f` `react-spring` `svg` `MeshDistortMaterial`



   [![Tweet](https://img.shields.io/twitter/url/http/shields.io.svg?style=social)](https://twitter.com/0xca0a/status/1347490916685254656)

   [![CodeSandbox](https://img.shields.io/badge/Open%20in-CodeSandbox-blue?style=flat-square&logo=codesandbox)](https://codesandbox.io/s/charming-ritchie-5oufp)



--- 

* Cornell Box by @Domenico_brz



`three.js` `raymarching` `sspt` `svgf denoise` `cornellbox`



   [![Tweet](https://img.shields.io/twitter/url/http/shields.io.svg?style=social)](https://twitter.com/Domenico_brz/status/1347983328083927042)

   [![](https://img.shields.io/github/stars/Domenicobrz/SSPT-in-threejs?style=social&label=Github)](https://github.com/Domenicobrz/SSPT-in-threejs)



---

* Multiscale Turing Patterns in WebGL by @rickyreusser



`webgl` `turing clouds` `Fast Fourier Transform`



   [![Tweet](https://img.shields.io/twitter/url/http/shields.io.svg?style=social)](https://twitter.com/rickyreusser/status/1345644182224814085)



[Observable notebook](https://observablehq.com/@rreusser/multiscale-turing-patterns-in-webgl)



---

* Animated generative patterns by @0xca0a



`r3f` `postprocessing` `ssao` `animation` `perlin`



   [![Tweet](https://img.shields.io/twitter/url/http/shields.io.svg?style=social)](https://twitter.com/0xca0a/status/1345737612024295424)

   [![CodeSandbox](https://img.shields.io/badge/Open%20in-CodeSandbox-blue?style=flat-square&logo=codesandbox)](https://codesandbox.io/s/perlin-cubes-forked-w9myx)



---

* PBR texture with reflection pipeline by @mlperego



`r3f` `postprocessing` `pass pipeline` `shader` `PBR texture`



   [![Tweet](https://img.shields.io/twitter/url/http/shields.io.svg?style=social)](https://twitter.com/mlperego/status/1344349221835698179)

   [![CodeSandbox](https://img.shields.io/badge/Open%20in-CodeSandbox-blue?style=flat-square&logo=codesandbox)](https://vn56b.csb.app/)



---

* Template for ray marching shaders by @The_ArtOfCode



`webgl` `shader` `raymarching`



[Shadertoy](https://www.shadertoy.com/view/WtGXDD)



---

* Curve Motion by @the_ross_man



`r3f` `curve modifier` `torusknot`



   [![Tweet](https://img.shields.io/twitter/url/http/shields.io.svg?style=social)](https://twitter.com/the_ross_man/status/1343952509807849472)

   [![CodeSandbox](https://img.shields.io/badge/Open%20in-CodeSandbox-blue?style=flat-square&logo=codesandbox)](https://e0res.csb.app/)



---

* Envoriment Reflection by @0xca0a



`r3f` `hdri` `reflection`



   [![Tweet](https://img.shields.io/twitter/url/http/shields.io.svg?style=social)](https://twitter.com/0xca0a/status/1343355005911392257)

   [![CodeSandbox](https://img.shields.io/badge/Open%20in-CodeSandbox-blue?style=flat-square&logo=codesandbox)](https://codesandbox.io/s/flakes-grading-wvgxp)



---

* Truchet Grid Inversion by @pjkarlik 



`shader` `raymarching` `inversion` `tuchet`



  [![Tweet](https://img.shields.io/twitter/url/http/shields.io.svg?style=social)](https://twitter.com/Shadertoy/status/1343647195111673857)



[Shadertoy](https://www.shadertoy.com/view/wl3yDn)



--- 

* Generative Baubeles by @thespite 



`webgl2` `three.js` `shader pass`

   

   [![Tweet](https://img.shields.io/twitter/url/http/shields.io.svg?style=social)](https://twitter.com/thespite/status/1342532096355676161)

   [![](https://img.shields.io/github/stars/spite/baubles?style=social&label=Github)](https://github.com/spite/baubles)

   

[Playground](https://spite.github.io/baubles/)



---

*  Torusknot rotation by @the_ross_man



`r3f` `torusknot` 



   [![Tweet](https://img.shields.io/twitter/url/http/shields.io.svg?style=social)](https://twitter.com/the_ross_man/status/1343093438649151488)

   [![CodeSandbox](https://img.shields.io/badge/Open%20in-CodeSandbox-blue?style=flat-square&logo=codesandbox)](https://zc41e.csb.app/)



---

* Chemical reaction simulation by @jasonwebb



`three.js` `data texture` `fragment shader` `reaction-diffusion model`



   [![Tweet](https://img.shields.io/twitter/url/http/shields.io.svg?style=social)](https://twitter.com/jasonwebb/status/1341182678922457089)

[![](https://img.shields.io/github/stars/jasonwebb/reaction-diffusion-playground?style=social&label=Github)](https://github.com/jasonwebb/reaction-diffusion-playground)



[Playground](https://jasonwebb.github.io/reaction-diffusion-playground/app.html)



---

* Procedurally-generated patterns by @matt_zucker 



`shader` `raymarch` `polyhedron`



   [![Tweet](https://img.shields.io/twitter/url/http/shields.io.svg?style=social)](https://twitter.com/matt_zucker/status/1340313802487820288)



[Shadertoy](https://shadertoy.com/view/wsGfD3)



---

* Points Animation by @the_ross_man



`shader` `r3f` `postprocessing`



   [![Tweet](https://img.shields.io/twitter/url/http/shields.io.svg?style=social)](https://twitter.com/the_ross_man/status/1331869039593988096)

[![](https://img.shields.io/github/stars/mattrossman/breathing-dots-tutorial?style=social&label=Github)](https://github.com/mattrossman/breathing-dots-tutorial.git)



[Codrops Tutorial](https://tympanus.net/codrops/2020/12/17/recreating-a-dave-whyte-animation-in-react-three-fiber/) 



---



* UI Animation by @the_ross_man



`r3f` `react-spring` 



  [![Tweet](https://img.shields.io/twitter/url/http/shields.io.svg?style=social)](https://twitter.com/the_ross_man/status/1337853544658046983)

[![CodeSandbox](https://img.shields.io/badge/Open%20in-CodeSandbox-blue?style=flat-square&logo=codesandbox)](https://v6lg3.csb.app/)



---



* Image Pixelation by @mlperego



`r3f` `postprocessing` `text`



  [![Tweet](https://img.shields.io/twitter/url/http/shields.io.svg?style=social)](https://twitter.com/mlperego/status/1338950170583719936)

[![CodeSandbox](https://img.shields.io/badge/Open%20in-CodeSandbox-blue?style=flat-square&logo=codesandbox)](https://n4py8.csb.app/)



---

* r3f next starter by @onirenaud



`r3f` `next.js`



  [![Tweet](https://img.shields.io/twitter/url/http/shields.io.svg?style=social)](https://twitter.com/onirenaud/status/1338041518465056772)

[![](https://img.shields.io/github/stars/RenaudRohlinger/r3f-next-starter?style=social&label=Github)](https://github.com/RenaudRohlinger/r3f-next-starter)