• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1/*
2 * Copyright (c) 2024 Huawei Device Co., Ltd.
3 * Licensed under the Apache License, Version 2.0 (the "License");
4 * you may not use this file except in compliance with the License.
5 * You may obtain a copy of the License at
6 *
7 * http://www.apache.org/licenses/LICENSE-2.0
8 *
9 * Unless required by applicable law or agreed to in writing, software
10 * distributed under the License is distributed on an "AS IS" BASIS,
11 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
12 * See the License for the specific language governing permissions and
13 * limitations under the License.
14 */
15
16import scene3d from '@ohos.graphics.scene'
17import router from '@ohos.router';
18import Logger from '../util/Logger';
19
20let typeFlag: number = 0;
21let MapFactorFlag: number = 0;
22let radianceImageFlag: boolean = true;
23let factorIndex: number = 0;
24const ENVIRONMENT_FACTOR: scene3d.Vec4[] = [
25  { x: 1, y: 1, z: 1, w: 1 },
26  { x: 40, y: 1, z: 1, w: 1 },
27  { x: 1, y: 40, z: 1, w: 1 },
28  { x: 1, y: 1, z: 40, w: 1 },
29];
30
31function GenRandom(): number {
32  return Math.random() * 2 - 1;
33}
34
35@Entry
36@Component
37struct sceneEnvironment {
38  scene: scene3d.Scene | null = null;
39  @State sceneOpt: SceneOptions | null = null;
40  cam: scene3d.Camera | null = null;
41  env: scene3d.Environment | null = null;
42  envImg1: scene3d.Image | null = null;
43  envImg2: scene3d.Image | null = null;
44  envImg3: scene3d.Image | null = null;
45  radianceImg1: scene3d.Image | null = null;
46
47  onPageShow(): void {
48    this.init();
49  }
50
51  onPageHide(): void {
52    if (this.scene) {
53      this.scene.destroy();
54    }
55
56    this.cam = null;
57    this.scene = null;
58  }
59
60  init(): void {
61    if (this.scene === null) {
62      scene3d.Scene.load($rawfile("gltf/DamagedHelmet/glTF/DamagedHelmet.gltf"))
63        .then(async (result: scene3d.Scene) => {
64          this.scene = result;
65          this.sceneOpt = { scene: this.scene, modelType: ModelType.SURFACE } as SceneOptions;
66          let rf: scene3d.SceneResourceFactory = this.scene.getResourceFactory();
67          this.cam = await rf.createCamera({ "name": "Camera1" });
68          this.cam.enabled = true;
69          this.cam.position.z = 5;
70          this.env = await rf.createEnvironment({ "name": "Env" });
71
72          this.envImg1 = await rf.createImage({ name: "envImg1", uri: $rawfile("gltf/Cube/glTF/Cube_BaseColor.png") });
73          this.envImg2 = await rf.createImage({
74            name: "envImg2",
75            uri: $rawfile("gltf/Environment/glTF/images/quarry_02_2k_skybox.ktx")
76          });
77          this.envImg3 = await rf.createImage({
78            name: "envImg3",
79            uri: $rawfile("gltf/DamagedHelmet/glTF/Default_albedo.jpg")
80          });
81          this.radianceImg1 = await rf.createImage({
82            name: "radianceImg1",
83            uri: $rawfile("gltf/Environment/glTF/images/quarry_02_2k_radiance.ktx")
84          });
85        })
86        .catch((reason: string) => {
87          Logger.error("init error", reason);
88        });
89    }
90  }
91
92  build() {
93    Row() {
94      Column() {
95        Stack() {
96          Column() {
97          }.height('100%').width('100%')
98          .backgroundColor(Color.Green)
99
100          if (this.sceneOpt) {
101            Component3D(this.sceneOpt)
102              .renderWidth('60%')
103              .renderHeight('60%')
104              .backgroundColor(Color.Transparent)
105              .width("90%")
106              .height('100%')
107          }
108          else {
109            Text("loading 1...");
110          }
111        }
112        .height('30%')
113
114        Button('change env Img Type').onClick(() => {
115          if (!this.scene || !this.env || !this.cam) {
116            return;
117          }
118          const ENV_TYPE_COUNT: number = 4;
119          const ENV_TYPE_0: number = 0;
120          const ENV_TYPE_1: number = 1;
121          const ENV_TYPE_2: number = 2;
122          const ENV_TYPE_3: number = 3;
123          typeFlag = ++typeFlag  % ENV_TYPE_COUNT;
124          if (typeFlag === ENV_TYPE_0) {
125            this.scene.environment.backgroundType = scene3d.EnvironmentBackgroundType.BACKGROUND_NONE;
126            this.cam.clearColor = { r: 0, g: 0, b: 0, a: 0.0 };
127          }
128          else if (this.envImg1 && typeFlag === ENV_TYPE_1) {
129            this.scene.environment.backgroundType = scene3d.EnvironmentBackgroundType.BACKGROUND_IMAGE;
130            this.scene.environment.environmentImage = this.envImg1;
131          }
132          else if (this.envImg2 && typeFlag === ENV_TYPE_2) {
133            this.scene.environment.backgroundType = scene3d.EnvironmentBackgroundType.BACKGROUND_CUBEMAP;
134            this.scene.environment.environmentImage = this.envImg2;
135          }
136          else if (this.envImg3 && typeFlag === ENV_TYPE_3) {
137            this.scene.environment.backgroundType = scene3d.EnvironmentBackgroundType.BACKGROUND_EQUIRECTANGULAR;
138            this.scene.environment.environmentImage = this.envImg3;
139          }
140        }).id('change_type_environment');
141
142        Button('change radiance Img').onClick(() => {
143          if (!this.scene || !this.env) {
144            return;
145          }
146          radianceImageFlag = !radianceImageFlag;
147          if (radianceImageFlag) {
148            this.scene.environment.radianceImage = null;
149          }
150          else if (this.radianceImg1 && !radianceImageFlag) {
151            this.scene.environment.radianceImage = this.radianceImg1;
152          }
153        }).id('change_radiance');
154
155        Button('change indirectDiffuseFactor').onClick(() => {
156          if (!this.scene || !this.env) {
157            return;
158          }
159          this.scene.environment.indirectDiffuseFactor =
160            ENVIRONMENT_FACTOR[++factorIndex % ENVIRONMENT_FACTOR.length];
161        }).id('change_indirectDiffuseFactor');
162
163        Button('change indirectSpecularFactor').onClick(() => {
164          if (!this.scene || !this.env) {
165            return;
166          }
167          this.scene.environment.indirectSpecularFactor =
168            ENVIRONMENT_FACTOR[++factorIndex % ENVIRONMENT_FACTOR.length];
169        }).id('change_indirectSpecularFactor');
170
171        Button('change environmentMapFactor').onClick(() => {
172          if (!this.scene || !this.env) {
173            return;
174          }
175          this.scene.environment.environmentMapFactor =
176            ENVIRONMENT_FACTOR[++factorIndex % ENVIRONMENT_FACTOR.length];
177        }).id('change_environmentMapFactor');
178
179        Button('change irradianceCoefficients').onClick(() => {
180          if (!this.scene || !this.env) {
181            return;
182          }
183          MapFactorFlag = (MapFactorFlag + 1) % 4;
184          this.scene.environment.irradianceCoefficients =
185          [{ x: GenRandom(), y: GenRandom(), z: GenRandom() },
186            { x: GenRandom(), y: GenRandom(), z: GenRandom() },
187            { x: GenRandom(), y: GenRandom(), z: GenRandom() },
188            { x: GenRandom(), y: GenRandom(), z: GenRandom() },
189            { x: GenRandom(), y: GenRandom(), z: GenRandom() },
190            { x: GenRandom(), y: GenRandom(), z: GenRandom() },
191            { x: GenRandom(), y: GenRandom(), z: GenRandom() },
192            { x: GenRandom(), y: GenRandom(), z: GenRandom() },
193            { x: GenRandom(), y: GenRandom(), z: GenRandom() }];
194        }).id('change_irradianceCoefficients');
195
196        Button('back').onClick(() => {
197          router.back()
198        }).id('back_environment')
199      }
200      .width('100%')
201    }
202    .height('100%')
203  }
204}