Material Overview
Material is a core concept in 3D rendering that determines the visual appearance of object surfaces. In the Galacean engine, materials consist of three core components:
Core Components
🎨 Shader
Shaders are programs that run on the GPU, responsible for calculating the final color of each pixel. Galacean provides a powerful shader language that allows you to:
- Use familiar GLSL syntax
- Enjoy advanced abstraction and management features
- Easily define material properties and rendering configurations
Refer to Shader Introduction to learn about Shader syntax.
📊 Shader Data (ShaderData)
Shader data contains various parameters required for rendering, such as:
- Material Properties: color, texture, roughness, etc.
- Built-in Variables: time, camera position, lighting information, etc.
- Macro Switches: control the enabling and disabling of shader features
Refer to Built-in Variables Documentation to learn about available built-in variables.
⚙️ Render States (RenderStates)
Render states control how the GPU processes geometry, including:
- Blend State: controls transparency and color blending
- Depth State: controls depth testing and writing
- Stencil State: implements complex masking effects
- Raster State: controls face culling and polygon mode
Refer to Render States to learn about all configurable render states.
Quick Start
If you're not familiar with creating and using materials, you can first go to Basic Material Usage to learn the basics.
Using Built-in Shaders
Galacean provides various ready-to-use shaders:
| Shader Type | Use Case | Features |
|---|---|---|
| PBR | Realistic rendering | Physics-based, follows energy conservation |
| Unlit | Baked models | Unaffected by lighting, excellent performance |
| Blinn Phong | Classic lighting | Efficient traditional lighting model |
Creating Custom Shaders
When built-in shaders cannot meet your needs, you can create custom shaders:
// Create material
const material = new Material(engine, shader);
// Set material properties
material.shaderData.setColor("material_BaseColor", new Color(1, 0, 0, 1));
material.shaderData.setTexture("material_BaseTexture", texture);Want to get started quickly? Jump directly to Custom Shader Tutorial to start your first custom shader!
Recommended Learning Path
- Understand Basics: Read this overview to understand core material concepts
- Experience Built-ins: Try using Built-in Shaders
- Hands-on Practice: Follow the Tutorial to create your first custom shader
- Deep Learning: Check Shader Introduction for complete syntax
- Problem Solving: Use Shader Built-in Variables and Shader API
For more practical examples, check Online Examples.