Ecosyste.ms: Awesome

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

Awesome Lists | Featured Topics | Projects

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: 3 months ago
JSON representation

Experiment: rendering custom canvas contents in a simulated 3D CRT monitor

Awesome Lists containing this project

README

        

# threejs-crt-shader

![sample screenshot of 3D CRT effect](https://github.com/unframework/threejs-crt-shader/raw/0244db0f8d8fba2467fdb295238da67fa747263f/threejs-crt-shader-sample-20201229.jpg)

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