mirror of
https://github.com/galacean/engine.git
synced 2026-06-20 10:32:18 +08:00
77 lines
3.6 KiB
Plaintext
77 lines
3.6 KiB
Plaintext
---
|
|
title: Material Overview
|
|
---
|
|
|
|
<Image src="https://mdn.alipayobjects.com/huamei_9ahbho/afts/img/A*Iq8iRKWPAqgAAAAAAAAAAAAADgDwAQ/original" />
|
|
|
|
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](/en/docs/graphics/material/shader) 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](/en/docs/graphics/material/variables) 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](/en/docs/graphics/material/shader/#render-state-specification) to learn about all configurable render states.
|
|
|
|
## Quick Start
|
|
<Callout type="info">
|
|
If you're not familiar with creating and using materials, you can first go to [Basic Material Usage](/en/docs/graphics/material/baseUse) to learn the basics.
|
|
</Callout>
|
|
|
|
### Using Built-in Shaders
|
|
Galacean provides various ready-to-use shaders:
|
|
|
|
| Shader Type | Use Case | Features |
|
|
|-----------|---------|------|
|
|
| [PBR](/en/docs/graphics/material/builtinShaders/pbr) | Realistic rendering | Physics-based, follows energy conservation |
|
|
| [Unlit](/en/docs/graphics/material/builtinShaders/unlit) | Baked models | Unaffected by lighting, excellent performance |
|
|
| [Blinn Phong](/en/docs/graphics/material/builtinShaders/blinnPhong) | Classic lighting | Efficient traditional lighting model |
|
|
|
|
### Creating Custom Shaders
|
|
When built-in shaders cannot meet your needs, you can create custom shaders:
|
|
|
|
```ts
|
|
// 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);
|
|
```
|
|
|
|
<Callout type="info">
|
|
Want to get started quickly? Jump directly to [Custom Shader Tutorial](/en/docs/graphics/material/examples/shaderlab-01-basic-shader) to start your first custom shader!
|
|
</Callout>
|
|
|
|
## Recommended Learning Path
|
|
|
|
1. **Understand Basics**: Read this overview to understand core material concepts
|
|
2. **Experience Built-ins**: Try using [Built-in Shaders](/en/docs/graphics/material/builtinShaders)
|
|
3. **Hands-on Practice**: Follow the [Tutorial](/en/docs/graphics/material/examples/shaderlab-01-basic-shader) to create your first custom shader
|
|
4. **Deep Learning**: Check [Shader Introduction](/en/docs/graphics/material/shader) for complete syntax
|
|
5. **Problem Solving**: Use [Shader Built-in Variables](/en/docs/graphics/material/variables) and [Shader API](/en/docs/graphics/material/shaderAPI)
|
|
|
|
<Callout type="info">
|
|
For more practical examples, check [Online Examples](/examples/shaderlab-01-basic-shader).
|
|
</Callout>
|