Ecosyste.ms: Awesome

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

Awesome Lists | Featured Topics | Projects

awesome-webxr-development

Building blocks for WebXR apps
https://github.com/Pico-Developer/awesome-webxr-development

Last synced: 3 days ago
JSON representation

  • Engine / Framework

    • General 3D Rendering Engine

      • Three.js - 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
      • React Three Fiber (R3F) - 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
      • Use.GPU - badge] - A set of declarative, reactive WebGPU legos. A stand-alone Typescript+Rust/WASM library with its own React-like run-time
      • Simple-GPU - badge] - Functional WebGPU. Replaces the WebGPU API with two fundamental abstractions, resources and commands
      • threejs-template-simple - badge]
      • threejs-andy-boilerplate - 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
      • threejs-template-complex - badge]
      • Simple-GPU - badge] - Functional WebGPU. Replaces the WebGPU API with two fundamental abstractions, resources and commands
      • React Three Fiber (R3F) - 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

    • General 3D App Framework

      • React Three - badge] ![][r3f-badge] - A vibrant and extensive eco system around three-fiber, full of libraries, helpers and abstractions
      • Babylon.js - badge] ![][webgpu-badge] - A powerful, beautiful, simple, and open game and rendering engine packed into a friendly JavaScript framework
      • A-Frame - 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
      • ion Engine - 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
      • Elixr - 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/)
      • React Three Next - badge] - A minimalist starter for Next.js, React Three Fiber and Three.js (and Tailwind and Styled-components)
      • create-r3f-app - badge]
      • r3f-project-boilerplate - badge] - a simple boilerplate project for react three fiber projects with Typescript, TailwindCSS and Vite
      • xr-starter-kit - badge]

    • 3D Game Engine

      • PlayCanvas - badge] - The web-first game engine. A visual development platform for interactive web content
      • Wonderland Engine - badge] - Development Platform
      • Ethereal Engine - badge] - Metaverse infrastructure for everyone. Everything you need to build and deploy scalable realtime 3D social apps and more
      • Phy - 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
      • 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

    • Visual Editor

      • Polygon.js - badge] ![][r3f-badge] - Node-Based Design & Animation Tool for the Web
      • Rogue Engine - badge] - A Unity3D-like environment to create WebXR enabled apps and games for the browser with three.js
      • Needle Engine - 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
      • Triplex - badge] - Visually edit React Three Fiber components where code is source of truth
      • Babylon.js Editor - badge] - Provide community-driven powerful and simple tools that help Babylon.JS users to create beautiful, awesome 3D games / applications
      • Threed Studio - 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
      • react-three-editor - 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!
      • Threed Studio - 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

  • State Management

    • Visual Editor

      • XState - JavaScript and TypeScript finite state machines and statecharts for the modern web
      • bitECS - Functional, minimal, data-oriented, ultra-high performance ECS library written using JavaScript TypedArrays
      • Miniplex - A developer-friendly entity management system for games and similarly demanding applications, based on ECS architecture
      • Becsy - Multi-threaded ECS for TypeScript and JavaScript
      • Zustand - 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
      • Jotai - badge] - Primitive and flexible state management for React. Scales from a simple useState replacement to an enterprise TypeScript application
      • Valtio - badge] - Makes proxy-state simple for React and Vanilla

  • Interaction

    • XR Interaction

      • Handy.js - Makes defining and recognizing custom hand poses in WebXR a snap
      • @coconut-xr/natuerlich - badge] - WebXR Interaction library. Deliver composable and extensible interactions for immersive experiences
      • Reality Accelerator Toolkit (RATK) - 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
      • XRKeys - badge] - A highly performant and plug-and-play WebXR keyboard library for Three.js applications
      • Handy.js - Makes defining and recognizing custom hand poses in WebXR a snap
      • @react-three/xr - badge] - React components and hooks for creating VR/AR applications with @react-three/fiber

    • Mobile Interaction

      • NippleJS - A vanilla virtual joystick for touch capable interfaces
      • MeshWalk.js - badge] - A JS library which helps your TPS game development with three.js

    • Desktop Interaction

  • 2D GUI

    • HTML Layout

      • @etherealengine/xrui - badge] - XRUI provides functionlity for using DOM elements to construct a user interface for XR applications
      • html2canvas - JavaScript HTML renderer. Allows you to take "screenshots" of webpages or parts of it, directly on the users browser
      • HTMLMesh - badge] - [demo](https://threejs.org/examples/webxr_vr_sandbox.html)
      • Satori - Enlightened library to convert HTML and CSS to SVG

    • Image & Text

      • troika-three-text - badge] - Provides high quality text rendering in Three.js scenes, using signed distance fields (SDF) and antialiasing using standard derivatives
      • troika-3d-text - 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

    • Layout

      • three-mesh-ui - 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
      • @coconut-xr/koestlich - badge] - Builds on yoga (flexbox implementation), Three.js to deliver compatible and performant 3D UIs with out-of-the-box animations
      • @react-three/flex - badge] - Brings the webs flexbox spec to react-three-fiber. It is based on Yoga, Facebook's open source layout engine for react-native

    • Form

      • r3f-form - badge] - A webGL form component for use with React Three Fiber. Ultimately, the goal is to have fully functioning HTML `<form>`s -- with all viable input types -- rendered in webGL
      • @coconut-xr/input - badge] - input fields for 3D UIs with @coconut-xr/koestlich

  • Animation

    • Image & Text

      • React Spring - 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
      • Framer Motion 3D - 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

    • Skeleton Animation

      • ossos - A complete character skinning & animation library for the web (with the IK Rig & IK Animations type system)

    • Visual Animation Editor

      • Theatre.js - 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

  • Particle System

    • Visual Animation Editor

      • Three Quarks - badge] - The Fastest Real-Time Particle VFX Engine for Web Experiences For Games, VR, AR, and UX
      • Three Nebula - badge] - A WebGL based 3D particle system engine for Three.js
      • r3f-effekseer - 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

  • Physics Engine

    • Visual Animation Editor

      • Havok (@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
      • @react-three/rapier - 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
      • PhysX (physx-js-webidl) - Javascript/WASM bindings for Nvidia PhysX based on emscripten/WebIDL
      • Jolt (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
      • use-cannon - 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
      • Oimo.js - 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)
      • Enable3d - 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

  • Graphics

    • Visual Animation Editor

      • THREE.MeshLine - badge] - Mesh replacement for THREE.Line. Instead of using GL_LINE, it uses a strip of triangles billboarded
      • three-mesh-bvh - badge] - A BVH implementation to speed up raycasting and enable spatial queries against three.js meshes
      • three-bvh-csg - badge] - A flexible, memory compact, fast and dynamic CSG implementation on top of three-mesh-bvh
      • @react-three/csg - badge] - Constructive solid geometry for React, a small abstraction around three-bvh-csg

    • Post Processing

      • R3F-Ultimate-Lens-Flare - 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
      • @react-three/postprocessing - 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
      • three.js Realism Effects - badge] - A collection of the following effects for three.js (SSGI, Motion Blur, TRAA, TAA, SVGF)
      • three.js Screen Space Reflections - badge] - Implements performant Screen Space Reflections in three.js
      • N8AO - badge] - An efficient and visually pleasing implementation of SSAO with an emphasis on temporal stability and artist control

    • Optimization

      • react-three-offscreen - badge] - render your react-three-fiber scene with an offscreen canvas in a web worker

  • Material / Shader

    • Post Processing

      • Shader Composer - 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
      • enhanceShaderLighting - 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
      • Custom Shader Material (CSM) - badge] - Extend Three.js standard materials with your own shaders! It Supports both Vanilla and React!
      • Three Landscape - 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

    • Visual Shader Editor

      • NodeToy - 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
      • Babylon NME (Node Material Editor) - badge] - Shader-based materials editor for Babylon.js
      • Alma - Generative Graphics Creator
      • lamina - 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

  • Assets

    • GLTF & KTX2

      • glTF-Transform - 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
      • gltfpack - A tool that can automatically optimize glTF files to reduce the download size and improve loading and rendering speed
      • gltfjsx - badge] - A small command-line tool that turns GLTF assets into declarative and re-usable react-three-fiber JSX components
      • glTFast - Enables use of glTF asset files in Unity (import / export)
      • glTF Pipeline - Content pipeline tools for optimizing glTF assets by the Cesium team
      • 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

    • USD

      • Asset Explorer - 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

  • Audio

    • Avatar

      • Howler.js - 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
      • Tone.js - 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

  • Debug

    • Avatar

      • Spector.js - badge] - A complete engine agnostic JavaScript framework for exploring and troubleshooting your WebGL scenes with ease
      • @react-three/test-renderer - badge] - A React testing renderer for threejs in node
      • 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
      • 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
      • R3F-Perf - badge] - Easily monitor the performances of your @react-three/fiber application
      • three-perf - badge] - Vanilla Three.js port of r3f-perf(opens in a new tab)
      • stats-gl - WebGL Performance Monitor tool
      • webgpu-avoid-redundant-state-setting - Check for and avoid redundant state setting

  • Learning Resources

    • WebXR

      • MDN Tutorials - A great resource to learn how to comprehend WebXR and the underlying 3D and VR/AR graphics concepts
      • W3C standards and explainers
      • 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.
      • SUMMER AFTERNOON - 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
      • Above Paradowski WebXR Mini-Golf - Taking [WebXR putt putt](https://aboveparadowski.com/) from prototype to polished product on par with native Quest 2 games
      • Making PuttClub.io - 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
      • Building with WebXR at the Presence Platform Hackathon - Five of these developer teams built WebXR apps that ran directly inside the Meta Quest Browser, without having to install anything
      • MDN - WebXR performance guide
      • AFrame - Performance Best Practices
      • Wonderland Engine - How We Profile WebXR/WebGL Apps
      • Project Flowerbed - Performance & Optimization
      • 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
      • Making PuttClub.io - 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
      • 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

    • 3D Engine / Framework

      • Threejs 零基础入门
      • R3F Journey
      • Three.js Journey - 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
      • Discover three.js - 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

    • Graphics API, Computer Graphics

    • Game

      • Web Game Dev - 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
      • Red Blob Games - I make interactive visual explanations of math and algorithms, using motivating examples from computer games

  • Utilities

    • Visual Editor

      • three-stdlib - badge] - Stand-alone version of threejs/examples/jsm written in Typescript & built for ESM & CJS. Designed to run without transpilation in node & browser

  • Gameplay

    • Visual Animation Editor

      • three-pathfinding - 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)
      • recast-navigation-js - badge] - A WebAssembly port of Recast Navigation (state of the art navigation mesh construction toolset for games)
      • Yuka - A JavaScript library for developing Game AI
