Rendering
Custom Materials
Register shader-based or extended materials and bind uniform values to CSS variables through the material registry.
Custom Materials
Custom materials let you keep the CSS-first authoring model while extending the underlying shader or material definition.
Registration
TypeScript
import { String3DCustomMaterialRegistry } from 'string-tune-3d';
String3DCustomMaterialRegistry.register({
name: 'rim',
extends: 'standard',
uniforms: {
rimStrength: { type: 'float', value: 1, css: '--rim-strength' },
},
injections: [],
});
What the registry provides
- lookup by material name
- CSS variable registration for declared uniforms
- compatibility with the engine material factory
Practical rule
Use a custom material when the built-in basic and standard contracts are not enough, but you still want users to work through CSS variables.