変数名の変更、postProcessingのrender/init処理の修正

Author: ics-kitagawa

box/main.ts

@@ -3,7 +3,7 @@ import * as THREE from "three";
 import { pass } from "three/tsl";
 import { dotScreen } from "three/examples/jsm/tsl/display/DotScreenNode.js";
 
-const init = () => {
+const init = async () => {
   const app = document.querySelector<HTMLDivElement>("#app");
   if (!app) {
     return;
@@ -15,6 +15,7 @@ const init = () => {
   camera.position.z = 5;
 
   const renderer = new WebGPURenderer({ antialias: true });
+  await renderer.init();
   renderer.setSize(window.innerWidth, window.innerHeight);
   renderer.setPixelRatio(window.devicePixelRatio);
 
@@ -26,11 +27,11 @@ const init = () => {
   scene.add(cube);
 
   // ポストプロセス
-  const postprocessing = new PostProcessing(renderer);
+  const postProcessing = new PostProcessing(renderer);
   const scenePass = pass(scene, camera);
   const scenePassColor = scenePass.getTextureNode();
   const dotScreenPass = dotScreen(scenePassColor);
-  postprocessing.outputNode = dotScreenPass;
+  postProcessing.outputNode = dotScreenPass;
 
   const handleResize = () => {
     camera.aspect = window.innerWidth / window.innerHeight;
@@ -40,13 +41,13 @@ const init = () => {
   window.addEventListener("resize", handleResize);
 
   // アニメーションループ
-  const animate = async () => {
+  const animate = () => {
     requestAnimationFrame(animate);
 
     cube.rotation.x = cube.rotation.x + 0.01;
     cube.rotation.y = cube.rotation.y + 0.01;
 
-    await postprocessing.renderAsync();
+    postProcessing.render();
   };
 
   animate();

sea/src/three/createScene.ts

@@ -45,7 +45,7 @@ const createFog = (mode: DayMode) => {
  * シーンの作成
  * @param container
  */
-export const createScene = (container: HTMLDivElement) => {
+export const createScene = async (container: HTMLDivElement) => {
   const params = getParams("day");
   const scene = new THREE.Scene();
   scene.background = new THREE.Color(params.backgroundColor);
@@ -59,6 +59,7 @@ export const createScene = (container: HTMLDivElement) => {
   camera.position.set(0, 8, 30);
 
   const renderer = new WebGPURenderer({ antialias: true });
+  await renderer.init();
   renderer.setSize(window.innerWidth, window.innerHeight);
   renderer.setPixelRatio(window.devicePixelRatio);
 

sea/src/three/initThree.ts

@@ -13,8 +13,8 @@ const effects: Effect[] = ["none", "chromatic", "bloom", "pixelation", "sepia"]
  * Three.jsの初期化
  * @param app
  */
-export const initThree = (app: HTMLDivElement) => {
-  const { scene, camera, renderer, onChangeEffectScene } = createScene(app);
+export const initThree = async (app: HTMLDivElement) => {
+  const { scene, camera, renderer, onChangeEffectScene } = await createScene(app);
 
   const sea = createSea();
   scene.add(sea);
@@ -25,14 +25,14 @@ export const initThree = (app: HTMLDivElement) => {
   const { island, onChangeEffectIsland } = createIsland();
   scene.add(island);
 
-  const { postprocessing, changePostprocess } = initPostprocess(scene, camera, renderer);
+  const { postProcessing, changePostprocess } = initPostprocess(scene, camera, renderer);
 
   addGui([changePostprocess, onChangeEffectScene, onChangeEffectIsland, onChangeEffectClouds]);
 
   const clock = new THREE.Clock();
 
-  const tick = async () => {
-    await postprocessing.renderAsync();
+  const tick = () => {
+    postProcessing.render();
     const elapsedTime = clock.getElapsedTime();
     animateSea(elapsedTime);
     animateClouds(elapsedTime);
@@ -46,9 +46,9 @@ export const initThree = (app: HTMLDivElement) => {
 
 // GUIの追加
 const addGui = (callbacks: ((effect: Effect) => void)[]) => {
-  const postprocessingFolder = gui.addFolder("Postprocessing");
+  const postProcessingFolder = gui.addFolder("Post Processing");
 
-  postprocessingFolder
+  postProcessingFolder
     .add({ effect: "chromatic" }, "effect", effects)
     .name("Effect")
     .onChange((value: Effect) => {

sea/src/three/postprocess/initPostprocess.ts

@@ -14,37 +14,37 @@ import { createSepia } from "./sepia";
  * @param renderer - レンダラー
  */
 export const initPostprocess = (scene: THREE.Scene, camera: THREE.PerspectiveCamera, renderer: WebGPURenderer) => {
-  const postprocessing = new PostProcessing(renderer);
+  const postProcessing = new PostProcessing(renderer);
   const scenePass = pass(scene, camera);
   const scenePassColor = scenePass.getTextureNode();
   const viewZ = scenePass.getViewZNode();
 
-  postprocessing.outputNode = createChromatic(scenePassColor, viewZ);
+  postProcessing.outputNode = createChromatic(scenePassColor, viewZ);
 
   // ポストプロセスのエフェクトを変更する
   const changePostprocess = (effect: Effect) => {
     switch (effect) {
       case "none":
-        postprocessing.outputNode = scenePassColor;
+        postProcessing.outputNode = scenePassColor;
         break;
       case "chromatic":
-        postprocessing.outputNode = createChromatic(scenePassColor, viewZ);
+        postProcessing.outputNode = createChromatic(scenePassColor, viewZ);
         break;
       case "bloom":
-        postprocessing.outputNode = createBloom(scenePassColor);
+        postProcessing.outputNode = createBloom(scenePassColor);
         break;
       case "pixelation":
-        postprocessing.outputNode = createPixelation(scene, camera);
+        postProcessing.outputNode = createPixelation(scene, camera);
         break;
       case "sepia":
-        postprocessing.outputNode = createSepia(scenePassColor);
+        postProcessing.outputNode = createSepia(scenePassColor);
         break;
       default:
-        postprocessing.outputNode = scenePassColor;
+        postProcessing.outputNode = scenePassColor;
         break;
     }
-    postprocessing.needsUpdate = true;
+    postProcessing.needsUpdate = true;
   };
 
-  return { postprocessing, changePostprocess };
+  return { postProcessing, changePostprocess };
 };