├── CONTRIBUTING.md ├── LICENSE └── README.md /CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | # Contribution Guidelines 2 | 3 | ## Adding a link to the list 4 | 5 | If you'd like to contribute a link or multiple links to this list, submit a pull request and it will be reviewed as soon as possible. 6 | 7 | Please try to keep with the style of the other list entries 8 | 9 | `[Site](URL) - Description` 10 | 11 | Feel free to leave an issue if you have any questions or concerns about the list you feel might warrant some discussion (removal of certain entries, new categories, etc). 12 | This includes the contribution guidelines themselves. 13 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | Creative Commons Legal Code 2 | 3 | CC0 1.0 Universal 4 | 5 | CREATIVE COMMONS CORPORATION IS NOT A LAW FIRM AND DOES NOT PROVIDE 6 | LEGAL SERVICES. DISTRIBUTION OF THIS DOCUMENT DOES NOT CREATE AN 7 | ATTORNEY-CLIENT RELATIONSHIP. CREATIVE COMMONS PROVIDES THIS 8 | INFORMATION ON AN "AS-IS" BASIS. CREATIVE COMMONS MAKES NO WARRANTIES 9 | REGARDING THE USE OF THIS DOCUMENT OR THE INFORMATION OR WORKS 10 | PROVIDED HEREUNDER, AND DISCLAIMS LIABILITY FOR DAMAGES RESULTING FROM 11 | THE USE OF THIS DOCUMENT OR THE INFORMATION OR WORKS PROVIDED 12 | HEREUNDER. 13 | 14 | Statement of Purpose 15 | 16 | The laws of most jurisdictions throughout the world automatically confer 17 | exclusive Copyright and Related Rights (defined below) upon the creator 18 | and subsequent owner(s) (each and all, an "owner") of an original work of 19 | authorship and/or a database (each, a "Work"). 20 | 21 | Certain owners wish to permanently relinquish those rights to a Work for 22 | the purpose of contributing to a commons of creative, cultural and 23 | scientific works ("Commons") that the public can reliably and without fear 24 | of later claims of infringement build upon, modify, incorporate in other 25 | works, reuse and redistribute as freely as possible in any form whatsoever 26 | and for any purposes, including without limitation commercial purposes. 27 | These owners may contribute to the Commons to promote the ideal of a free 28 | culture and the further production of creative, cultural and scientific 29 | works, or to gain reputation or greater distribution for their Work in 30 | part through the use and efforts of others. 31 | 32 | For these and/or other purposes and motivations, and without any 33 | expectation of additional consideration or compensation, the person 34 | associating CC0 with a Work (the "Affirmer"), to the extent that he or she 35 | is an owner of Copyright and Related Rights in the Work, voluntarily 36 | elects to apply CC0 to the Work and publicly distribute the Work under its 37 | terms, with knowledge of his or her Copyright and Related Rights in the 38 | Work and the meaning and intended legal effect of CC0 on those rights. 39 | 40 | 1. Copyright and Related Rights. A Work made available under CC0 may be 41 | protected by copyright and related or neighboring rights ("Copyright and 42 | Related Rights"). Copyright and Related Rights include, but are not 43 | limited to, the following: 44 | 45 | i. the right to reproduce, adapt, distribute, perform, display, 46 | communicate, and translate a Work; 47 | ii. moral rights retained by the original author(s) and/or performer(s); 48 | iii. publicity and privacy rights pertaining to a person's image or 49 | likeness depicted in a Work; 50 | iv. rights protecting against unfair competition in regards to a Work, 51 | subject to the limitations in paragraph 4(a), below; 52 | v. rights protecting the extraction, dissemination, use and reuse of data 53 | in a Work; 54 | vi. database rights (such as those arising under Directive 96/9/EC of the 55 | European Parliament and of the Council of 11 March 1996 on the legal 56 | protection of databases, and under any national implementation 57 | thereof, including any amended or successor version of such 58 | directive); and 59 | vii. other similar, equivalent or corresponding rights throughout the 60 | world based on applicable law or treaty, and any national 61 | implementations thereof. 62 | 63 | 2. Waiver. To the greatest extent permitted by, but not in contravention 64 | of, applicable law, Affirmer hereby overtly, fully, permanently, 65 | irrevocably and unconditionally waives, abandons, and surrenders all of 66 | Affirmer's Copyright and Related Rights and associated claims and causes 67 | of action, whether now known or unknown (including existing as well as 68 | future claims and causes of action), in the Work (i) in all territories 69 | worldwide, (ii) for the maximum duration provided by applicable law or 70 | treaty (including future time extensions), (iii) in any current or future 71 | medium and for any number of copies, and (iv) for any purpose whatsoever, 72 | including without limitation commercial, advertising or promotional 73 | purposes (the "Waiver"). Affirmer makes the Waiver for the benefit of each 74 | member of the public at large and to the detriment of Affirmer's heirs and 75 | successors, fully intending that such Waiver shall not be subject to 76 | revocation, rescission, cancellation, termination, or any other legal or 77 | equitable action to disrupt the quiet enjoyment of the Work by the public 78 | as contemplated by Affirmer's express Statement of Purpose. 79 | 80 | 3. Public License Fallback. Should any part of the Waiver for any reason 81 | be judged legally invalid or ineffective under applicable law, then the 82 | Waiver shall be preserved to the maximum extent permitted taking into 83 | account Affirmer's express Statement of Purpose. In addition, to the 84 | extent the Waiver is so judged Affirmer hereby grants to each affected 85 | person a royalty-free, non transferable, non sublicensable, non exclusive, 86 | irrevocable and unconditional license to exercise Affirmer's Copyright and 87 | Related Rights in the Work (i) in all territories worldwide, (ii) for the 88 | maximum duration provided by applicable law or treaty (including future 89 | time extensions), (iii) in any current or future medium and for any number 90 | of copies, and (iv) for any purpose whatsoever, including without 91 | limitation commercial, advertising or promotional purposes (the 92 | "License"). The License shall be deemed effective as of the date CC0 was 93 | applied by Affirmer to the Work. Should any part of the License for any 94 | reason be judged legally invalid or ineffective under applicable law, such 95 | partial invalidity or ineffectiveness shall not invalidate the remainder 96 | of the License, and in such case Affirmer hereby affirms that he or she 97 | will not (i) exercise any of his or her remaining Copyright and Related 98 | Rights in the Work or (ii) assert any associated claims and causes of 99 | action with respect to the Work, in either case contrary to Affirmer's 100 | express Statement of Purpose. 101 | 102 | 4. Limitations and Disclaimers. 103 | 104 | a. No trademark or patent rights held by Affirmer are waived, abandoned, 105 | surrendered, licensed or otherwise affected by this document. 106 | b. Affirmer offers the Work as-is and makes no representations or 107 | warranties of any kind concerning the Work, express, implied, 108 | statutory or otherwise, including without limitation warranties of 109 | title, merchantability, fitness for a particular purpose, non 110 | infringement, or the absence of latent or other defects, accuracy, or 111 | the present or absence of errors, whether or not discoverable, all to 112 | the greatest extent permissible under applicable law. 113 | c. Affirmer disclaims responsibility for clearing rights of other persons 114 | that may apply to the Work or any use thereof, including without 115 | limitation any person's Copyright and Related Rights in the Work. 116 | Further, Affirmer disclaims responsibility for obtaining any necessary 117 | consents, permissions or other rights required for any use of the 118 | Work. 119 | d. Affirmer understands and acknowledges that Creative Commons is not a 120 | party to this document and has no duty or obligation with respect to 121 | this CC0 or use of the Work. 122 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Awesome WebXR Development [![Awesome](https://awesome.re/badge.svg)](https://awesome.re) 2 | 3 | 4 | ## Contents 5 | 6 | 7 | 8 | - [Engine / Framework](#engine--framework) 9 | - [General 3D Rendering Engine](#general-3d-rendering-engine) 10 | - [General 3D App Framework](#general-3d-app-framework) 11 | - [3D Game Engine](#3d-game-engine) 12 | - [Visual Editor](#visual-editor) 13 | - [State Management](#state-management) 14 | - [Utilities](#utilities) 15 | - [Interaction](#interaction) 16 | - [XR Interaction](#xr-interaction) 17 | - [Desktop Interaction](#desktop-interaction) 18 | - [Mobile Interaction](#mobile-interaction) 19 | - [2D GUI](#2d-gui) 20 | - [Layout](#layout) 21 | - [HTML Layout](#html-layout) 22 | - [Form](#form) 23 | - [Image & Text](#image--text) 24 | - [Animation](#animation) 25 | - [Skeleton Animation](#skeleton-animation) 26 | - [Visual Animation Editor](#visual-animation-editor) 27 | - [Particle System](#particle-system) 28 | - [Physics Engine](#physics-engine) 29 | - [Gameplay](#gameplay) 30 | - [Graphics](#graphics) 31 | - [Optimization](#optimization) 32 | - [Post Processing](#post-processing) 33 | - [Material / Shader](#material--shader) 34 | - [Visual Shader Editor](#visual-shader-editor) 35 | - [Assets](#assets) 36 | - [GLTF & KTX2](#gltf--ktx2) 37 | - [USD](#usd) 38 | - [Avatar](#avatar) 39 | - [Audio](#audio) 40 | - [Debug](#debug) 41 | - [Learning Resources](#learning-resources) 42 | - [WebXR](#webxr) 43 | - [Case Studies](#case-studies) 44 | - [Performance Optimization](#performance-optimization) 45 | - [3D Engine / Framework](#3d-engine--framework) 46 | - [Graphics API, Computer Graphics](#graphics-api-computer-graphics) 47 | - [Game](#game) 48 | 49 | 50 | 51 | ## Engine / Framework 52 | 53 | ### General 3D Rendering Engine 54 | 55 | - [Three.js](https://threejs.org/) ![][threejs-badge] - An easy to use, lightweight, cross-browser, general purpose 3D library. The current builds only include a WebGL renderer but WebGPU (experimental), SVG and CSS3D renderers are also available as addons 56 | - [React Three Fiber (R3F)](https://docs.pmnd.rs/react-three-fiber/) ![][threejs-badge] ![][r3f-badge] - A React renderer for three.js. Build your scene declaratively with re-usable, self-contained components that react to state, are readily interactive and can participate in React's ecosystem 57 | - [Use.GPU](https://usegpu.live/) ![][webgpu-badge] - A set of declarative, reactive WebGPU legos. A stand-alone Typescript+Rust/WASM library with its own React-like run-time 58 | - [Simple-GPU](https://github.com/stackgpu/Simple-GPU) ![][webgpu-badge] - Functional WebGPU. Replaces the WebGPU API with two fundamental abstractions, resources and commands 59 | 60 | Three.js Boilerplates: 61 | 62 | - [threejs-template-simple](https://github.com/brunosimon/threejs-template-simple) ![][threejs-badge] 63 | - [threejs-andy-boilerplate](https://github.com/ektogamat/threejs-andy-boilerplate) ![][threejs-badge] - Very simple threejs boilerplate in VanillaJS to start your projects. There is only a basic scene, a load model method and a simple webpack 64 | 65 | Three.js + Vite Boilerplates: 66 | 67 | - [threejs-template-complex](https://github.com/brunosimon/threejs-template-complex) ![][threejs-badge] 68 | 69 | ### General 3D App Framework 70 | 71 | - [React Three](https://docs.pmnd.rs/) ![][threejs-badge] ![][r3f-badge] - A vibrant and extensive eco system around three-fiber, full of libraries, helpers and abstractions 72 | - [Babylon.js](https://www.babylonjs.com/) ![][babylon-badge] ![][webgpu-badge] - A powerful, beautiful, simple, and open game and rendering engine packed into a friendly JavaScript framework 73 | - [A-Frame](https://aframe.io/) ![][threejs-badge] ![][aframe-badge] - A web framework for building 3D/AR/VR experiences. Make 3D worlds with HTML and Entity-Component On any headset, mobile and desktop 74 | - [ion Engine](https://ion-3d-engine.io/) ![][threejs-badge] - A Javascript library for building 3D websites and virtual reality experiences. Supports creating interactive user interfaces for WebGL and WebXR projects using HTML/CSS/JS 75 | - [Elixr](https://elixrjs.io/) ![][threejs-badge] - A lightweight and flexible framework for building WebXR experiences. Built on top of three.js, Rapier physics engine and [ECSY](https://ecsyjs.github.io/ecsy/) 76 | 77 | React Three + Next.js Boilerplates: 78 | 79 | - [React Three Next](https://github.com/pmndrs/react-three-next) ![][r3f-badge] - A minimalist starter for Next.js, React Three Fiber and Three.js (and Tailwind and Styled-components) 80 | 81 | React Three Boilerplates: 82 | 83 | - [create-r3f-app](https://github.com/utsuboco/create-r3f-app) ![][r3f-badge] 84 | - [r3f-project-boilerplate](https://github.com/Ctrlmonster/r3f-project-boilerplate) ![][r3f-badge] - a simple boilerplate project for react three fiber projects with Typescript, TailwindCSS and Vite 85 | 86 | A-Frame Boilerplates: 87 | 88 | - [xr-starter-kit](https://github.com/AdaRoseCannon/aframe-xr-boilerplate) ![][aframe-badge] 89 | 90 | ### 3D Game Engine 91 | 92 | - [PlayCanvas](https://playcanvas.com/) ![][webgpu-badge] - The web-first game engine. A visual development platform for interactive web content 93 | - [Wonderland Engine](https://wonderlandengine.com/) ![][wasm-badge] - Development Platform 94 | for VR & AR Web Apps 95 | - [Ethereal Engine](https://www.etherealengine.com/) ![][threejs-badge] - Metaverse infrastructure for everyone. Everything you need to build and deploy scalable realtime 3D social apps and more 96 | - [Phy](https://github.com/lo-th/phy) ![][threejs-badge] - Phy simplify creation of game, is like a bridge between three.js and physics. Phy support last version of Oimo and Ammo. Now full support of two best engine Physx and Havok 97 | - [Lattice](https://github.com/unavi-xyz/lattice) - A lightweight, modular, and extendable 3D game engine built for the web. The engine is also highly performant, with speed gains from the ECS architecture and multi-threading via WebWorkers that would be difficult to achieve when using these libraries individually 98 | 99 | ### Visual Editor 100 | 101 | - [Polygon.js](https://polygonjs.com/) ![][threejs-badge] ![][r3f-badge] - Node-Based Design & Animation Tool for the Web 102 | - [Rogue Engine](https://rogueengine.io/) ![][threejs-badge] - A Unity3D-like environment to create WebXR enabled apps and games for the browser with three.js 103 | - [Needle Engine](https://needle.tools/) ![][threejs-badge] ![][unity-badge] - Needle Engine is a web-based runtime for 3D apps. Needle Exporter for Unity bridges the Unity Editor and the web runtime. Together, they enable incredible iteration speeds and help you to bring your content to the web 104 | - [Triplex](https://triplex.dev/) ![][r3f-badge] - Visually edit React Three Fiber components where code is source of truth 105 | - [react-three-editor](https://github.com/pmndrs/react-three-editor) ![][r3f-badge] - A one of a kind scene editor that writes changes back into your code, and you don't need to change your code at all for it to to work! 106 | - [Babylon.js Editor](https://editor.babylonjs.com/) ![][babylon-badge] - Provide community-driven powerful and simple tools that help Babylon.JS users to create beautiful, awesome 3D games / applications 107 | - [Theatre.js](https://www.theatrejs.com/) ![][threejs-badge] ![][r3f-badge] - Most of its users are using it as a visual editor now, than an animation editor 108 | - [Threed Studio](https://threed.world/) ![][threejs-badge] - A 3D animation editor with a set of design, lighting and motion tools. It helps you create any 3D scene, from a simple product presentation to a complete game made with Three.js 109 | 110 | ## State Management 111 | 112 | - [bitECS](https://github.com/NateTheGreatt/bitECS) - Functional, minimal, data-oriented, ultra-high performance ECS library written using JavaScript TypedArrays 113 | - [Miniplex](https://github.com/hmans/miniplex) - A developer-friendly entity management system for games and similarly demanding applications, based on ECS architecture 114 | - [Becsy](https://lastolivegames.github.io/becsy/) - Multi-threaded ECS for TypeScript and JavaScript 115 | - [XState](https://xstate.js.org/) - JavaScript and TypeScript finite state machines and statecharts for the modern web 116 | - [Zustand](https://github.com/pmndrs/zustand) ![][r3f-badge] - A small, fast and scalable bearbones state-management solution using simplified flux principles. Has a comfy API based on hooks, isn't boilerplatey or opinionated 117 | - [Jotai](https://github.com/pmndrs/jotai) ![][r3f-badge] - Primitive and flexible state management for React. Scales from a simple useState replacement to an enterprise TypeScript application 118 | - [Valtio](https://github.com/pmndrs/valtio) ![][r3f-badge] - Makes proxy-state simple for React and Vanilla 119 | 120 | ## Utilities 121 | 122 | - [three-stdlib](https://github.com/pmndrs/three-stdlib) ![][r3f-badge] - Stand-alone version of threejs/examples/jsm written in Typescript & built for ESM & CJS. Designed to run without transpilation in node & browser 123 | - [Drei](https://github.com/pmndrs/drei) ![][r3f-badge] - A growing collection of useful helpers and fully functional, ready-made abstractions for @react-three/fiber 124 | 125 | ## Interaction 126 | 127 | ### XR Interaction 128 | 129 | - [@coconut-xr/natuerlich](https://github.com/coconut-xr/natuerlich) ![][r3f-badge] - WebXR Interaction library. Deliver composable and extensible interactions for immersive experiences 130 | - [@react-three/xr](https://github.com/pmndrs/react-xr) ![][r3f-badge] - React components and hooks for creating VR/AR applications with @react-three/fiber 131 | - [Reality Accelerator Toolkit (RATK)](https://github.com/meta-quest/reality-accelerator-toolkit) ![][threejs-badge] - A WebXR utilities library designed to simplify the integration of Mixed Reality features in WebXR apps. It is currently compatible with the three.js 3D library and aims to bridge the gap between low-level WebXR APIs and higher-level APIs provided by three.js 132 | - [XRKeys](https://github.com/felixtrz/xrkeys) ![][threejs-badge] - A highly performant and plug-and-play WebXR keyboard library for Three.js applications 133 | - [Handy.js](https://stewartsmith.io/handy/) - Makes defining and recognizing custom hand poses in WebXR a snap 134 | 135 | ### Desktop Interaction 136 | 137 | - [Drei](https://github.com/pmndrs/drei) - [KeyboardControls](https://github.com/pmndrs/drei#keyboardcontrols) ![][r3f-badge] - A rudimentary keyboard controller which distributes your defined data-model to the useKeyboard hook. It's a rather simple way to get started with keyboard input 138 | - [Drei](https://github.com/pmndrs/drei) - [PointerLockControls](https://github.com/pmndrs/drei#controls) ![][r3f-badge] 139 | - [Floating Capsule Character Controller](https://github.com/ErdongChen-Andrew/CharacterControl) ![][r3f-badge] - Rigibody control 140 | 141 | ### Mobile Interaction 142 | 143 | - [NippleJS](https://www.npmjs.com/package/nipplejs) - A vanilla virtual joystick for touch capable interfaces 144 | - [MeshWalk.js](https://github.com/yomotsu/meshwalk) ![][threejs-badge] - A JS library which helps your TPS game development with three.js 145 | 146 | ## 2D GUI 147 | 148 | ### Layout 149 | 150 | - [three-mesh-ui](https://felixmariotto.github.io/three-mesh-ui/) ![][threejs-badge] - A small library for building VR user interfaces. The objects it creates are three.object3Ds, usable directly in a three.js scene like any other Object3D. It is not a framework, but a minimalist library 151 | - [@coconut-xr/koestlich](https://coconut-xr.github.io/koestlich) ![][r3f-badge] - Builds on yoga (flexbox implementation), Three.js to deliver compatible and performant 3D UIs with out-of-the-box animations 152 | - [@react-three/flex](https://github.com/pmndrs/react-three-flex) ![][r3f-badge] - Brings the webs flexbox spec to react-three-fiber. It is based on Yoga, Facebook's open source layout engine for react-native 153 | 154 | ### HTML Layout 155 | - [@etherealengine/xrui](https://github.com/EtherealEngine/etherealengine/tree/dev/packages/xrui) ![][threejs-badge] - XRUI provides functionlity for using DOM elements to construct a user interface for XR applications 156 | - [Satori](https://github.com/vercel/satori) - Enlightened library to convert HTML and CSS to SVG 157 | - [html2canvas](https://html2canvas.hertzen.com/) - JavaScript HTML renderer. Allows you to take "screenshots" of webpages or parts of it, directly on the users browser 158 | - [HTMLMesh](https://github.com/mrdoob/three.js/blob/dev/examples/jsm/interactive/HTMLMesh.js) ![][threejs-badge] - [demo](https://threejs.org/examples/webxr_vr_sandbox.html) 159 | 160 | ### Form 161 | 162 | - [r3f-form](https://github.com/JMBeresford/r3f-form) ![][r3f-badge] - A webGL form component for use with React Three Fiber. Ultimately, the goal is to have fully functioning HTML `
`s -- with all viable input types -- rendered in webGL 163 | - [@coconut-xr/input](https://github.com/coconut-xr/input) ![][r3f-badge] - input fields for 3D UIs with @coconut-xr/koestlich 164 | 165 | ### Image & Text 166 | 167 | - [Drei](https://github.com/pmndrs/drei) - [Image](https://github.com/pmndrs/drei#image) ![][r3f-badge] - A shader-based image component with auto-cover (similar to css/background: cover) 168 | - [Drei](https://github.com/pmndrs/drei) - [Text](https://github.com/pmndrs/drei#text) ![][r3f-badge] - Hi-quality text rendering w/ signed distance fields (SDF) and antialiasing, using troika-3d-text. All of troikas props are valid! Text is suspense-based! 169 | - [troika-three-text](https://protectwise.github.io/troika/troika-three-text/) ![][threejs-badge] - Provides high quality text rendering in Three.js scenes, using signed distance fields (SDF) and antialiasing using standard derivatives 170 | - [troika-3d-text](https://github.com/protectwise/troika/tree/main/packages/troika-3d-text) ![][threejs-badge] - Provides high quality text rendering in the Troika scene management framework, using signed distance fields (SDF) and antialiasing using standard derivatives. It is based on troika-three-text 171 | 172 | ## Animation 173 | 174 | - [React Spring](https://www.react-spring.dev/) [+ R3F](https://docs.pmnd.rs/react-three-fiber/tutorials/using-with-react-spring) ![][r3f-badge] - A spring-physics first animation library. It works perfectly with React Three Fiber as it comes from the same maintainers and it also has exports created specifically for use with React Three Fiber 175 | - [Drei](https://github.com/pmndrs/drei) - [useAnimations](https://github.com/pmndrs/drei#useanimations) ![][r3f-badge] - A hook that abstracts Three.js's AnimationMixer (a player for animations on a particular object in the scene) 176 | - [Framer Motion 3D](https://www.framer.com/motion/three-introduction/) ![][r3f-badge] - A simple yet powerful animation library for React Three Fiber. It offers most of the same functionality as Framer Motion for declarative 3D scenes 177 | 178 | ### Skeleton Animation 179 | 180 | - [ossos](https://github.com/sketchpunklabs/ossos) - A complete character skinning & animation library for the web (with the IK Rig & IK Animations type system) 181 | 182 | ### Visual Animation Editor 183 | 184 | - [Theatre.js](https://www.theatrejs.com/) ![][threejs-badge] ![][r3f-badge] - A javascript animation library with a professional motion design toolset. It helps you create any animation, from cinematic scenes in THREE.js, to delightful UI interactions 185 | 186 | ## Particle System 187 | 188 | - [Three Quarks](https://quarks.art/) ![][threejs-badge] - The Fastest Real-Time Particle VFX Engine for Web Experiences For Games, VR, AR, and UX 189 | - [Three Nebula](https://three-nebula.org/) ![][threejs-badge] - A WebGL based 3D particle system engine for Three.js 190 | - [r3f-effekseer](https://github.com/Ctrlmonster/r3f-effekseer) ![][r3f-badge] - Provide React bindings for the WebGL + WASM runtime of Effekseer. Effekseer is a mature Particle Effect Creation Tool, which supports major game engines, is used in many commercial games, and includes its own free to use editor 191 | 192 | ## Physics Engine 193 | 194 | - [@react-three/rapier](https://github.com/pmndrs/react-three-rapier) ![][r3f-badge] ([Rapier](https://rapier.rs/) ![][rust-badge] ![][wasm-badge]) - A wrapper library around the Rapier (Fast 2D and 3D physics engine for the Rust) WASM-based physics engine, designed to slot seamlessly into a @react-three/fiber pipeline 195 | - [PhysX (physx-js-webidl)](https://github.com/fabmax/physx-js-webidl) - Javascript/WASM bindings for Nvidia PhysX based on emscripten/WebIDL 196 | - [Havok (@babylonjs/havok)](https://www.npmjs.com/package/@babylonjs/havok) - Havok is now available for the web, using a WebAssembly version of the engine. It is available, free to use, under the MIT license 197 | - [Jolt (JoltPhysics.js)](https://github.com/jrouwe/JoltPhysics.js) - Port of JoltPhysics to JavaScript using emscripten. Jolt Physics is a multi core friendly rigid body physics and collision detection library suitable for games and VR applications, used by Horizon Forbidden West 198 | - [use-cannon](https://github.com/pmndrs/use-cannon) ![][r3f-badge] ([cannon-es](https://github.com/pmndrs/cannon-es)) - React hooks for cannon-es (A lightweight 3D physics engine written in JavaScript). Use this in combination with @react-three/fiber 199 | - [Oimo.js ](https://github.com/lo-th/Oimo.js) ![][threejs-badge] - A lightweight 3d physics engine for JavaScript. It's a full javascript conversion of OimoPhysics (A lightweight 3D physics engine originally created for ActionScript 3.0) 200 | - [Enable3d](https://github.com/enable3d/enable3d) ![][threejs-badge] - Written in TypeScript, uses three.js and ammo.js, brings physics to your three.js project and the third dimension to your Phaser 3 game 201 | 202 | ## Gameplay 203 | 204 | - [three-pathfinding](https://github.com/donmccurdy/three-pathfinding) ![][threejs-badge] - Navigation mesh toolkit for ThreeJS, based on PatrolJS (helps your AI agents navigate around your world. It uses the A* and Funnel algorithms to calculate a path on a navigation mesh) 205 | - [recast-navigation-js](https://github.com/isaac-mason/recast-navigation-js) ![][threejs-badge] - A WebAssembly port of Recast Navigation (state of the art navigation mesh construction toolset for games) 206 | - [Yuka](https://mugen87.github.io/yuka/) - A JavaScript library for developing Game AI 207 | 208 | ## Graphics 209 | 210 | - [three-mesh-bvh](https://github.com/gkjohnson/three-mesh-bvh) ![][threejs-badge] - A BVH implementation to speed up raycasting and enable spatial queries against three.js meshes 211 | - [three-bvh-csg](https://github.com/gkjohnson/three-bvh-csg) ![][threejs-badge] - A flexible, memory compact, fast and dynamic CSG implementation on top of three-mesh-bvh 212 | - [@react-three/csg](https://github.com/pmndrs/react-three-csg) ![][r3f-badge] - Constructive solid geometry for React, a small abstraction around three-bvh-csg 213 | - [THREE.MeshLine](https://www.npmjs.com/package/three.meshline) ![][threejs-badge] - Mesh replacement for THREE.Line. Instead of using GL_LINE, it uses a strip of triangles billboarded 214 | 215 | ### Optimization 216 | 217 | - [react-three-offscreen](https://github.com/pmndrs/react-three-offscreen) ![][r3f-badge] - render your react-three-fiber scene with an offscreen canvas in a web worker 218 | 219 | ### Post Processing 220 | 221 | - [@react-three/postprocessing](https://github.com/pmndrs/react-postprocessing) ![][r3f-badge] - A postprocessing wrapper for @react-three/fiber. Save you hundreds of LOC for a straight forward effects-chain. It is faster than three/examples/jsm/effectcomposer, actively maintained, has better effects 222 | - [three.js Realism Effects](https://github.com/0beqz/realism-effects) ![][threejs-badge] - A collection of the following effects for three.js (SSGI, Motion Blur, TRAA, TAA, SVGF) 223 | - [three.js Screen Space Reflections](https://github.com/0beqz/screen-space-reflections) ![][threejs-badge] - Implements performant Screen Space Reflections in three.js 224 | - [N8AO](https://n8python.github.io/n8ao/) (SSAO) ![][threejs-badge] - An efficient and visually pleasing implementation of SSAO with an emphasis on temporal stability and artist control 225 | - [R3F-Ultimate-Lens-Flare](https://ultimate-lens-flare.vercel.app/) ![][r3f-badge] - A EffectComposer Effect (Lens Flare) for React Three Post Processing. Adds the optical aberration caused by the dispersion of light entering the lens through its edges 226 | 227 | ## Material / Shader 228 | 229 | - [Drei](https://github.com/pmndrs/drei) - [Shader](https://github.com/pmndrs/drei#shaders) ![][r3f-badge] - Easily add reflections and/or blur to any mesh. It takes surface roughness into account for a more realistic effect. This material extends from THREE.MeshStandardMaterial and accepts all its props 230 | - [enhanceShaderLighting](https://github.com/0beqz/enhance-shader-lighting) ![][threejs-badge] - Better lighting in three.js. Make your PBR material look more realistic. Give the user a lot of options to tweak lighting so that a certain combination of settings will give a decent looking result 231 | - [Custom Shader Material (CSM)](https://github.com/FarazzShaikh/THREE-CustomShaderMaterial) ![][threejs-badge] - Extend Three.js standard materials with your own shaders! It Supports both Vanilla and React! 232 | - [Three Landscape](https://github.com/nwpointer/three-landscape) ![][r3f-badge] - A growing collection of React-three-fiber compatible abstractions for rendering high quality, large scale landscapes scenes. I've been researching how AAA games render terrain and am replicating any browser compatible techniques here 233 | - [Shader Composer](https://github.com/hmans/composer-suite/tree/main/packages/shader-composer) ![][threejs-badge] - A library for authoring Three.js shaders with JavaScript. It offers a lean, functional API that makes shader composition straight-forward and fun, while allowing for simple, low-friction reusability of your favorite shader functions 234 | 235 | ### Visual Shader Editor 236 | 237 | - [NodeToy](https://nodetoy.co/) ![][threejs-badge] ![][r3f-badge] - The most powerful material editor on the web. Built for ThreeJS & React-Three-Fiber. Create, fork and publish shader graphs with the world using an intuitive and easy to use tool built for all 238 | - [Babylon NME (Node Material Editor)](https://nme.babylonjs.com/) ![][babylon-badge] - Shader-based materials editor for Babylon.js 239 | - [lamina](https://github.com/pmndrs/lamina) ![][r3f-badge] - An extensible, layer based shader material for ThreeJS. Built on top of three-custom-shader-material (CSM) and any effects that are achieved by lamina can be done with CSM in a predictable and performant manner albeit at a lower level 240 | - [Alma](https://www.alma.sh/) - Generative Graphics Creator 241 | 242 | ## Assets 243 | 244 | ### GLTF & KTX2 245 | 246 | - [Drei](https://github.com/pmndrs/drei) - [GLTF](https://github.com/pmndrs/drei#gltf) ![][r3f-badge] - A convenience component that will load a gltf file and clone the scene using drei/Clone. That means you can re-use and mount the same gltf file multiple times 247 | - [gltfjsx](https://github.com/pmndrs/gltfjsx) ![][r3f-badge] - A small command-line tool that turns GLTF assets into declarative and re-usable react-three-fiber JSX components 248 | - [glTF-Transform](https://gltf-transform.donmccurdy.com/) - glTF 2.0 SDK for JavaScript and TypeScript, on Web and Node.js. Provides fast, reproducible, and lossless control of the low-level details in a 3D model 249 | - [glTFast](https://github.com/atteneder/glTFast) - Enables use of glTF asset files in Unity (import / export) 250 | - [gltfpack](https://github.com/zeux/meshoptimizer/tree/master/gltf) - A tool that can automatically optimize glTF files to reduce the download size and improve loading and rendering speed 251 | - [glTF Pipeline](https://github.com/CesiumGS/gltf-pipeline) - Content pipeline tools for optimizing glTF assets by the Cesium team 252 | 253 | ### USD 254 | 255 | - [Asset Explorer](https://asset-explorer.needle.tools/) - Contains glTF models and their USDZ counterparts. This page is targeted at implementers, developers, and designers working with these file formats. A clear goal is to allow you to download files for a specific usecase and check if your target viewer/platform supports what you want it to support 256 | 257 | ### Avatar 258 | 259 | - [three-vrm](https://github.com/pixiv/three-vrm/) ![][threejs-badge] - Use VRM (a file format for handling 3D humanoid avatar data for VR applications. It is based on glTF2.0) on three.js 260 | 261 | ## Audio 262 | 263 | - [Howler.js](https://howlerjs.com/) - Audio library for the modern web. It defaults to Web Audio API and falls back to HTML5 Audio. This makes working with audio in JavaScript easy and reliable across all platforms 264 | - [Tone.js](https://tonejs.github.io/) - A Web Audio framework for creating interactive music in the browser. Aims to be familiar to both musicians and audio programmers creating web-based audio applications. Offers common DAW (digital audio workstation) features. Provides high-performance building blocks to create your own synthesizers, effects, and complex control signals 265 | 266 | ## Debug 267 | 268 | - [Immersive Web Emulator](https://github.com/meta-quest/immersive-web-emulator) - A browser extension that assists WebXR content creation. It enables developers to responsively run WebXR apps on a desktop browser without the need of an XR device. Inspired by the official WebXR Emulator Extension by Mozilla Reality and our previous efforts of extending it for better functionality, designed and rebuilt from the ground up 269 | - [LogXR](https://github.com/felixtrz/logxr) - A debugging utility that makes it easy to view console logs in WebXR experiences. Currently, LogXR only supports Three.js, with support for Babylon.js coming soon 270 | - [Spector.js](http://spector.babylonjs.com/) ![][babylon-badge] - A complete engine agnostic JavaScript framework for exploring and troubleshooting your WebGL scenes with ease 271 | - [R3F-Perf](https://github.com/utsuboco/r3f-perf) ![][r3f-badge] - Easily monitor the performances of your @react-three/fiber application 272 | - [three-perf](https://github.com/TheoTheDev/three-perf) ![][threejs-badge] - Vanilla Three.js port of r3f-perf(opens in a new tab) 273 | - [stats-gl](https://github.com/RenaudRohlinger/stats-gl) - WebGL Performance Monitor tool 274 | - [stats.js](https://github.com/mrdoob/stats.js/) ![][threejs-badge] - JavaScript Performance Monitor. Provides a simple info box that will help you monitor your code performance 275 | - [Drei](https://github.com/pmndrs/drei) - [PerformanceMonitor](https://github.com/pmndrs/drei#performancemonitor) ![][r3f-badge] - Collect the average fps over time 276 | - [webgpu-avoid-redundant-state-setting](https://github.com/greggman/webgpu-avoid-redundant-state-setting) - Check for and avoid redundant state setting 277 | - [@react-three/test-renderer](https://github.com/pmndrs/react-three-fiber/tree/master/packages/test-renderer) ![][r3f-badge] - A React testing renderer for threejs in node 278 | 279 | [threejs-badge]: https://badgen.net/badge/eco/three.js/?color=blue 280 | [r3f-badge]: https://badgen.net/badge/eco/react-three/?color=cyan 281 | [aframe-badge]: https://badgen.net/badge/eco/a-frame/?color=pink 282 | [babylon-badge]: https://badgen.net/badge/eco/babylon.js/?color=orange 283 | [rust-badge]: https://badgen.net/badge/eco/rust/?color=red 284 | [wasm-badge]: https://badgen.net/badge/eco/wasm/?color=purple 285 | [unity-badge]: https://badgen.net/badge/eco/unity/?color=black 286 | [webgpu-badge]: https://badgen.net/badge/eco/webgpu/?color=green 287 | 288 | ## Learning Resources 289 | 290 | ### WebXR 291 | 292 | - [MDN Tutorials](https://developer.mozilla.org/en-US/docs/Web/API/WebXR_Device_API#guides_and_tutorials) - A great resource to learn how to comprehend WebXR and the underlying 3D and VR/AR graphics concepts 293 | - [WebXR Samples](https://immersive-web.github.io/webxr-samples/) - Created to give developers a set of simple, fun, readable apps that demonstrate various aspects of using the WebXR API. Designed to focus on API use rather than the details of how the WebGL rendering is done 294 | - [W3C standards and explainers](https://immersive-web.github.io/) 295 | 296 | #### Case Studies 297 | 298 | - [Project Flowerbed: A WebXR Case Study](https://developer.oculus.com/blog/project-flowerbed-a-webxr-case-study/) - At [Connect ‘22](https://metaconnect.com/en-us/program/fbc029/?intern_source=devblog&intern_content=project-flowerbed-a-webxr-case-study), Meta unveiled [Project Flowerbed](https://flowerbed.metademolab.com/) to demonstrate best practices for developers building high-quality WebXR experiences. Now, as an [open source project](https://github.com/meta-quest/ProjectFlowerbed), it’s even easier for developers to learn about our architecture, asset pipeline, and game mechanics 299 | - [Slow Roads](https://web.dev/slow-roads/) - How Slow Roads intrigues gamers and developers alike, spotlighting the surprising capabilities of 3D in the browser. Discover the potential of WebGL with the infinite, procedurally-generated scenery of this casual driving game. [Slow Roads](https://slowroads.io/) is a casual driving game with an emphasis on endlessly procedurally generated scenery, all hosted in the browser as a WebGL application. 300 | - [SUMMER AFTERNOON](https://www.awwwards.com/summer-afternoon.html) - The memories of those summer days in our childhood when time seemed to pass slowly often evoke a strong sense of nostalgia for many of us. [Summer Afternoon](https://summer-afternoon.vlucendo.com/) is a personal project in which my initial goal was to practice creating 3D environments like those found in video games and other immersive experiences. Shortly after starting to work on it, I realized that my true goal with the experiment had transformed and was no longer just to practice a specific technical area, but also to convey a feeling of calmness and nostalgia to visitors 301 | - [Above Paradowski WebXR Mini-Golf](https://paradowski.com/stories/above-par-adowski-webxr-mini-golf) - Taking [WebXR putt putt](https://aboveparadowski.com/) from prototype to polished product on par with native Quest 2 games 302 | - [Making PuttClub.io](https://www.etherealengine.com/blog-posts/making-puttclub-io-social-webxr-games-in-full-body-vr) - Social WebXR Games in Full Body VR. [The VR game](https://www.puttclub.io/) was developed to showcase the capabilities of Ethereal Engine, and serves as a key driving force in developing what we believe to be the most powerful web based immersive engine available today 303 | - [Building with WebXR at the Presence Platform Hackathon](https://developer.oculus.com/blog/webxr-presence-platform-hackathon-meta-quest/) - Five of these developer teams built WebXR apps that ran directly inside the Meta Quest Browser, without having to install anything 304 | 305 | #### Performance Optimization 306 | 307 | - [MDN - WebXR performance guide](https://developer.mozilla.org/en-US/docs/Web/API/WebXR_Device_API/Performance) 308 | - [Meta Quest - WebXR Performance Optimization](https://developer.oculus.com/documentation/web/webxr-perf-workflow/) 309 | - [Project Flowerbed - Performance & Optimization](https://developer.oculus.com/documentation/web/webxr-perf-workflow/) 310 | - [AFrame - Performance Best Practices](https://aframe.io/docs/1.4.0/introduction/best-practices.html#performance) 311 | - [Wonderland Engine - How We Profile WebXR/WebGL Apps](https://wonderlandengine.com/news/profiling-webxr-applications/) 312 | 313 | ### 3D Engine / Framework 314 | 315 | - [R3F Journey](https://journey.pmnd.rs/) 316 | - [Three.js Journey](https://threejs-journey.com/) - The Best Way to Learn Three.js. In 71 hours of video, this course will teach you the secrets to create the coolest WebGL websites with Three.js whether you are a beginner or an advanced developer 317 | - [Discover three.js](https://discoverthreejs.com/) - A complete introduction to the web as a platform for 3D graphics using the three.js WebGL library, from one of the core three.js developers. Designed to get you started on your journey of creating modern, professional-quality 3D web applications in the shortest time possible 318 | - [Threejs 零基础入门](http://www.webgl3d.cn/pages/4a14ce/) 319 | 320 | ### Graphics API, Computer Graphics 321 | 322 | - [LearnOpenGL](https://learnopengl.com/) - Show you all there is to modern OpenGL in an easy-to-understand fashion with clear examples, while also providing a useful reference for later studies 323 | - [Web3D Survey](https://web3dsurvey.com) - Solves a common problem that 3D graphics web developers face: which API features can I use reliably? We solve this problem by collecting web graphics API capabilities and features widely across the web and then presenting that data back on this website so 3D graphics web developers can make informed decisions and reliable experiences. 324 | - [WebGL2 Fundamentals](https://webgl2fundamentals.org/) - WebGL2 from the ground up. No magic. Entirely new, discarding the old out of date ideas and bringing you to a full understanding of what WebGL really is and how it really works 325 | - [Introduction to WebGPU - CIS 565 GPU Programming Fall 2022](https://youtu.be/Hm2_bH_8j3k) - Covering the WebGPU graphics API. Covers a wide range of WebGPU topics, including API overview, comparison with WebGL, best practices, and more 326 | - [WebGPU — All of the cores, none of the canvas](https://surma.dev/things/webgpu/) 327 | - [MDN - WebGPU API](https://developer.mozilla.org/en-US/docs/Web/API/WebGPU_API) 328 | - [WebGPU Explainer](https://gpuweb.github.io/gpuweb/explainer/) 329 | - [WebGPU Fundamentals](https://webgpufundamentals.org/) - Teach you the very fundamentals of WebGPU 330 | - [WebGPU Samples](https://webgpu.github.io/webgpu-samples/) - A set of samples demonstrating the use of the WebGPU API 331 | - [WebGPU Best Practices](https://toji.dev/webgpu-best-practices/) - Focused on the most effective patterns for working with specific parts of the API, especially if you are a developer that’s familiar with WebGL or one of the native APIs 332 | - [The Book of Shaders](https://thebookofshaders.com/) - A gentle step-by-step guide through the abstract and complex universe of Fragment Shaders 333 | - [Shader School](https://github.com/stackgl/shader-school) - An introduction to GLSL shaders and graphics programming that runs in your web browser 334 | - [GAMES101: 现代计算机图形学入门](https://sites.cs.ucsb.edu/~lingqi/teaching/games101.html) 335 | 336 | ### Game 337 | 338 | - [Web Game Dev](https://www.webgamedev.com/) - A work-in-progress collection of resources on techniques and tools around JavaScript game development, which apply to 2D and 3D games, and to visual experiences that are not games 339 | - [Red Blob Games](https://www.redblobgames.com/) - I make interactive visual explanations of math and algorithms, using motivating examples from computer games 340 | --------------------------------------------------------------------------------