Skip to content
main
Switch branches/tags
Go to file
Code

README.md

three-material-editor

NPM Package Build Size NPM Downloads

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.

image

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