https://github.com/unframework/threejs-crt-shader
Experiment: rendering custom canvas contents in a simulated 3D CRT monitor
https://github.com/unframework/threejs-crt-shader
canvas crt-monitor konva konva-react react react-three-fiber webgl
Last synced: 12 days ago
JSON representation
Experiment: rendering custom canvas contents in a simulated 3D CRT monitor
- Host: GitHub
- URL: https://github.com/unframework/threejs-crt-shader
- Owner: unframework
- Created: 2020-12-29T21:18:40.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2021-01-02T06:06:24.000Z (over 4 years ago)
- Last Synced: 2025-04-15T02:13:12.757Z (12 days ago)
- Topics: canvas, crt-monitor, konva, konva-react, react, react-three-fiber, webgl
- Language: TypeScript
- Homepage: https://codesandbox.io/s/github/unframework/threejs-crt-shader
- Size: 219 KB
- Stars: 17
- Watchers: 3
- Forks: 4
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# threejs-crt-shader
Experimenting with displaying React content into a WebGL CRT effect material.
[Live demo sandbox](https://codesandbox.io/s/github/unframework/threejs-crt-shader) (be sure to maximize view window for scanlines to show up).
Libraries used:
- Three.js + react-three-fiber (for main 3D scene)
- react-konva (to paint vector graphics on a canvas)
- react-spring (for animation)
A source canvas is painted using react-konva and then copied into a GPU texture for 3D rendering. The CRT effect is added into a custom MeshStandardMaterial and affects the emissive properties: this allows e.g. specular highlights to still layer on top.
The philosophy behind using something like react-konva is that authoring the "on screen" contents can use well-known recipes and helper libraries from the React ecosystem. And of course react-three-fiber affords the same simple setup and state management for the main 3D scene.
TODOs:
- use Yoga flexbox layout engine with Konva
- interactivity with underlying Konva primitives