Skip to content
Draft
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion docs/en/assets/load.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -77,7 +77,7 @@ this.engine.resourceManager.load("https://a.png");
// 加载 base64
this.engine.resourceManager.load<GLTFResource>({
url: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8/5+hHgAHggJ/PchI7wAAAABJRU5ErkJggg==",
type: AssetType.Texture2D,
type: AssetType.Texture,
});

// 加载编辑器虚拟路径下的资源
Expand Down
4 changes: 2 additions & 2 deletions docs/en/core/color.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -53,10 +53,10 @@ When uploading textures in the editor, the sRGB toggle is enabled by default. If
[Loading textures](/en/docs/assets/load) uses the sRGB color space by default. If linear space is required, you can disable the sRGB setting via parameters:

```ts showLineNumbers {7}
// Load textures using Texture2DLoader
// Load textures using TextureLoader
engine.resourceManager
.load<Texture2D>({
type: AssetType.Texture2D,
type: AssetType.Texture,
url: "https://***.png",
params: {
isSRGBColorSpace: false // Disable sRGB, use linear space, e.g., for normal maps
Expand Down
25 changes: 0 additions & 25 deletions docs/en/graphics/background/sky.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -34,31 +34,6 @@ Finally, follow the path **[Hierarchy Panel](/en/docs/interface/hierarchy)** ->

<Image src="https://mdn.alipayobjects.com/huamei_yo47yq/afts/img/A*rqvsSpkGJ6UAAAAAAAAAAAAADhuCAQ/original" />

### Code to Set Skybox

```typescript
// 创建天空盒纹理
const textureCube = await engine.resourceManager.load<TextureCube>({
urls: [
"px - right 图片 url",
"nx - left 图片 url",
"py - top 图片 url",
"ny - bottom 图片 url",
"pz - front 图片 url",
"nz - back 图片 url",
],
type: AssetType.TextureCube,
});
// 创建天空盒材质
const skyMaterial = new SkyBoxMaterial(engine);
skyMaterial.texture = textureCube;
// 设置天空盒
const background = scene.background;
background.mode = BackgroundMode.Sky;
background.sky.material = skyMaterial;
background.sky.mesh = PrimitiveMesh.createCuboid(engine, 2, 2, 2);
```

## Setting Procedural Sky

Procedural sky is the default background in 3D projects in the editor. You can also follow the path **[Hierarchy Panel](/en/docs/interface/hierarchy)** -> **Select Scene** -> **[Inspector Panel](/en/docs/interface/inspector)** -> **Background section** -> **Set Mode to Sky** -> **Select the built-in SkyMat material** -> **Set Mesh to the built-in Sphere**
Expand Down
2 changes: 1 addition & 1 deletion docs/en/graphics/background/texture.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@ background.mode = BackgroundMode.Texture;
// 将一张 2D 纹理设置为背景纹理
background.texture = await engine.resourceManager.load<Texture2D>({
url: "XXX.jpg",
type: AssetType.Texture2D,
type: AssetType.Texture,
});
// 设置填充模式为铺满
background.textureFillMode = BackgroundTextureFillMode.Fill;
Expand Down
6 changes: 3 additions & 3 deletions docs/en/graphics/particle/renderer-main-module.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -44,6 +44,6 @@ You can debug each property in the provided example to better understand and con

The scalingMode has the following options:

- **Local**: Particles inherit the local transformation of the particle generator, meaning the particle transformation occurs in the generator's local coordinate system.
- **World**: Particles inherit the global transformation of the particle generator, meaning the particle transformation occurs in the world coordinate system.
- **Hierarchy**: Particles inherit transformations from the entire transformation hierarchy, meaning particles consider transformations of the generator's parent and higher-level transformations.
- **World**: Scale particle emission position and size using the world scale, including all parent transforms.
- **Local**: Scale particle emission position and size using only its own transform scale, ignoring parent scale.
- **Shape**: Only scale the emission shape area, particles themselves are not affected.
2 changes: 1 addition & 1 deletion docs/en/graphics/texture/2d.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ In a script, you can load an image with [ResourceManager](/apis/core/#ResourceMa
```typescript
engine.resourceManager
.load({
type: AssetType.Texture2D,
type: AssetType.Texture,
url: `image url`,
})
.then((texture) => {
Expand Down
22 changes: 0 additions & 22 deletions docs/en/graphics/texture/cube.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -31,28 +31,6 @@ After preparing the HDR image, follow the steps:

<Image src="https://mdn.alipayobjects.com/huamei_yo47yq/afts/img/A*Oi3FSLEEaYgAAAAAAAAAAAAADhuCAQ/original" />

Of course, you can also create a cube texture in scripts by loading six textures in the corresponding order.

```typescript
const cubeTextureResource = {
type: AssetType.TextureCube,
urls: [
"px - right image url",
"nx - left image url",
"py - top image url",
"ny - bottom image url",
"pz - front image url",
"nz - back image url",
],
};

engine.resourceManager.load(cubeTextureResource).then((resource) => {
// Cube texture supported by the engine
const cubeTexture = resource;
// The texture can now be applied to materials or used for other operations
});
```

## Usage

Cube textures are primarily used in skyboxes. For more details, refer to [Sky Background](/en/docs/graphics/background/sky/).
2 changes: 1 addition & 1 deletion docs/zh/assets/load.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -77,7 +77,7 @@ this.engine.resourceManager.load("https://a.png");
// 加载 base64
this.engine.resourceManager.load<GLTFResource>({
url: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8/5+hHgAHggJ/PchI7wAAAABJRU5ErkJggg==",
type: AssetType.Texture2D,
type: AssetType.Texture,
});

// 加载编辑器虚拟路径下的资源
Expand Down
4 changes: 2 additions & 2 deletions docs/zh/core/color.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -54,10 +54,10 @@ sRGB 色彩空间的伽马校正正是基于这种感知特性设计的,并对
[加载纹理](/docs/assets/load) 默认使用 sRGB 色彩空间。如果需要使用线性空间,可以通过参数关闭 sRGB 设置:

```ts showLineNumbers {7}
// 使用 Texture2DLoader 加载纹理
// 使用 TextureLoader 加载纹理
engine.resourceManager
.load<Texture2D>({
type: AssetType.Texture2D,
type: AssetType.Texture,
url: "https://***.png",
params: {
isSRGBColorSpace: false // 关闭 sRGB,使用线性空间,如法线贴图
Expand Down
25 changes: 0 additions & 25 deletions docs/zh/graphics/background/sky.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -34,31 +34,6 @@ label: Graphics/Background

<Image src="https://mdn.alipayobjects.com/huamei_yo47yq/afts/img/A*rqvsSpkGJ6UAAAAAAAAAAAAADhuCAQ/original" />

### 代码设置天空盒

```typescript
// 创建天空盒纹理
const textureCube = await engine.resourceManager.load<TextureCube>({
urls: [
"px - right 图片 url",
"nx - left 图片 url",
"py - top 图片 url",
"ny - bottom 图片 url",
"pz - front 图片 url",
"nz - back 图片 url",
],
type: AssetType.TextureCube,
});
// 创建天空盒材质
const skyMaterial = new SkyBoxMaterial(engine);
skyMaterial.texture = textureCube;
// 设置天空盒
const background = scene.background;
background.mode = BackgroundMode.Sky;
background.sky.material = skyMaterial;
background.sky.mesh = PrimitiveMesh.createCuboid(engine, 2, 2, 2);
```

## 设置程序化天空

程序化天空是编辑器在 3D 项目中的默认背景,您也可以依照路径 **[层级面板](/docs/interface/hierarchy)** -> **选中 Scene** -> **[检查器面板](/docs/interface/inspector)** -> **Background 栏** -> **Mode 设置 Sky** -> **Material 选择内置的 SkyMat 材质** -> **Mesh 设置内置的 Sphere**
Expand Down
2 changes: 1 addition & 1 deletion docs/zh/graphics/background/texture.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@ background.mode = BackgroundMode.Texture;
// 将一张 2D 纹理设置为背景纹理
background.texture = await engine.resourceManager.load<Texture2D>({
url: "XXX.jpg",
type: AssetType.Texture2D,
type: AssetType.Texture,
});
// 设置填充模式为铺满
background.textureFillMode = BackgroundTextureFillMode.Fill;
Expand Down
6 changes: 3 additions & 3 deletions docs/zh/graphics/particle/renderer-main-module.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -44,6 +44,6 @@ label: Graphics/Particle

scalingMode 有以下几种模式:

- **Local**:粒子会继承粒子生成器的局部变换,即粒子的变换是在生成器的本地坐标系中进行的
- **World**:粒子会继承粒子生成器的全局变换,即粒子的变换是在世界坐标系中进行的
- **Hierarchy**:粒子会继承整个变换层级中的变换,即粒子会考虑到生成器的父级及更上级的变换
- **World**:使用世界缩放(包含所有父级变换)来缩放粒子的发射位置和大小
- **Local**:仅使用自身 Transform 的缩放来缩放粒子的发射位置和大小,忽略父级缩放
- **Shape**:仅缩放发射形状区域,粒子本身的大小不受影响
2 changes: 1 addition & 1 deletion docs/zh/graphics/texture/2d.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ label: Graphics/Texture
```typescript
engine.resourceManager
.load({
type: AssetType.Texture2D,
type: AssetType.Texture,
url: `图片url`,
})
.then((texture) => {
Expand Down
22 changes: 0 additions & 22 deletions docs/zh/graphics/texture/cube.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -31,28 +31,6 @@ label: Graphics/Texture
<Image src="https://mdn.alipayobjects.com/huamei_yo47yq/afts/img/A*Oi3FSLEEaYgAAAAAAAAAAAAADhuCAQ/original" />


当然,你也可以在脚本中通过加载六张对应顺序的纹理得到相应的立方纹理。

```typescript
const cubeTextureResource = {
type: AssetType.TextureCube,
urls: [
"px - right 图片 url",
"nx - left 图片 url",
"py - top 图片 url",
"ny - bottom 图片 url",
"pz - front 图片 url",
"nz - back 图片 url",
],
};

engine.resourceManager.load(cubeTextureResource).then((resource) => {
// 引擎支持的立方纹理
const cubeTexture = resource;
// 接下来可以将纹理应用到材质上或者进行其他操作
});
```

## 使用

立方纹理主要在天空盒中使用,详情可参考[天空背景](/docs/graphics/background/sky/)
4 changes: 2 additions & 2 deletions e2e/case/.initPostProcessEnv.ts
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,7 @@ export async function initPostProcessEnv(
engine.resourceManager
.load<AmbientLight>({
type: AssetType.AmbientLight,
url: "https://mdn.alipayobjects.com/oasis_be/afts/file/A*kY8wSIrDC2gAAAAAgBAAAAgAekp5AQ/ambient.ambLight"
url: "https://mdn.alipayobjects.com/oasis_be/afts/file/A*eRJ8QKzf5zAAAAAAgBAAAAgAekp5AQ/ambient.ambLight"
})
.then((ambientLight) => {
scene.ambientLight = ambientLight;
Expand All @@ -52,7 +52,7 @@ export async function initPostProcessEnv(
return ambientLight;
}),
engine.resourceManager.load<Texture2D>({
type: AssetType.Texture2D,
type: AssetType.Texture,
url: "https://mdn.alipayobjects.com/huamei_dmxymu/afts/img/A*tMeTQ4Mx60oAAAAAAAAAAAAADuuHAQ/original"
})
]).then((resArray) => {
Expand Down
2 changes: 1 addition & 1 deletion e2e/case/camera-ssao.ts
Original file line number Diff line number Diff line change
Expand Up @@ -114,7 +114,7 @@ WebGLEngine.create({
engine.resourceManager
.load<AmbientLight>({
type: AssetType.AmbientLight,
url: "https://mdn.alipayobjects.com/oasis_be/afts/file/A*kY8wSIrDC2gAAAAAgBAAAAgAekp5AQ/ambient.ambLight"
url: "https://mdn.alipayobjects.com/oasis_be/afts/file/A*eRJ8QKzf5zAAAAAAgBAAAAgAekp5AQ/ambient.ambLight"
})
.then((ambientLight) => {
scene.ambientLight = ambientLight;
Expand Down
4 changes: 2 additions & 2 deletions e2e/case/canvas-transparency.ts
Original file line number Diff line number Diff line change
Expand Up @@ -35,11 +35,11 @@ WebGLEngine.create({ canvas: "canvas", graphicDeviceOptions: { alpha: false } })
.load([
{
url: "https://mdn.alipayobjects.com/huamei_kz4wfo/afts/img/A*3d2oSbam_wcAAAAAAAAAAAAAesp6AQ/original",
type: AssetType.Texture2D
type: AssetType.Texture
},
{
url: "https://mdn.alipayobjects.com/huamei_qbugvr/afts/img/A*j6MERb-exVgAAAAAAAAAAAAADtKFAQ/original",
type: AssetType.Texture2D
type: AssetType.Texture
}
])
.then((resources) => {
Expand Down
4 changes: 2 additions & 2 deletions e2e/case/material-blinn-phong.ts
Original file line number Diff line number Diff line change
Expand Up @@ -39,11 +39,11 @@ WebGLEngine.create({ canvas: "canvas" }).then((engine) => {
engine.resourceManager
.load([
{
type: AssetType.Texture2D,
type: AssetType.Texture,
url: "https://gw.alipayobjects.com/mdn/rms_7c464e/afts/img/A*g_HIRqQdNUcAAAAAAAAAAAAAARQnAQ"
},
{
type: AssetType.Texture2D,
type: AssetType.Texture,
url: "https://gw.alipayobjects.com/mdn/rms_7c464e/afts/img/A*H7nMRY2SuWcAAAAAAAAAAAAAARQnAQ",
params: {
isSRGBColorSpace: false
Expand Down
2 changes: 1 addition & 1 deletion e2e/case/material-pbr-clearcoat.ts
Original file line number Diff line number Diff line change
Expand Up @@ -45,7 +45,7 @@ WebGLEngine.create({ canvas: "canvas" }).then((engine) => {
engine.resourceManager
.load<AmbientLight>({
type: AssetType.AmbientLight,
url: "https://mdn.alipayobjects.com/oasis_be/afts/file/A*kY8wSIrDC2gAAAAAgBAAAAgAekp5AQ/ambient.ambLight"
url: "https://mdn.alipayobjects.com/oasis_be/afts/file/A*eRJ8QKzf5zAAAAAAgBAAAAgAekp5AQ/ambient.ambLight"
})
.then((ambientLight) => {
scene.ambientLight = ambientLight;
Expand Down
2 changes: 1 addition & 1 deletion e2e/case/material-pbr-specular.ts
Original file line number Diff line number Diff line change
Expand Up @@ -56,7 +56,7 @@ WebGLEngine.create({ canvas: "canvas", shaderLab: new ShaderLab() }).then((engin
engine.resourceManager
.load<AmbientLight>({
type: AssetType.AmbientLight,
url: "https://mdn.alipayobjects.com/oasis_be/afts/file/A*kY8wSIrDC2gAAAAAgBAAAAgAekp5AQ/ambient.ambLight"
url: "https://mdn.alipayobjects.com/oasis_be/afts/file/A*eRJ8QKzf5zAAAAAAgBAAAAgAekp5AQ/ambient.ambLight"
})
.then((ambientLight) => {
scene.ambientLight = ambientLight;
Expand Down
2 changes: 1 addition & 1 deletion e2e/case/material-pbr.ts
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,7 @@ WebGLEngine.create({ canvas: "canvas" }).then((engine) => {
engine.resourceManager
.load<AmbientLight>({
type: AssetType.AmbientLight,
url: "https://mdn.alipayobjects.com/oasis_be/afts/file/A*kY8wSIrDC2gAAAAAgBAAAAgAekp5AQ/ambient.ambLight"
url: "https://mdn.alipayobjects.com/oasis_be/afts/file/A*eRJ8QKzf5zAAAAAAgBAAAAgAekp5AQ/ambient.ambLight"
})
.then((ambientLight) => {
scene.ambientLight = ambientLight;
Expand Down
4 changes: 2 additions & 2 deletions e2e/case/material-shaderReplacement.ts
Original file line number Diff line number Diff line change
Expand Up @@ -49,7 +49,7 @@ async function main() {
.load([
{
type: AssetType.AmbientLight,
url: "https://mdn.alipayobjects.com/oasis_be/afts/file/A*kY8wSIrDC2gAAAAAgBAAAAgAekp5AQ/ambient.ambLight"
url: "https://mdn.alipayobjects.com/oasis_be/afts/file/A*eRJ8QKzf5zAAAAAAgBAAAAgAekp5AQ/ambient.ambLight"
},
{
url: "https://gw.alipayobjects.com/os/bmw-prod/150e44f6-7810-4c45-8029-3575d36aff30.gltf",
Expand All @@ -61,7 +61,7 @@ async function main() {
},
{
url: "https://mdn.alipayobjects.com/huamei_b4l2if/afts/img/A*Q60vQ40ZERsAAAAAAAAAAAAADil6AQ/original",
type: AssetType.Texture2D
type: AssetType.Texture
}
])
.then((resources) => {
Expand Down
Loading
Loading