Programming Languages
TypeScript 34 JavaScript 23 Roff 3 HTML 1 C# 1 C++ 1 Shell 1 Jupyter Notebook 1
Categories
Learning Resources 34 Engine / Framework 31 2D GUI 11 Graphics 10 Interaction 9 Material / Shader 8 Debug 8 Physics Engine 7 State Management 7 Assets 7 Animation 4 Gameplay 3 Particle System 3 Audio 2 Utilities 1
Sub Categories
Visual Animation Editor 18 Visual Editor 16 Graphics API, Computer Graphics 14 WebXR 14 Avatar 10 General 3D Rendering Engine 9 Post Processing 9 General 3D App Framework 9 XR Interaction 6 GLTF & KTX2 6 3D Game Engine 5 HTML Layout 4 3D Engine / Framework 4 Image & Text 4 Visual Shader Editor 4 Layout 3 Mobile Interaction 2 Form 2 Game 2 Optimization 1 Desktop Interaction 1 Skeleton Animation 1 USD 1
Keywords
threejs 17 react 11 3d 9 webgl 8 game-development 6 javascript 5 graphics 5 typescript 4 ecs 4 webgpu 4 react-three-fiber 4 physics 4 game-engine 4 webxr 4 shaders 3 gltf 3 hooks 2 wasm 2 realism 2 performance 2 three 2 r3f 2 three-mesh-bvh 2 state-management 2 raytracing 2 yoga 2 mesh 2 game 2 helpers 2 vr 2 augmented-reality 2 geometry 2 reactjs 2 state 2 examples 1 3d-ui 1 abstractions 1 mutable 1 easy 1 flex 1 flexbox 1 yoga-layout 1 css 1 image 1 image-generation 1 image-generator 1 jsx 1 opengraph-images 1 satori 1 svg 1