Provide the single-loadout Scene API, SAB-backed meshes, cameras, materials, lights, workers, post effects, and tutorial playgrounds. Batch matching row growth so active GPU loadouts refresh once. Amp-Thread-ID: https://ampcode.com/threads/T-01a01380-b478-77d0-84a0-102880a5c5ae Co-authored-by: Heaust Azure <heaust.azure@gmail.com>
60 lines
1.6 KiB
Markdown
60 lines
1.6 KiB
Markdown
# Materials and textures
|
|
|
|
`PBRMaterial` is a conventional view over `materials` and `materialTextures` SOA rows.
|
|
|
|
```ts
|
|
const paint = new PBRMaterial(scene, {
|
|
baseColor: [0.8, 0.05, 0.03, 1],
|
|
metallic: 0.65,
|
|
roughness: 0.22,
|
|
emissive: [0, 0, 0],
|
|
});
|
|
await paint.ready;
|
|
|
|
paint.roughness = 0.5; // direct SAB write
|
|
paint.baseColor[1] = 0.35; // direct SAB write
|
|
mesh.material = paint;
|
|
```
|
|
|
|
<Playground example="materials" />
|
|
|
|
## Graph textures
|
|
|
|
```ts
|
|
const albedo = new Texture(scene, {
|
|
source: "/textures/paint.ktx2",
|
|
size: [2048, 2048, 1],
|
|
format: "rgba8unorm-srgb",
|
|
usage: ["sampled", "copyDst"],
|
|
});
|
|
await albedo.ready;
|
|
|
|
const textured = new PBRMaterial(scene, { baseColorTexture: albedo });
|
|
```
|
|
|
|
Creating or removing a `Texture` rebuilds the single graph loadout so the GPU resource is allocated up front. The source pointer stays on the handle for an importer or application uploader; core never owns image-loading policy.
|
|
|
|
## Custom WGSL
|
|
|
|
`ShaderMaterial` adds its external WGSL pipeline to the scene graph. Updating the code updates the loadout.
|
|
|
|
```ts
|
|
const shader = new ShaderMaterial(scene, {
|
|
code: `
|
|
struct Out { @builtin(position) position: vec4<f32> }
|
|
@vertex fn vertex(@builtin(vertex_index) id: u32) -> Out {
|
|
let p = array(vec2(-.2, -.2), vec2(.2, -.2), vec2(0., .2));
|
|
var out: Out; out.position = vec4(p[id], 0., 1.); return out;
|
|
}
|
|
@fragment fn fragment() -> @location(0) vec4<f32> {
|
|
return vec4(1., .2, .7, 1.);
|
|
}
|
|
`,
|
|
});
|
|
await shader.ready;
|
|
```
|
|
|
|
<script setup>
|
|
import Playground from "../.vitepress/Playground.vue";
|
|
</script>
|