three-material-editor

A GLSL editor for Threejs materials. Automatically detect the WebGL programs and provide live edit for the shaders. The editor can generates an onBeforeCompile function and possess a diff editor to analyze your changes.

Features :

• Generate onBeforeCompile function based on your modifications
• Diff viewer
• Handle and log errors
• The fullscreen mode will embed your canvas in a popup automatically
• Manage share materials
• Handle dynamic scene and meshes
• GLSL uniforms auto GUI
• Automatically removed in production based on env variable

Support :

• Support all types of postprocess (three/example/postprocess, postprocess, react-postprocess)
• Support material with onBeforeCompile
• Support troika derive material and troika-3d-text
• React and Vanilla builds
• Support SSR framework such as NextJS

Quick start - Vanilla

yarn add -D @three-material-editor/vanilla

import {
  MaterialEditor,
  useEditorComposer,
} from '@three-material-editor/vanilla';

// add the editor in the init function of your app
MaterialEditor(scene, renderer, {
  camera: camera, // handle responsize dpr for fullscreen
});

let composer = new EffectComposer(renderer);
useEditorComposer(composer);

Demo : codesandbox

See more - @three-material-editor/vanilla

Quick start - React-Three-Fiber

yarn add -D @three-material-editor/react

import {
  MaterialEditor,
  useEditorComposer,
} from '@three-material-editor/react';

<Canvas>
  <MaterialEditor />
  <EffectComposer ref={useEditorComposer()}>...</EffectComposer>
</Canvas>;

Demo : codesandbox

See more - @three-material-editor/react

Automatically removed in production

The Material Editor is automatically remove from the production build based on the process.env.NODE_ENV.

To render the editor in production :

import { MaterialEditor } from '@three-material-editor/vanilla/dist/vanilla.cjs.development';

OR a custom env variable is available :

process.env.TME_PROD === 'SHOW';

Development workflow :

In one terminal, run tsdx watch in parallel:

yarn start

In another terminal, run tsdx example:

yarn start:app // react -> localhost:1234
// OR
yarn start:vanilla // vanilla -> localhost:1234/vanilla.html

How to contribute :

If you like this project, please consider helping out. All contributions are welcome as well as donations to paypal.me/renaudrohlinger or by BTC : 3DxQy7MAaFgJpuMpn8oHTyc679vREq5g6p

twitter 🐈‍⬛ @onirenaud