How To Use React Three Fiber Post Processing Shaders
Learn how to use React Three Fiber PostProcessing shaders and the Drei Text and Image components to create a cool cyberpunk terminal. We'll also generate some character art with Stable Diffusion to use as assets in our project. React Three Fiber Starter Template: https://codesandbox.io/s/react-three-fiber-starter-kit-ot1fz Finished Project Demo: https://codesandbox.io/s/react-three-fiber-postprocessing-demonstration-cedric-csi7de?file=/src/App.js Docs: https://github.com/AUTOMATIC1111/stable-diffusion-webui https://docs.pmnd.rs/react-postprocessing/introduction https://github.com/pmndrs/drei 0:00 Intro 1:15 Generating Art Assets in Stable Diffusion 4:30 Setting up the React Three Fiber Project 6:39 Creating Text in React Three Fiber with Drei 11:14 Adding Dynamic Text to the Scene 30:07 Adding Images to the Scene 37:00 Adding Controls to Switch Characters 46:49 Adding the Loader 55:10 Adding the EffectComposer and Post Processing Effects 1:13 Changing the Text Font
Learn how to use React Three Fiber PostProcessing shaders and the Drei Text and Image components to create a cool cyberpunk terminal. We'll also generate some character art with Stable Diffusion to use as assets in our project. React Three Fiber Starter Template: https://codesandbox.io/s/react-three-fiber-starter-kit-ot1fz Finished Project Demo: https://codesandbox.io/s/react-three-fiber-postprocessing-demonstration-cedric-csi7de?file=/src/App.js Docs: https://github.com/AUTOMATIC1111/stable-diffusion-webui https://docs.pmnd.rs/react-postprocessing/introduction https://github.com/pmndrs/drei 0:00 Intro 1:15 Generating Art Assets in Stable Diffusion 4:30 Setting up the React Three Fiber Project 6:39 Creating Text in React Three Fiber with Drei 11:14 Adding Dynamic Text to the Scene 30:07 Adding Images to the Scene 37:00 Adding Controls to Switch Characters 46:49 Adding the Loader 55:10 Adding the EffectComposer and Post Processing Effects 1:13 Changing the Text Font