engine/examples/camera-depth-texture.ts at feature/ui-init · singlecoder/engine · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
/**
 * @title Camera Depth Texture
 * @category Camera
 * @thumbnail https://mdn.alipayobjects.com/merchant_appfe/afts/img/A*Zg1mRbLWEVMAAAAAAAAAAAAADiR2AQ/original
 */

import {
  AmbientLight,
  AssetType,
  BaseMaterial,
  Camera,
  Color,
  DepthTextureMode,
  DirectLight,
  Engine,
  Entity,
  FogMode,
  GLTFResource,
  MeshRenderer,
  PrimitiveMesh,
  RenderFace,
  Shader,
  ShadowType,
  Vector3,
  WebGLEngine,
} from "@galacean/engine";
import { FreeControl } from "@galacean/engine-toolkit-controls";

async function main() {
  const engine = await WebGLEngine.create({ canvas: "canvas" });
  engine.canvas.resizeByClientSize();

  const scene = engine.sceneManager.activeScene;

  // Set background color to corn flower blue
  const cornFlowerBlue = new Color(130 / 255, 163 / 255, 255 / 255);
  scene.background.solidColor = cornFlowerBlue;

  // Set fog
  scene.fogMode = FogMode.ExponentialSquared;
  scene.fogDensity = 0.015;
  scene.fogEnd = 200;
  scene.fogColor = cornFlowerBlue;

  const rootEntity = scene.createRootEntity();

  // Create camera entity and components
  const cameraEntity = rootEntity.createChild("camera");
  cameraEntity.transform.setPosition(-6, 2, -22);
  cameraEntity.transform.rotate(new Vector3(0, -110, 0));
  cameraEntity.addComponent(FreeControl).floorMock = false;

  const camera = cameraEntity.addComponent(Camera);
  camera.depthTextureMode = DepthTextureMode.PrePass;

  // Create light entity and component
  const lightEntity = rootEntity.createChild("light");
  lightEntity.transform.setPosition(0, 0.7, 0.5);
  lightEntity.transform.lookAt(new Vector3(0, 0, 0));

  // Enable light cast shadow
  const directLight = lightEntity.addComponent(DirectLight);
  directLight.shadowType = ShadowType.SoftLow;

  // Add ambient light
  const ambientLight = await engine.resourceManager.load<AmbientLight>({
    url: "https://gw.alipayobjects.com/os/bmw-prod/09904c03-0d23-4834-aa73-64e11e2287b0.bin",
    type: AssetType.Env,
  });
  scene.ambientLight = ambientLight;

  // Add model
  const glTFResource = await engine.resourceManager.load<GLTFResource>(
    "https://gw.alipayobjects.com/os/OasisHub/19748279-7b9b-4c17-abdf-2c84f93c54c8/oasis-file/1670226408346/low_poly_scene_forest_waterfall.gltf"
  );
  rootEntity.addChild(glTFResource.defaultSceneRoot);

  showDepthPlane(engine, cameraEntity);

  engine.run();
}

function showDepthPlane(engine: Engine, camera: Entity): void {
  const entity = camera.createChild("Plane");
  entity.transform.setPosition(0, 0, -1);
  entity.transform.rotate(new Vector3(90, 0, 0));
  const renderer = entity.addComponent(MeshRenderer);
  renderer.mesh = PrimitiveMesh.createPlane(engine,0.5,0.5);

  // Create material
  const material = new BaseMaterial(engine, Shader.find("RenderDepthTexture"));
  renderer.setMaterial(material);
}

const renderDepthVS = `
    #include <common>
    #include <common_vert>
    #include <blendShape_input>
    #include <uv_share>
    #include <FogVertexDeclaration>

    void main() {
        #include <begin_position_vert>
        #include <blendShape_vert>
        #include <skinning_vert>
        #include <uv_vert>
        #include <position_vert>

        #include <FogVertex>
    }`;

const renderDepthFS = `
    #include <common>
    #include <uv_share>
    #include <FogFragmentDeclaration>

    uniform sampler2D camera_DepthTexture;

    void main() {
        float nonLinearDepth = texture2D(camera_DepthTexture, v_uv).r;
        float depth = remapDepthBufferLinear01(nonLinearDepth);

        vec4 baseColor = vec4(depth, depth, depth, 1.0);
        gl_FragColor = baseColor;

        #ifndef MATERIAL_IS_TRANSPARENT
            gl_FragColor.a = 1.0;
        #endif

        #include <FogFragment>

        #ifndef ENGINE_IS_COLORSPACE_GAMMA
            gl_FragColor = linearToGamma(gl_FragColor);
        #endif
    }`;

Shader.create("RenderDepthTexture", renderDepthVS, renderDepthFS);

main();