mirror of
https://github.com/galacean/engine.git
synced 2026-05-11 02:20:46 +08:00
85 lines
3.7 KiB
Plaintext
85 lines
3.7 KiB
Plaintext
---
|
|
title: Basic Material Usage
|
|
---
|
|
|
|
## Creating Materials
|
|
|
|
There are generally 3 ways to create materials:
|
|
|
|
### 1. Manual Creation
|
|
|
|
<Image src="https://gw.alipayobjects.com/zos/OasisHub/b01b0ee2-317e-4acb-8c2f-e07736179d67/image-20240206163405147.png" />
|
|
|
|
### 2. Materials from Models
|
|
|
|
Refer to the [Model Import and Usage](/en/docs/graphics/model/use/) tutorial. We can first import the model into the editor. Generally, the model is automatically bound with materials, and users don't need to do anything.
|
|
|
|
#### 2.1. Remap Materials
|
|
|
|
If you want to modify model materials, we can click the `duplicate and remap` button to generate a copy of that material. Note that Remap will modify the model preset, and all model instances will be affected as shown below:
|
|
|
|
<Image src="https://gw.alipayobjects.com/zos/OasisHub/4a41f66e-5523-43f0-a9b5-4028b9d14cbc/2025-01-24%25252015.30.31.gif" />
|
|
|
|
#### 2.2. Incremental Modification
|
|
|
|
If you only want to modify the material of a specific model, you can use the incremental modification feature:
|
|
|
|
<Image src="https://gw.alipayobjects.com/zos/OasisHub/5d2409f2-a7b2-4b5e-9e6a-9845c3358af3/2025-01-24%25252015.32.04.gif" />
|
|
|
|
### 3. Binding Materials
|
|
|
|
We can directly drag materials into the scene to bind them.
|
|
|
|
## Switching Shaders
|
|
|
|
You can select materials in the editor and switch shaders to observe real-time rendering effect changes.
|
|
|
|
<Image src="https://gw.alipayobjects.com/zos/OasisHub/cd87c11a-7a68-4cde-a19a-40cff943e878/2025-02-10%25252017.05.33.gif" />
|
|
|
|
Each shader has different rendering effects and application scenarios. For more details, refer to [Built-in Shader Tutorial](/en/docs/graphics/material/builtinShaders/pbr/) and [Custom Shader Tutorial](/en/docs/graphics/material/examples/shaderlab-01-basic-shader).
|
|
|
|
## Creating Custom Shaders
|
|
If built-in shaders cannot meet your needs, we can create a custom shader. In the editor asset panel, create a new Shader and choose PBR template or Unlit template:
|
|
|
|
<img
|
|
src="https://gw.alipayobjects.com/zos/OasisHub/9abd1026-4e4d-4994-b36a-f964375c38cb/image-20240731105324320.png"
|
|
style={{ zoom: "50%" }}
|
|
/>
|
|
|
|
The editor will automatically help us create the Shader file and [UIScript](/en/docs/graphics/material/shader/#uiscript-script-system) file.
|
|
|
|
<img
|
|
src="https://gw.alipayobjects.com/zos/OasisHub/6351fa81-5159-4469-bd95-8f21a8f2f4ac/image-20250124162909194.png"
|
|
style={{ zoom: "50%" }}
|
|
/>
|
|
|
|
<Callout type="info">
|
|
For specific shader content writing, you can quickly get started with [Custom Shader Tutorial](/en/docs/graphics/material/examples/shaderlab-01-basic-shader).
|
|
</Callout>
|
|
|
|
## Shader Data Transfer
|
|
|
|
Like other programming languages, we also use many variables when writing shaders. First, the engine has many [built-in variables](/en/docs/graphics/material/variables), which we don't need to set manually and can be used directly in shaders. Next, let's see how to set and use custom data.
|
|
|
|
### Declaring Variables
|
|
```glsl showLineNumbers
|
|
...
|
|
Pass "Forward" {
|
|
// Declare custom variables
|
|
vec4 u_color;
|
|
|
|
// Declare engine built-in variables
|
|
mat4 renderer_MVPMat;
|
|
|
|
// Through including code fragments
|
|
#include "Transform.glsl"
|
|
}
|
|
...
|
|
```
|
|
|
|
## Next Steps
|
|
- [Custom Shader](/en/docs/graphics/material/examples/shaderlab-01-basic-shader) - Start your shader creation journey from scratch
|
|
- [Shader Syntax Deep Learning](/en/docs/graphics/material/shader) - Complete syntax reference
|
|
- [Shader Built-in Variables Reference](/en/docs/graphics/material/variables) - All built-in variables provided by the engine
|
|
- [Shader Built-in API Reference](/en/docs/graphics/material/shaderAPI) - All Shader APIs provided by the engine
|
|
- [Lighting System](/en/docs/graphics/light/light) - Implement more realistic lighting effects |