{"id":15314673,"url":"https://github.com/unframework/threejs-crt-shader","last_synced_at":"2025-04-15T02:13:29.688Z","repository":{"id":65301991,"uuid":"325389046","full_name":"unframework/threejs-crt-shader","owner":"unframework","description":"Experiment: rendering custom canvas contents in a simulated 3D CRT monitor","archived":false,"fork":false,"pushed_at":"2021-01-02T06:06:24.000Z","size":224,"stargazers_count":17,"open_issues_count":0,"forks_count":4,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-04-15T02:13:12.757Z","etag":null,"topics":["canvas","crt-monitor","konva","konva-react","react","react-three-fiber","webgl"],"latest_commit_sha":null,"homepage":"https://codesandbox.io/s/github/unframework/threejs-crt-shader","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/unframework.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-12-29T21:18:40.000Z","updated_at":"2024-09-21T19:16:19.000Z","dependencies_parsed_at":"2023-01-16T15:15:29.820Z","dependency_job_id":null,"html_url":"https://github.com/unframework/threejs-crt-shader","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/unframework%2Fthreejs-crt-shader","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/unframework%2Fthreejs-crt-shader/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/unframework%2Fthreejs-crt-shader/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/unframework%2Fthreejs-crt-shader/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/unframework","download_url":"https://codeload.github.com/unframework/threejs-crt-shader/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248991558,"owners_count":21194894,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["canvas","crt-monitor","konva","konva-react","react","react-three-fiber","webgl"],"created_at":"2024-10-01T08:46:37.247Z","updated_at":"2025-04-15T02:13:29.664Z","avatar_url":"https://github.com/unframework.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# threejs-crt-shader\n\n![sample screenshot of 3D CRT effect](https://github.com/unframework/threejs-crt-shader/raw/0244db0f8d8fba2467fdb295238da67fa747263f/threejs-crt-shader-sample-20201229.jpg)\n\nExperimenting with displaying React content into a WebGL CRT effect material.\n\n[Live demo sandbox](https://codesandbox.io/s/github/unframework/threejs-crt-shader) (be sure to maximize view window for scanlines to show up).\n\nLibraries used:\n\n- Three.js + react-three-fiber (for main 3D scene)\n- react-konva (to paint vector graphics on a canvas)\n- react-spring (for animation)\n\nA 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.\n\nThe 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.\n\nTODOs:\n\n- use Yoga flexbox layout engine with Konva\n- interactivity with underlying Konva primitives\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Funframework%2Fthreejs-crt-shader","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Funframework%2Fthreejs-crt-shader","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Funframework%2Fthreejs-crt-shader/lists"}