R3, or React and Three.js, is a series of playgrounds and demos highlighting many of the features and capabilities of WebGL. It covers simple objects, textures and lighting, all the way to custom shaders, framebuffers and video. It benefits from hot reloading, Webpack, and ES6 support out of the box.

It is set up to accept a single video, either by passing a video URL via the video query string (for example, http://localhost:3000/?video=https://media.giphy.com/media/3o6Zti8Yz88sqW1nq0/giphy.mp4) or by using the webcam query string (with http://localhost:3000/?webcam=true). If neither are present, the app will fall back to using a video file, in video/video.mp4.

You can also see how React could be used in tandem with the Three.js canvas element, which can be activated with the overlay query string. http://localhost:3000/?overlay=true.

To get started, clone the repo locally:

git clone [email protected]:superhighfives/react-three-playground.git
cd react-three-playground
npm install

Then, fire it up:

npm run start

To view different playgrounds, edit the Playground import in App.js. For example, to view Playground 01:

// App.js
import Playground from './playgrounds/01'

Though each playground showcases a different feature, shaders can be interchanged simply by changing the Shader variable that is imported. There is no need to change the settings / uniforms passed to the shaders. Unless you want to. In which case, go for it, you!

• Playground 01 - Geometry
• Playground 02 - Light And Shadow
• Playground 03 - Video And Texture
• Playground 04 - Single Shader
• Playground 05 - Dual-Pass Shader
• Playground 06 - Multi-Pass Shader
• Playground 07 - Shadows And Shaders
• Shaders

// App.js
import Playground from './playgrounds/01'

• Navigable by mouse

A wireframe box, floating in space.

// App.js
import Playground from './playgrounds/02'

• Navigable by mouse

A cube that accepts light and casts shadows.

// App.js
import Playground from './playgrounds/03'

// 03.js
import { vertexShader, fragmentShader, uniforms } from '../shaders/gradient' // Update for different shaders

• Navigable by mouse
• Accepts one shader
• Perspective camera

A shaded texture on a box geometry, floating in space, with a cube that accepts light.

// App.js
import Playground from './playgrounds/04'

// 04.js
import { vertexShader, fragmentShader, uniforms } from '../shaders/gradient' // Update for different shaders

A flat display, with a single shader on a video texture.

• Accepts one shader
• Orthonographic camera

// App.js
import Playground from './playgrounds/05'

// 05.js
import * as BaseShader from '../shaders/dots' // First shader
import * as SecondaryShader from '../shaders/greyscale' // Second shader

A flat display, with a two shaders on a video texture.

• Accepts two shaders via a framebuffer
• Orthonographic Camera

// App.js
import Playground from './playgrounds/06'

// 06.js
import * as DotsShader from '../shaders/dots'
import * as MirrorShader from '../shaders/mirror'
import ShaderManager from '../tools/ShaderManager'

this.shaderManager = new ShaderManager(this.texture) // Constuct with your base texture
this.shaderManager.add(DotsShader) // Add shaders
this.shaderManager.add(MirrorShader) // Add shaders

// Add to render()
this.shaderManager.render()

// Use the texture and celebrate your success
const uniforms = { texture: {type: 't', value: this.shaderManager.texture()} }

A flat display, with as many shaders as you like, on a video texture.

• Accepts multiple shaders via a framebuffer using ShaderManager
• Orthonographic Camera

// App.js
import Playground from './playgrounds/07'

// 04.js
import * as LightingShader from '../shaders/lighting'

A shaded texture that receives shadow on a box geometry, floating in space, with a cube that accepts light.

• Orthonographic camera

Playground 03 - 07 accept a shader. The following shaders are currently available:

• shaders/base.js Base (single colour)
• shaders/dots.js Dots
• shaders/flip.js Flip (horizontally)
• shaders/glitch.js Glitch
• shaders/gradient.js Gradient
• shaders/greyscale.js Greyscale
• shaders/mirror.js Mirror (mirror's texture horizontally)
• shaders/texture.js Texture (displays texture)
• shaders/tv.js TV (Old rolling TV)

This repo was written for a workshop at Decompress 2016, in Melbourne, Australia.

Though this app is built on Create React App, it keeps a distinct line between React and Three. This allows for the benefits of React and Webpack without an overcomplicated architecture. There are many projects that support a more tightly integrated relationship between React and Three.js, like React Three Renderer and React Three, and you should definetely check them out.

This project was bootstrapped with Create React App.

You can find the most recent documentation for using create-react-app here.