Adapt to the modification of engine Texture

docs/resource-manager.md

@@ -92,9 +92,9 @@ this.engine.resourceManager.load({ url: "test", type: AssetType.Texture2D });
 > For more texture related documents, please refer to [Texture Resources](${docs}texture).
 
 ```typescript
-import { TextureCubeMap } from "oasis-engine";
+import { TextureCube } from "oasis-engine";
 
-const textureCube = await this.engine.resourceManager.load<TextureCubeMap>({
+const textureCube = await this.engine.resourceManager.load<TextureCube>({
   urls: [
     "/static/env/papermill/specular/specular_right_0.jpg",
     "/static/env/papermill/specular/specular_left_0.jpg",
@@ -107,7 +107,7 @@ const textureCube = await this.engine.resourceManager.load<TextureCubeMap>({
 });
 ```
 
-[TextureCubeMap](${api}core/TextureCubeMap) uses six pictures as original resources, uses urls to pass the links of six pictures, and uses [AssetType.TextureCube](${api}core/AssetType#TextureCube) for type.
+[TextureCube](${api}core/TextureCube) uses six pictures as original resources, uses urls to pass the links of six pictures, and uses [AssetType.TextureCube](${api}core/AssetType#TextureCube) for type.
 
 
 ### 3. Environment
@@ -144,9 +144,9 @@ The suffix of compressed texture is generally `ktx`, and you need to pay attenti
 The loading of the compressed cube texture is different from the general cube texture. It is a separate binary file path, instead of the file path of 6 images, but it needs to be specified as [AssetType.KTXCube](${api}core/AssetType#KTXCube), because ResourceManager cannot identify which specific type of Loader needs to be used based on the suffix.
 
 ```typescript
-import { TextureCubeMap } from "oasis-engine";
+import { TextureCube } from "oasis-engine";
 
-const compressedTextureCube = await this.engine.resourceManager.load<TextureCubeMap>({
+const compressedTextureCube = await this.engine.resourceManager.load<TextureCube>({
   url: "test.ktx",
   type: AssetType.KTXCube
 });

docs/resource-manager.zh-CN.md

@@ -92,10 +92,10 @@ this.engine.resourceManager.load({url: "test", type: AssetType.Texture2D});
 > 更多纹理相关文档可查阅[纹理资源](${docs}texture-cn)。
 
 ```typescript
-import { TextureCubeMap } from "oasis-engine";
+import { TextureCube } from "oasis-engine";
 
 const textureCube = await this.engine.resourceManager
-  .load<TextureCubeMap>({
+  .load<TextureCube>({
   urls: [
     "/static/env/papermill/specular/specular_right_0.jpg",
     "/static/env/papermill/specular/specular_left_0.jpg",
@@ -108,7 +108,7 @@ const textureCube = await this.engine.resourceManager
 })
 ```
 
-[TextureCubeMap](${api}core/TextureCubeMap) 使用六张图片作为原始资源，用 urls 传递六张图片链接，type 使用 [AssetType.TextureCube](${api}core/AssetType#TextureCube) 。
+[TextureCube](${api}core/TextureCube) 使用六张图片作为原始资源，用 urls 传递六张图片链接，type 使用 [AssetType.TextureCube](${api}core/AssetType#TextureCube) 。
 
 
 ### 3. Environment
@@ -144,9 +144,9 @@ const compressedTexture2D = await this.engine.resourceManager.load<Texture2D>("t
 压缩的立方体纹理的加载和一般的立方体纹理加载不一样，是单独的一个二进制文件路径，而不需要 6 张图片的文件路径，但是需要指定为类型为 [AssetType.KTXCube](${api}core/AssetType#KTXCube)。因为 ResourceManager 无法根据后缀识别需要使用哪种特定类型的 Loader。
 
 ```typescript
-import { TextureCubeMap } from "oasis-engine";
+import { TextureCube } from "oasis-engine";
 
-const compressedTextureCube = await this.engine.resourceManager.load<TextureCubeMap>({url: "test.ktx", type: AssetType.KTXCube});
+const compressedTextureCube = await this.engine.resourceManager.load<TextureCube>({url: "test.ktx", type: AssetType.KTXCube});
 ```
 
 ### 6. glTF

docs/texture.md

@@ -18,7 +18,7 @@ It is worth noting that pictures, Canvas, raw data, videos, etc. can be used as
 
 #### 2. Cube texture
 
-The difference between a cube texture ([TextureCubeMap](${api}core/TextureCubeMap)) and a 2D texture is that it has 6 faces, that is, a cube texture is composed of 6 2D textures.
+The difference between a cube texture ([TextureCube](${api}core/TextureCube)) and a 2D texture is that it has 6 faces, that is, a cube texture is composed of 6 2D textures.
 
 ![image.png](https://gw.alipayobjects.com/mdn/rms_d27172/afts/img/A*Omw8Qo0WzfYAAAAAAAAAAAAAARQnAQ)
 
@@ -38,8 +38,8 @@ Oasis provides the [RenderTarget](${api}core/RenderTarget) class to perform off-
 
 | Type | Usage |
 | :-- | :-- |
-| Color texture（[RenderColorTexture](${api}core/RenderColorTexture)） | Color texture, <br> color cubic texture, <br> multiple color texture (MRT) |
-| Depth texture（[RenderDepthTexture](${api}core/RenderDepthTexture)） | Depth texture, <br> depth cubic texture |
+| Color texture（[Texture](${api}core/Texture)） | Color texture, <br> color cubic texture, <br> multiple color texture (MRT) |
+| Depth texture（[Texture](${api}core/Texture)） | Depth texture, <br> depth cubic texture |
 | Texture combination | Color Texture + Depth Texture, <br> Color Cube Texture + Depth Cube Texture, <br> Multi Color Texture + Depth Texture  |
 
 ## Generate texture
@@ -180,10 +180,10 @@ If you need to close mipmap, you can do it through a script. For the parameters,
 const texture = new Texture2D(engine, width, height, TextureFormat.R8G8B8A8, false); // 5th parameters
 ```
 
-For the cube texture, please refer to [API](${api}core/TextureCubeMap#constructor):
+For the cube texture, please refer to [API](${api}core/TextureCube#constructor):
 
 ```typescript
-const cubeTexture = new TextureCubeMap(engine, size, TextureFormat.R8G8B8A8, false); // 4th parameters
+const cubeTexture = new TextureCube(engine, size, TextureFormat.R8G8B8A8, false); // 4th parameters
 ```
 
 ### 5. flipY

docs/texture.zh-CN.md

@@ -18,7 +18,7 @@ type: 资源系统
 
 #### 2. 立方纹理
 
-立方纹理（[TextureCubeMap](${api}core/TextureCubeMap)）和 2D 纹理的区别是它有 6 个面，即用 6 张 2D 纹理组成了一个立方纹理。
+立方纹理（[TextureCube](${api}core/TextureCube)）和 2D 纹理的区别是它有 6 个面，即用 6 张 2D 纹理组成了一个立方纹理。
 
 ![image.png](https://gw.alipayobjects.com/mdn/rms_d27172/afts/img/A*Omw8Qo0WzfYAAAAAAAAAAAAAARQnAQ)
 
@@ -38,8 +38,8 @@ type: 资源系统
 
 | 类型 | 应用 |
 | :-- | :-- |
-| 颜色纹理（[RenderColorTexture](${api}core/RenderColorTexture)） | 颜色纹理、颜色立方纹理、 多张颜色纹理 （MRT） |
-| 深度纹理（[RendeDepthTexture](${api}core/RenderDepthTexture)） | 深度纹理、深度立方纹理 |
+| 颜色纹理（[Texture](${api}core/Texture)） | 颜色纹理、颜色立方纹理、 多张颜色纹理 （MRT） |
+| 深度纹理（[Texture](${api}core/Texture)） | 深度纹理、深度立方纹理 |
 | 纹理组合 | 颜色纹理 + 深度纹理、颜色立方体纹理 + 深度立方体纹理、多张颜色纹理 + 深度纹理  |
 
 ## 生成纹理
@@ -182,10 +182,10 @@ texture.anisoLevel = 4; // 1~16
 const texture = new Texture2D(engine, width, height, TextureFormat.R8G8B8A8, false); // 第 5 个参数
 ```
 
-立方纹理脚本写法，详见 [API](${api}core/TextureCubeMap#constructor)：
+立方纹理脚本写法，详见 [API](${api}core/TextureCube#constructor)：
 
 ```typescript
-const cubeTexture = new TextureCubeMap(engine, size, TextureFormat.R8G8B8A8, false); // 第 4 个参数
+const cubeTexture = new TextureCube(engine, size, TextureFormat.R8G8B8A8, false); // 第 4 个参数
 ```
 
 ### 5. flipY

playground/background.ts

@@ -9,7 +9,7 @@ import {
   Camera,
   PrimitiveMesh,
   SkyBoxMaterial,
-  TextureCubeMap,
+  TextureCube,
   WebGLEngine
 } from "oasis-engine";
 
@@ -33,7 +33,7 @@ engine.canvas._webCanvas.addEventListener("onresize", () => {
 
 engine.resourceManager
   //@ts-ignore
-  .load<[TextureCubeMap, TextureCubeMap, Texture2D]>([
+  .load<[TextureCube, TextureCube, Texture2D]>([
     {
       urls: [
         "https://gw.alipayobjects.com/mdn/rms_7c464e/afts/img/A*5w6_Rr6ML6IAAAAAAAAAAAAAARQnAQ",
@@ -74,7 +74,7 @@ engine.resourceManager
     addGUI(cubeMaps);
   });
 
-function addGUI(cubeMaps: TextureCubeMap[]) {
+function addGUI(cubeMaps: TextureCube[]) {
   const gui = new dat.GUI();
   let colorGUI = null;
   let cubeMapGUI = null;

playground/ibl-baker.ts

@@ -20,7 +20,7 @@ import {
   SphericalHarmonics3,
   Texture2D,
   TextureCubeFace,
-  TextureCubeMap,
+  TextureCube,
   Vector3,
   WebGLEngine
 } from "oasis-engine";
@@ -41,7 +41,7 @@ cameraNode.transform.position = new Vector3(0, 0, 10);
 cameraNode.addComponent(Camera);
 cameraNode.addComponent(OrbitControl);
 Promise.all([
-  engine.resourceManager.load<TextureCubeMap>({
+  engine.resourceManager.load<TextureCube>({
     urls: [
       "https://gw.alipayobjects.com/mdn/rms_7c464e/afts/img/A*5bs-Sb80qcUAAAAAAAAAAAAAARQnAQ",
       "https://gw.alipayobjects.com/mdn/rms_7c464e/afts/img/A*rLUCT4VPBeEAAAAAAAAAAAAAARQnAQ",
@@ -52,17 +52,17 @@ Promise.all([
     ],
     type: AssetType.TextureCube
   }),
-  engine.resourceManager.load<TextureCubeMap>({
+  engine.resourceManager.load<TextureCube>({
     url: "https://gw.alipayobjects.com/os/bmw-prod/10c5d68d-8580-4bd9-8795-6f1035782b94.bin", // sunset_1K
     // url: "https://gw.alipayobjects.com/os/bmw-prod/20d58ffa-c7da-4c54-8980-4efaf91a0239.bin",// pisa_1K
     // url: "https://gw.alipayobjects.com/os/bmw-prod/59b28d9f-7589-4d47-86b0-52c50b973b10.bin", // footPrint_2K
     type: "HDR"
   })
-]).then((textures: TextureCubeMap[]) => {
+]).then((textures: TextureCube[]) => {
   const ldrCubeMap = textures[0];
   const hdrCubeMap = textures[1];
-  const bakedLDRCubeMap = IBLBaker.fromTextureCubeMap(ldrCubeMap, DecodeMode.Gamma) as any;
-  const bakedHDRCubeMap = IBLBaker.fromTextureCubeMap(hdrCubeMap, DecodeMode.RGBE) as any;
+  const bakedLDRCubeMap = IBLBaker.fromTextureCubeMap(ldrCubeMap, DecodeMode.Gamma);
+  const bakedHDRCubeMap = IBLBaker.fromTextureCubeMap(hdrCubeMap, DecodeMode.RGBE);
 
   ambientLight.specularTexture = bakedHDRCubeMap;
   ambientLight.specularTextureDecodeRGBM = true;
@@ -77,7 +77,7 @@ Promise.all([
   debugIBL(bakedLDRCubeMap, bakedHDRCubeMap);
 });
 
-function debugIBL(bakedLDRCubeMap: TextureCubeMap, bakedHDRCubeMap: TextureCubeMap) {
+function debugIBL(bakedLDRCubeMap: TextureCube, bakedHDRCubeMap: TextureCube) {
   Shader.create(
     "ibl debug test",
     `

playground/multi-camera.ts

@@ -19,7 +19,7 @@ import {
   PrimitiveMesh,
   Layer,
   Script,
-  TextureCubeMap
+  TextureCube
 } from "oasis-engine";
 import {OrbitControl} from "@oasis-engine/controls";
 import {SpineAnimation} from "@oasis-engine/spine";
@@ -99,7 +99,7 @@ engine.resourceManager
   });
 
 engine.resourceManager
-  .load<TextureCubeMap>({
+  .load<TextureCube>({
       urls: [
         "https://gw.alipayobjects.com/mdn/rms_7c464e/afts/img/A*5w6_Rr6ML6IAAAAAAAAAAAAAARQnAQ",
         "https://gw.alipayobjects.com/mdn/rms_7c464e/afts/img/A*TiT2TbN5cG4AAAAAAAAAAAAAARQnAQ",

playground/multi-viewport.ts

@@ -16,14 +16,14 @@ import {
   BackgroundMode,
   SkyBoxMaterial,
   PrimitiveMesh,
-  TextureCubeMap
+  TextureCube
 } from "oasis-engine";
-import {OrbitControl} from "@oasis-engine/controls";
+import { OrbitControl } from "@oasis-engine/controls";
 
 const engine = new WebGLEngine("canvas");
 engine.canvas.resizeByClientSize();
 const scene = engine.sceneManager.activeScene;
-const {background} = scene;
+const { background } = scene;
 const rootEntity = scene.createRootEntity();
 
 // init camera
@@ -58,22 +58,21 @@ renderer.setMaterial(material);
 engine.run();
 
 engine.resourceManager
-  .load<TextureCubeMap>({
-      urls: [
-        "https://gw.alipayobjects.com/mdn/rms_7c464e/afts/img/A*5w6_Rr6ML6IAAAAAAAAAAAAAARQnAQ",
-        "https://gw.alipayobjects.com/mdn/rms_7c464e/afts/img/A*TiT2TbN5cG4AAAAAAAAAAAAAARQnAQ",
-        "https://gw.alipayobjects.com/mdn/rms_7c464e/afts/img/A*8GF6Q4LZefUAAAAAAAAAAAAAARQnAQ",
-        "https://gw.alipayobjects.com/mdn/rms_7c464e/afts/img/A*D5pdRqUHC3IAAAAAAAAAAAAAARQnAQ",
-        "https://gw.alipayobjects.com/mdn/rms_7c464e/afts/img/A*_FooTIp6pNIAAAAAAAAAAAAAARQnAQ",
-        "https://gw.alipayobjects.com/mdn/rms_7c464e/afts/img/A*CYGZR7ogZfoAAAAAAAAAAAAAARQnAQ"
-      ],
-      type: AssetType.TextureCube
-    }
-  )
+  .load<TextureCube>({
+    urls: [
+      "https://gw.alipayobjects.com/mdn/rms_7c464e/afts/img/A*5w6_Rr6ML6IAAAAAAAAAAAAAARQnAQ",
+      "https://gw.alipayobjects.com/mdn/rms_7c464e/afts/img/A*TiT2TbN5cG4AAAAAAAAAAAAAARQnAQ",
+      "https://gw.alipayobjects.com/mdn/rms_7c464e/afts/img/A*8GF6Q4LZefUAAAAAAAAAAAAAARQnAQ",
+      "https://gw.alipayobjects.com/mdn/rms_7c464e/afts/img/A*D5pdRqUHC3IAAAAAAAAAAAAAARQnAQ",
+      "https://gw.alipayobjects.com/mdn/rms_7c464e/afts/img/A*_FooTIp6pNIAAAAAAAAAAAAAARQnAQ",
+      "https://gw.alipayobjects.com/mdn/rms_7c464e/afts/img/A*CYGZR7ogZfoAAAAAAAAAAAAAARQnAQ"
+    ],
+    type: AssetType.TextureCube
+  })
   .then((cubeMap1) => {
     // Add skybox background
     background.mode = BackgroundMode.Sky;
     const skyMaterial = (background.sky.material = new SkyBoxMaterial(engine));
     skyMaterial.textureCubeMap = cubeMap1;
     background.sky.mesh = PrimitiveMesh.createCuboid(engine, 2, 2, 2);
-  })
+  });

playground/outline.ts

@@ -18,13 +18,13 @@ import {
   Material,
   MeshRenderer,
   PrimitiveMesh,
-  RenderColorTexture,
   RenderPass,
   RenderQueueType,
   RenderTarget,
   Script,
   Shader,
   StencilOperation,
+  Texture2D,
   Vector2,
   WebGLEngine
 } from "oasis-engine";
@@ -392,7 +392,7 @@ class Border3 extends Script {
     const material = this.getScreenMaterial(this.engine);
     const { width, height } = engine.canvas;
     const renderPass = (this._renderPass = new RenderPass("border", 1, null, null, Layer.Layer1));
-    const renderColorTexture = new RenderColorTexture(engine, width, height);
+    const renderColorTexture = new Texture2D(engine, width, height);
     const renderTarget = new RenderTarget(engine, width, height, renderColorTexture);
     const screen = (this._screen = rootEntity.createChild("screen"));
     const screenRenderer = screen.addComponent(MeshRenderer);

playground/render-target.ts

@@ -13,12 +13,12 @@ import {
   Layer,
   MeshRenderer,
   PrimitiveMesh,
-  RenderColorTexture,
   RenderFace,
   RenderTarget,
   Script,
   SkyBoxMaterial,
-  TextureCubeMap,
+  Texture2D,
+  TextureCube,
   UnlitMaterial,
   WebGLEngine
 } from "oasis-engine";
@@ -43,7 +43,7 @@ const planeRenderer = planeEntity.addComponent(MeshRenderer);
 const mesh = PrimitiveMesh.createPlane(engine, 2, 2);
 const material = new UnlitMaterial(engine);
 
-planeEntity.transform.setRotation(0, 0, 180);
+planeEntity.transform.setRotation(90, 0, 0);
 material.renderFace = RenderFace.Double;
 planeRenderer.mesh = mesh;
 planeRenderer.setMaterial(material);
@@ -65,7 +65,7 @@ sky.material = skyMaterial;
 sky.mesh = PrimitiveMesh.createCuboid(engine, 1, 1, 1);
 
 engine.resourceManager
-  .load<TextureCubeMap>({
+  .load<TextureCube>({
     urls: [
       "https://gw.alipayobjects.com/mdn/rms_475770/afts/img/A*Gi7CTZqKuacAAAAAAAAAAABkARQnAQ",
       "https://gw.alipayobjects.com/mdn/rms_475770/afts/img/A*iRRMQIExwKMAAAAAAAAAAABkARQnAQ",
@@ -94,12 +94,12 @@ engine.resourceManager
 
 // Add script to switch `camera.renderTarget`
 class switchRTScript extends Script {
-  renderColorTexture = new RenderColorTexture(engine, 1024, 1024);
+  renderColorTexture = new Texture2D(engine, 1024, 1024);
   renderTarget = new RenderTarget(engine, 1024, 1024, this.renderColorTexture);
 
   constructor(entity: Entity) {
     super(entity);
-    material.baseTexture = this.renderColorTexture as any;
+    material.baseTexture = this.renderColorTexture;
   }
 
   onBeginRender(camera: Camera) {

playground/screenshot.ts

@@ -10,9 +10,8 @@ import {
   Animator,
   AssetType,
   Camera,
-  GLTFResource,
-  RenderColorTexture,
-  RenderTarget,
+  GLTFResource, RenderTarget,
+  Texture2D,
   Vector3,
   WebGLEngine
 } from "oasis-engine";
@@ -68,7 +67,7 @@ function screenshot(camera: Camera, width: number, height: number, flipY = true,
   engine.pause();
 
   const originalTarget = camera.renderTarget;
-  const renderColorTexture = new RenderColorTexture(engine, width, height);
+  const renderColorTexture = new Texture2D(engine, width, height);
   const renderTargetData = new Uint8Array(width * height * 4);
   const renderTarget = new RenderTarget(engine, width, height, renderColorTexture, undefined, 8);
 
@@ -77,7 +76,7 @@ function screenshot(camera: Camera, width: number, height: number, flipY = true,
   camera.aspectRatio = width / height;
   camera.render();
 
-  renderColorTexture.getPixelBuffer(null, 0, 0, width, height, 0, renderTargetData);
+  renderColorTexture.getPixelBuffer(0, 0, width, height, 0, renderTargetData);
 
   const imageData = context.createImageData(width, height);
   imageData.data.set(renderTargetData);