Reactive Reality
summary
Claim: reuse React view logic by rendering a 2D canvas and mapping it as a texture into a WebGL scene so the same UI appears in flat and VR modes. Implementation uses React plus a 2D canvas renderer and Babylon for 3D (Unity is the legacy option). Built a mirrored to‑do app that shares reducers and state across views; it works as a proof‑of‑concept but hits practical problems: CSS layout in canvas, focus/keyboard and event hit‑testing, rendering quirks and not production ready.
AI-written summary · about
chapters (23)
- 0:00Intro
- 1:32Why am I here
- 3:41Unity 3D
- 5:30The Problem
- 6:33CSS 3D transforms
- 8:31SVG
- 10:38WebGL Canvas
- 12:08Canvas
- 12:46React
- 16:55Canvas Drawing
- 17:10Java Fatigue
- 17:29Top Choices
- 18:31CSS Layout
- 20:13ToDoList
- 22:00Slides
- 23:12Layout
- 26:16Keyboard Events
- 27:01Result
- 28:15Result in 3D
- 29:33Mapping events
- 31:09Babylon events
- 31:47VR camera
- 33:01Future ideas
related talks
42mReactive Reality
36mBlasting React into Space: Building fluid interface swith React and WebGL
22mIntroduction to ReactVR - because 2D is not good enough!
32mPhotorealistic 3Dgraphics on the Web with ReactJS, WebGL and Unity3D
18mReact and WebGL
07m3D Components in React Application
32mReact A Romance of Many Dimensions
37mCreating 3D Experiences with React