{"id":28169830,"url":"https://github.com/zavalit/awesome-3d-web","last_synced_at":"2026-01-24T22:07:07.714Z","repository":{"id":73843690,"uuid":"322596820","full_name":"zavalit/awesome-3d-web","owner":"zavalit","description":"list of inspirational resources to get hands on","archived":false,"fork":false,"pushed_at":"2021-06-02T09:19:30.000Z","size":10,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-10-30T17:40:32.632Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":null,"has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/zavalit.png","metadata":{"files":{"readme":"Readme.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2020-12-18T13:02:29.000Z","updated_at":"2023-03-25T07:21:04.000Z","dependencies_parsed_at":"2024-01-13T14:44:56.350Z","dependency_job_id":"e33c86ea-ae9b-4fec-adaa-3457916c6c6e","html_url":"https://github.com/zavalit/awesome-3d-web","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/zavalit/awesome-3d-web","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zavalit%2Fawesome-3d-web","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zavalit%2Fawesome-3d-web/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zavalit%2Fawesome-3d-web/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zavalit%2Fawesome-3d-web/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/zavalit","download_url":"https://codeload.github.com/zavalit/awesome-3d-web/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zavalit%2Fawesome-3d-web/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28737942,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-24T21:19:41.845Z","status":"ssl_error","status_checked_at":"2026-01-24T21:13:38.675Z","response_time":89,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2025-05-15T16:18:50.060Z","updated_at":"2026-01-24T22:07:07.697Z","avatar_url":"https://github.com/zavalit.png","language":null,"funding_links":[],"categories":[],"sub_categories":[],"readme":"# Awesome 3d Web\n\nA list of resources to take a look at if you want to try some awesome 3D in Web.\n\n\n\n---\n* `glsl` `shader` by @i_dianov\n\n[![Tweet](https://img.shields.io/twitter/url/http/shields.io.svg?style=social)](https://twitter.com/i_dianov/status/1399054382465966080)\n\n[https://twigl.app/](https://bit.ly/2SBRNai)\n\n\n---\n*\n\n`r3f` `soft particles` `instanced mesh` `depth buffer` by @ggsimm\n\n\n[![Tweet](https://img.shields.io/twitter/url/http/shields.io.svg?style=social)]\n(https://twitter.com/ggsimm/status/1390017555612512257)\n[![CodeSandbox](https://img.shields.io/badge/Open%20in-CodeSandbox-blue?style=flat-square\u0026logo=codesandbox)](https://codesandbox.io/s/r3f-soft-particles-926t0)   \n\n\n---\n* bubbles by @stivaliserna\n\n`three.js` `raycaster`\n\n\n[![Tweet](https://img.shields.io/twitter/url/http/shields.io.svg?style=social)](https://twitter.com/stivaliserna/status/1366161119765819394)\n\n[Codepen](https://codepen.io/stivaliserna/pen/GRNxGrR)\n\n---\n* WebGLBlobs by @marioecg\n\n`webgl` `shader` `vertex displacement`\n\n[![Tweet](https://img.shields.io/twitter/url/http/shields.io.svg?style=social)](https://twitter.com/marioecg/status/1354109672429654023)\n   [![](https://img.shields.io/github/stars/codrops/WebGLBlobs?style=social\u0026label=Github)](https://github.com/codrops/WebGLBlobs/)\n\n\n---\n* Rotating shapes by @akella\n\n`webgl` `shaders` `rotation`\n\n\n   [![Tweet](https://img.shields.io/twitter/url/http/shields.io.svg?style=social)](https://mobile.twitter.com/codrops/status/1356958704919314437)\n   [![](https://img.shields.io/github/stars/akella/RotatingShapes?style=social\u0026label=Github)](https://github.com/akella/RotatingShapes/)\n\n\n\n---\n* Explosion by @0xca0a\n\n`r3f` `reflection` `audio` \n\n   [![Tweet](https://img.shields.io/twitter/url/http/shields.io.svg?style=social)](https://twitter.com/0xca0a/status/1357346054635544584)\n[![CodeSandbox](https://img.shields.io/badge/Open%20in-CodeSandbox-blue?style=flat-square\u0026logo=codesandbox)](https://codesandbox.io/s/sound-test-dvokj)   \n\n\n\n---\n* Selfie Girl by @iquilezles\n\n\n`sign distance function` `raymarching` `min function` `cubic polynomial` `line segment` `smooth step function` `gradient vector`\n\n[![Tweet](https://img.shields.io/twitter/url/http/shields.io.svg?style=social)](https://twitter.com/iquilezles/status/1332491882027384832)\n\n[Shadertoy](https://www.shadertoy.com/view/WsSBzh)\n\n[Youtube](https://www.youtube.com/watch?v=8--5LwHRhjk)\n\n\n---\n* Transmission materials and Physics @0xca0a\n\n`r3f` `postprocessing` `transmission` `shader` `physics`\n\n   [![Tweet](https://img.shields.io/twitter/url/http/shields.io.svg?style=social)](https://twitter.com/0xca0a/status/1348325348690317319)\n[![CodeSandbox](https://img.shields.io/badge/Open%20in-CodeSandbox-blue?style=flat-square\u0026logo=codesandbox)](https://codesandbox.io/s/r3f-ibl-envmap-simple-6ebrr)   \n\n\n---\n* Game starter by @simonghales\n\n`r3f` `game`\n\n\n   [![Tweet](https://img.shields.io/twitter/url/http/shields.io.svg?style=social)](https://twitter.com/simonghales/status/1347099945971564549)\n[![](https://img.shields.io/github/stars/simonghales/react-three-game-starter?style=social\u0026label=Github)](https://github.com/simonghales/react-three-game-starter)\n\n\n\n\n---\n* Animated hologen postproceessing by @mlperego\n\n`r3f` `postprocessing` `displacementMap` `glich` `depth texture`\n\n   [![Tweet](https://img.shields.io/twitter/url/http/shields.io.svg?style=social)](https://twitter.com/mlperego/status/1347616281638432770)\n[![CodeSandbox](https://img.shields.io/badge/Open%20in-CodeSandbox-blue?style=flat-square\u0026logo=codesandbox)](https://codesandbox.io/s/gwmd3)   \n\n\n\n---\n* Cross fading opacity by @davidbismut\n\n`r3f` `react-spring` `ScreenQuad` `FXAA`\n\n   [![Tweet](https://img.shields.io/twitter/url/http/shields.io.svg?style=social)](https://twitter.com/davidbismut/status/1347910911311405058)\n[![CodeSandbox](https://img.shields.io/badge/Open%20in-CodeSandbox-blue?style=flat-square\u0026logo=codesandbox)](https://xm76k.csb.app/)   \n\n---\n* Animatied mesh distort material from @0xca0a\n\n`r3f` `react-spring` `svg` `MeshDistortMaterial`\n\n   [![Tweet](https://img.shields.io/twitter/url/http/shields.io.svg?style=social)](https://twitter.com/0xca0a/status/1347490916685254656)\n   [![CodeSandbox](https://img.shields.io/badge/Open%20in-CodeSandbox-blue?style=flat-square\u0026logo=codesandbox)](https://codesandbox.io/s/charming-ritchie-5oufp)\n\n\n--- \n* Cornell Box by @Domenico_brz\n\n`three.js` `raymarching` `sspt` `svgf denoise` `cornellbox`\n\n\n   [![Tweet](https://img.shields.io/twitter/url/http/shields.io.svg?style=social)](https://twitter.com/Domenico_brz/status/1347983328083927042)\n   [![](https://img.shields.io/github/stars/Domenicobrz/SSPT-in-threejs?style=social\u0026label=Github)](https://github.com/Domenicobrz/SSPT-in-threejs)\n\n\n---\n* Multiscale Turing Patterns in WebGL by @rickyreusser\n\n`webgl` `turing clouds` `Fast Fourier Transform`\n\n   [![Tweet](https://img.shields.io/twitter/url/http/shields.io.svg?style=social)](https://twitter.com/rickyreusser/status/1345644182224814085)\n\n[Observable notebook](https://observablehq.com/@rreusser/multiscale-turing-patterns-in-webgl)\n\n\n---\n* Animated generative patterns by @0xca0a\n\n`r3f` `postprocessing` `ssao` `animation` `perlin`\n\n   [![Tweet](https://img.shields.io/twitter/url/http/shields.io.svg?style=social)](https://twitter.com/0xca0a/status/1345737612024295424)\n   [![CodeSandbox](https://img.shields.io/badge/Open%20in-CodeSandbox-blue?style=flat-square\u0026logo=codesandbox)](https://codesandbox.io/s/perlin-cubes-forked-w9myx)\n\n\n\n---\n* PBR texture with reflection pipeline by @mlperego\n\n`r3f` `postprocessing` `pass pipeline` `shader` `PBR texture`\n\n   [![Tweet](https://img.shields.io/twitter/url/http/shields.io.svg?style=social)](https://twitter.com/mlperego/status/1344349221835698179)\n   [![CodeSandbox](https://img.shields.io/badge/Open%20in-CodeSandbox-blue?style=flat-square\u0026logo=codesandbox)](https://vn56b.csb.app/)\n\n\n---\n* Template for ray marching shaders by @The_ArtOfCode\n\n`webgl` `shader` `raymarching`\n\n[Shadertoy](https://www.shadertoy.com/view/WtGXDD)\n\n---\n* Curve Motion by @the_ross_man\n\n`r3f` `curve modifier` `torusknot`\n\n   [![Tweet](https://img.shields.io/twitter/url/http/shields.io.svg?style=social)](https://twitter.com/the_ross_man/status/1343952509807849472)\n   [![CodeSandbox](https://img.shields.io/badge/Open%20in-CodeSandbox-blue?style=flat-square\u0026logo=codesandbox)](https://e0res.csb.app/)\n\n\n---\n* Envoriment Reflection by @0xca0a\n\n`r3f` `hdri` `reflection`\n\n   [![Tweet](https://img.shields.io/twitter/url/http/shields.io.svg?style=social)](https://twitter.com/0xca0a/status/1343355005911392257)\n   [![CodeSandbox](https://img.shields.io/badge/Open%20in-CodeSandbox-blue?style=flat-square\u0026logo=codesandbox)](https://codesandbox.io/s/flakes-grading-wvgxp)\n\n\n---\n* Truchet Grid Inversion by @pjkarlik \n\n`shader` `raymarching` `inversion` `tuchet`\n\n  [![Tweet](https://img.shields.io/twitter/url/http/shields.io.svg?style=social)](https://twitter.com/Shadertoy/status/1343647195111673857)\n\n[Shadertoy](https://www.shadertoy.com/view/wl3yDn)\n\n--- \n* Generative Baubeles by @thespite \n\n`webgl2` `three.js` `shader pass`\n   \n   [![Tweet](https://img.shields.io/twitter/url/http/shields.io.svg?style=social)](https://twitter.com/thespite/status/1342532096355676161)\n   [![](https://img.shields.io/github/stars/spite/baubles?style=social\u0026label=Github)](https://github.com/spite/baubles)\n   \n[Playground](https://spite.github.io/baubles/)\n\n---\n*  Torusknot rotation by @the_ross_man\n\n`r3f` `torusknot` \n\n   [![Tweet](https://img.shields.io/twitter/url/http/shields.io.svg?style=social)](https://twitter.com/the_ross_man/status/1343093438649151488)\n   [![CodeSandbox](https://img.shields.io/badge/Open%20in-CodeSandbox-blue?style=flat-square\u0026logo=codesandbox)](https://zc41e.csb.app/)\n\n---\n* Chemical reaction simulation by @jasonwebb\n\n`three.js` `data texture` `fragment shader` `reaction-diffusion model`\n\n   [![Tweet](https://img.shields.io/twitter/url/http/shields.io.svg?style=social)](https://twitter.com/jasonwebb/status/1341182678922457089)\n[![](https://img.shields.io/github/stars/jasonwebb/reaction-diffusion-playground?style=social\u0026label=Github)](https://github.com/jasonwebb/reaction-diffusion-playground)\n\n[Playground](https://jasonwebb.github.io/reaction-diffusion-playground/app.html)\n\n\n\n---\n* Procedurally-generated patterns by @matt_zucker \n\n`shader` `raymarch` `polyhedron`\n\n   [![Tweet](https://img.shields.io/twitter/url/http/shields.io.svg?style=social)](https://twitter.com/matt_zucker/status/1340313802487820288)\n\n[Shadertoy](https://shadertoy.com/view/wsGfD3)\n\n\n\n---\n* Points Animation by @the_ross_man\n\n`shader` `r3f` `postprocessing`\n\n   [![Tweet](https://img.shields.io/twitter/url/http/shields.io.svg?style=social)](https://twitter.com/the_ross_man/status/1331869039593988096)\n[![](https://img.shields.io/github/stars/mattrossman/breathing-dots-tutorial?style=social\u0026label=Github)](https://github.com/mattrossman/breathing-dots-tutorial.git)\n\n[Codrops Tutorial](https://tympanus.net/codrops/2020/12/17/recreating-a-dave-whyte-animation-in-react-three-fiber/) \n\n\n\n---\n\n* UI Animation by @the_ross_man\n\n`r3f` `react-spring` \n\n  [![Tweet](https://img.shields.io/twitter/url/http/shields.io.svg?style=social)](https://twitter.com/the_ross_man/status/1337853544658046983)\n[![CodeSandbox](https://img.shields.io/badge/Open%20in-CodeSandbox-blue?style=flat-square\u0026logo=codesandbox)](https://v6lg3.csb.app/)\n\n---\n\n* Image Pixelation by @mlperego\n\n`r3f` `postprocessing` `text`\n\n  [![Tweet](https://img.shields.io/twitter/url/http/shields.io.svg?style=social)](https://twitter.com/mlperego/status/1338950170583719936)\n[![CodeSandbox](https://img.shields.io/badge/Open%20in-CodeSandbox-blue?style=flat-square\u0026logo=codesandbox)](https://n4py8.csb.app/)\n\n\n---\n* r3f next starter by @onirenaud\n\n`r3f` `next.js`\n\n  [![Tweet](https://img.shields.io/twitter/url/http/shields.io.svg?style=social)](https://twitter.com/onirenaud/status/1338041518465056772)\n[![](https://img.shields.io/github/stars/RenaudRohlinger/r3f-next-starter?style=social\u0026label=Github)](https://github.com/RenaudRohlinger/r3f-next-starter)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzavalit%2Fawesome-3d-web","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fzavalit%2Fawesome-3d-web","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzavalit%2Fawesome-3d-web/lists"}