From 70b839649e57d272ae7f025364b125f487502edb Mon Sep 17 00:00:00 2001 From: Yuki Shimada Date: Sat, 5 Aug 2023 05:23:21 +0900 Subject: [PATCH] refactor: some samples --- .../main.ts | 162 ++++++++------- samples/test_e2e/GltfImporter-ibl-0/main.ts | 110 +++++------ samples/test_e2e/GltfImporter-ibl-1/main.ts | 168 ++++++++-------- samples/test_e2e/GltfImporter/main.ts | 184 +++++++++--------- 4 files changed, 302 insertions(+), 322 deletions(-) diff --git a/samples/test_e2e/GltfImporter-forward-render-pipeline/main.ts b/samples/test_e2e/GltfImporter-forward-render-pipeline/main.ts index 7fd442654..174cb5100 100644 --- a/samples/test_e2e/GltfImporter-forward-render-pipeline/main.ts +++ b/samples/test_e2e/GltfImporter-forward-render-pipeline/main.ts @@ -5,93 +5,91 @@ document.body.appendChild(p); declare const window: any; -(async () => { - Rn.Config.isUboEnabled = false; - const canvas = document.getElementById('world') as HTMLCanvasElement; - await Rn.System.init({ - approach: Rn.ProcessApproach.DataTexture, - canvas, - }); - - Rn.MeshRendererComponent.isDepthMaskTrueForTransparencies = true; - - // create ForwardRenderPipeline - const forwardRenderPipeline = new Rn.ForwardRenderPipeline(); - forwardRenderPipeline.setup(canvas.width, canvas.height); - - // camera - const { cameraComponent, cameraEntity } = createCamera(); - - // gltf - const mainExpression = ( - await Rn.GltfImporter.importFromUri( - '../../../assets/gltf/glTF-Sample-Models/2.0/IridescentDishWithOlives/glTF-Binary/IridescentDishWithOlives.glb', - { - cameraComponent: cameraComponent, - defaultMaterialHelperArgumentArray: [ - { - makeOutputSrgb: false, - }, - ], - } - ) - ).unwrapForce(); - - // env - const envExpression = createEnvCubeExpression('./../../../assets/ibl/papermill', cameraEntity); - - const mainRenderPass = mainExpression.renderPasses[0]; - // cameraController - const mainCameraControllerComponent = cameraEntity.getCameraController(); - const controller = mainCameraControllerComponent.controller as Rn.OrbitCameraController; - controller.setTarget(mainRenderPass.sceneTopLevelGraphComponents[0].entity); - controller.dolly = 0.83; - - forwardRenderPipeline.setExpressions([envExpression, mainExpression]); - - // lighting - forwardRenderPipeline.setIBL({ - diffuse: { - baseUri: './../../../assets/ibl/papermill/diffuse/diffuse', - hdriFormat: Rn.HdriFormat.RGBE_PNG, - isNamePosNeg: true, - mipmapLevelNumber: 1, - }, - specular: { - baseUri: './../../../assets/ibl/papermill/specular/specular', - hdriFormat: Rn.HdriFormat.RGBE_PNG, - isNamePosNeg: true, - mipmapLevelNumber: 10, - }, - }); - - let count = 0; - let startTime = Date.now(); - const draw = function (frame) { - if (count > 100) { - p.id = 'rendered'; - p.innerText = 'Rendered.'; - } else if (count === 1) { - p.id = 'started'; - p.innerText = 'Started.'; +Rn.Config.isUboEnabled = false; +const canvas = document.getElementById('world') as HTMLCanvasElement; +await Rn.System.init({ + approach: Rn.ProcessApproach.DataTexture, + canvas, +}); + +Rn.MeshRendererComponent.isDepthMaskTrueForTransparencies = true; + +// create ForwardRenderPipeline +const forwardRenderPipeline = new Rn.ForwardRenderPipeline(); +forwardRenderPipeline.setup(canvas.width, canvas.height); + +// camera +const { cameraComponent, cameraEntity } = createCamera(); + +// gltf +const mainExpression = ( + await Rn.GltfImporter.importFromUri( + '../../../assets/gltf/glTF-Sample-Models/2.0/IridescentDishWithOlives/glTF-Binary/IridescentDishWithOlives.glb', + { + cameraComponent: cameraComponent, + defaultMaterialHelperArgumentArray: [ + { + makeOutputSrgb: false, + }, + ], } - - if (window.isAnimating) { - const date = new Date(); - const time = (date.getTime() - startTime) / 1000; - Rn.AnimationComponent.globalTime = time; - if (time > Rn.AnimationComponent.endInputValue) { - startTime = date.getTime(); - } + ) +).unwrapForce(); + +// env +const envExpression = createEnvCubeExpression('./../../../assets/ibl/papermill', cameraEntity); + +const mainRenderPass = mainExpression.renderPasses[0]; +// cameraController +const mainCameraControllerComponent = cameraEntity.getCameraController(); +const controller = mainCameraControllerComponent.controller as Rn.OrbitCameraController; +controller.setTarget(mainRenderPass.sceneTopLevelGraphComponents[0].entity); +controller.dolly = 0.83; + +forwardRenderPipeline.setExpressions([envExpression, mainExpression]); + +// lighting +forwardRenderPipeline.setIBL({ + diffuse: { + baseUri: './../../../assets/ibl/papermill/diffuse/diffuse', + hdriFormat: Rn.HdriFormat.RGBE_PNG, + isNamePosNeg: true, + mipmapLevelNumber: 1, + }, + specular: { + baseUri: './../../../assets/ibl/papermill/specular/specular', + hdriFormat: Rn.HdriFormat.RGBE_PNG, + isNamePosNeg: true, + mipmapLevelNumber: 10, + }, +}); + +let count = 0; +let startTime = Date.now(); +const draw = function (frame) { + if (count > 100) { + p.id = 'rendered'; + p.innerText = 'Rendered.'; + } else if (count === 1) { + p.id = 'started'; + p.innerText = 'Started.'; + } + + if (window.isAnimating) { + const date = new Date(); + const time = (date.getTime() - startTime) / 1000; + Rn.AnimationComponent.globalTime = time; + if (time > Rn.AnimationComponent.endInputValue) { + startTime = date.getTime(); } + } - Rn.System.process(frame); + Rn.System.process(frame); - count++; - }; + count++; +}; - forwardRenderPipeline.startRenderLoop(draw); -})(); +forwardRenderPipeline.startRenderLoop(draw); function createCamera() { const cameraEntity = Rn.EntityHelper.createCameraControllerEntity(); diff --git a/samples/test_e2e/GltfImporter-ibl-0/main.ts b/samples/test_e2e/GltfImporter-ibl-0/main.ts index b55da3435..a7dda5602 100644 --- a/samples/test_e2e/GltfImporter-ibl-0/main.ts +++ b/samples/test_e2e/GltfImporter-ibl-0/main.ts @@ -1,70 +1,64 @@ -import Rn from '../../../dist/esm/index.js'; +import Rn from '../../../dist/esmdev/index.js'; const p = document.createElement('p'); document.body.appendChild(p); -(async () => { - await Rn.System.init({ - approach: Rn.ProcessApproach.Uniform, - canvas: document.getElementById('world') as HTMLCanvasElement, - }); - - // expressions - const expressions = []; - - // env - const envExpression = createEnvCubeExpression('./../../../assets/ibl/papermill'); - expressions.push(envExpression); - - // camera - const cameraEntity = Rn.EntityHelper.createCameraControllerEntity(); - const cameraComponent = cameraEntity.getCamera(); - cameraComponent.zNear = 0.1; - cameraComponent.zFar = 1000.0; - cameraComponent.setFovyAndChangeFocalLength(20.0); - cameraComponent.aspect = 1.0; - - // gltf - const mainExpression = ( - await Rn.GltfImporter.importFromUri( - '../../../assets/gltf/glTF-Sample-Models/2.0/AntiqueCamera/glTF/AntiqueCamera.gltf', - { - cameraComponent: cameraComponent, - }, - (obj: Rn.RnPromiseCallbackObj) => { - // this callback won't be called - console.log(`loading items: ${obj.resolvedNum} / ${obj.promiseAllNum}`); - } - ) - ).unwrapForce(); - expressions.push(mainExpression); - - // cameraController - const mainRenderPass = mainExpression.renderPasses[0]; - const mainCameraControllerComponent = cameraEntity.getCameraController(); - const controller = mainCameraControllerComponent.controller as Rn.OrbitCameraController; - controller.setTarget(mainRenderPass.sceneTopLevelGraphComponents[0].entity); - - // lighting - setIBL('./../../../assets/ibl/papermill'); - - let count = 0; - - const draw = function () { - if (count > 100) { - p.id = 'rendered'; - p.innerText = 'Rendered.'; +await Rn.System.init({ + approach: Rn.ProcessApproach.Uniform, + canvas: document.getElementById('world') as HTMLCanvasElement, +}); + +// expressions +const expressions = []; + +// env +const envExpression = createEnvCubeExpression('./../../../assets/ibl/papermill'); +expressions.push(envExpression); + +// camera +const cameraEntity = Rn.EntityHelper.createCameraControllerEntity(); +const cameraComponent = cameraEntity.getCamera(); +cameraComponent.zNear = 0.1; +cameraComponent.zFar = 1000.0; +cameraComponent.setFovyAndChangeFocalLength(20.0); +cameraComponent.aspect = 1.0; + +// gltf +const mainExpression = ( + await Rn.GltfImporter.importFromUri( + '../../../assets/gltf/glTF-Sample-Models/2.0/AntiqueCamera/glTF/AntiqueCamera.gltf', + { + cameraComponent: cameraComponent, + }, + (obj: Rn.RnPromiseCallbackObj) => { + // this callback won't be called + console.log(`loading items: ${obj.resolvedNum} / ${obj.promiseAllNum}`); } + ) +).unwrapForce(); +expressions.push(mainExpression); + +// cameraController +const mainRenderPass = mainExpression.renderPasses[0]; +const mainCameraControllerComponent = cameraEntity.getCameraController(); +const controller = mainCameraControllerComponent.controller as Rn.OrbitCameraController; +controller.setTarget(mainRenderPass.sceneTopLevelGraphComponents[0].entity); - Rn.System.process(expressions); +// lighting +setIBL('./../../../assets/ibl/papermill'); - count++; +let count = 0; + +Rn.System.startRenderLoop(() => { + if (count > 100) { + p.id = 'rendered'; + p.innerText = 'Rendered.'; + } - requestAnimationFrame(draw); - }; + Rn.System.process(expressions); - draw(); -})(); + count++; +}); function createEnvCubeExpression(baseuri) { const environmentCubeTexture = new Rn.CubeTexture(); diff --git a/samples/test_e2e/GltfImporter-ibl-1/main.ts b/samples/test_e2e/GltfImporter-ibl-1/main.ts index fdf0cb861..062dd21a9 100644 --- a/samples/test_e2e/GltfImporter-ibl-1/main.ts +++ b/samples/test_e2e/GltfImporter-ibl-1/main.ts @@ -4,96 +4,90 @@ declare const window: any; const p = document.createElement('p'); document.body.appendChild(p); -(async () => { - await Rn.System.init({ - approach: Rn.ProcessApproach.Uniform, - canvas: document.getElementById('world') as HTMLCanvasElement, - }); - - // expressions - const expressions = []; - - // camera - const cameraEntity = Rn.EntityHelper.createCameraControllerEntity(); - const cameraComponent = cameraEntity.getCamera(); - cameraComponent.zNear = 0.1; - cameraComponent.zFar = 1000.0; - cameraComponent.setFovyAndChangeFocalLength(30.0); - cameraComponent.aspect = 1.0; - - // gltf - const mainExpression = ( - await Rn.GltfImporter.importFromUri( - '../../../assets/gltf/glTF-Sample-Models/2.0/FlightHelmet/glTF/FlightHelmet.gltf', - { - cameraComponent: cameraComponent, - defaultMaterialHelperArgumentArray: [ - { - makeOutputSrgb: false, - }, - ], - } - ) - ).unwrapForce(); - expressions.push(mainExpression); - - // post effects - const expressionPostEffect = new Rn.Expression(); - expressions.push(expressionPostEffect); - - // gamma correction (and super sampling) - const mainRenderPass = mainExpression.renderPasses[0]; - const gammaTargetFramebuffer = Rn.RenderableHelper.createTexturesForRenderTarget(600, 600, 1, {}); - mainRenderPass.setFramebuffer(gammaTargetFramebuffer); - mainRenderPass.toClearColorBuffer = true; - mainRenderPass.toClearDepthBuffer = true; - - const postEffectCameraEntity = createPostEffectCameraEntity(); - const postEffectCameraComponent = postEffectCameraEntity.getCamera(); - - const gammaCorrectionMaterial = Rn.MaterialHelper.createGammaCorrectionMaterial(); - const gammaCorrectionRenderPass = createPostEffectRenderPass( - gammaCorrectionMaterial, - postEffectCameraComponent - ); - - setTextureParameterForMeshComponents( - gammaCorrectionRenderPass.meshComponents, - Rn.ShaderSemantics.BaseColorTexture, - gammaTargetFramebuffer.getColorAttachedRenderTargetTexture(0) - ); - - expressionPostEffect.addRenderPasses([gammaCorrectionRenderPass]); - - // cameraController - const mainCameraControllerComponent = cameraEntity.getCameraController(); - const controller = mainCameraControllerComponent.controller as Rn.OrbitCameraController; - controller.setTarget(mainRenderPass.sceneTopLevelGraphComponents[0].entity); - controller.dolly = 0.83; - - // lighting - setIBL('./../../../assets/ibl/papermill'); - - let count = 0; - - const draw = function () { - if (count > 100) { - p.id = 'rendered'; - p.innerText = 'Rendered.'; - } else if (count === 1) { - p.id = 'started'; - p.innerText = 'Started.'; +await Rn.System.init({ + approach: Rn.ProcessApproach.Uniform, + canvas: document.getElementById('world') as HTMLCanvasElement, +}); + +// expressions +const expressions = []; + +// camera +const cameraEntity = Rn.EntityHelper.createCameraControllerEntity(); +const cameraComponent = cameraEntity.getCamera(); +cameraComponent.zNear = 0.1; +cameraComponent.zFar = 1000.0; +cameraComponent.setFovyAndChangeFocalLength(30.0); +cameraComponent.aspect = 1.0; + +// gltf +const mainExpression = ( + await Rn.GltfImporter.importFromUri( + '../../../assets/gltf/glTF-Sample-Models/2.0/FlightHelmet/glTF/FlightHelmet.gltf', + { + cameraComponent: cameraComponent, + defaultMaterialHelperArgumentArray: [ + { + makeOutputSrgb: false, + }, + ], } + ) +).unwrapForce(); +expressions.push(mainExpression); + +// post effects +const expressionPostEffect = new Rn.Expression(); +expressions.push(expressionPostEffect); + +// gamma correction (and super sampling) +const mainRenderPass = mainExpression.renderPasses[0]; +const gammaTargetFramebuffer = Rn.RenderableHelper.createTexturesForRenderTarget(600, 600, 1, {}); +mainRenderPass.setFramebuffer(gammaTargetFramebuffer); +mainRenderPass.toClearColorBuffer = true; +mainRenderPass.toClearDepthBuffer = true; + +const postEffectCameraEntity = createPostEffectCameraEntity(); +const postEffectCameraComponent = postEffectCameraEntity.getCamera(); + +const gammaCorrectionMaterial = Rn.MaterialHelper.createGammaCorrectionMaterial(); +const gammaCorrectionRenderPass = createPostEffectRenderPass( + gammaCorrectionMaterial, + postEffectCameraComponent +); + +setTextureParameterForMeshComponents( + gammaCorrectionRenderPass.meshComponents, + Rn.ShaderSemantics.BaseColorTexture, + gammaTargetFramebuffer.getColorAttachedRenderTargetTexture(0) +); + +expressionPostEffect.addRenderPasses([gammaCorrectionRenderPass]); + +// cameraController +const mainCameraControllerComponent = cameraEntity.getCameraController(); +const controller = mainCameraControllerComponent.controller as Rn.OrbitCameraController; +controller.setTarget(mainRenderPass.sceneTopLevelGraphComponents[0].entity); +controller.dolly = 0.83; + +// lighting +setIBL('./../../../assets/ibl/papermill'); + +let count = 0; + +Rn.System.startRenderLoop(() => { + if (count > 100) { + p.id = 'rendered'; + p.innerText = 'Rendered.'; + } else if (count === 1) { + p.id = 'started'; + p.innerText = 'Started.'; + } - Rn.System.process(expressions); - - count++; - - requestAnimationFrame(draw); - }; + Rn.System.process(expressions); - draw(); -})(); + count++; +}); function setIBL(baseUri) { const specularCubeTexture = new Rn.CubeTexture(); diff --git a/samples/test_e2e/GltfImporter/main.ts b/samples/test_e2e/GltfImporter/main.ts index f4d3edf43..04626fbe5 100644 --- a/samples/test_e2e/GltfImporter/main.ts +++ b/samples/test_e2e/GltfImporter/main.ts @@ -1,103 +1,97 @@ -import Rn from '../../../dist/esm/index.js'; +import Rn from '../../../dist/esmdev/index.js'; let p: any; declare const window: any; -(async () => { - Rn.Config.maxEntityNumber = 200; - Rn.Config.maxLightNumberInShader = 1; - Rn.Config.maxVertexMorphNumberInShader = 1; - Rn.Config.maxMaterialInstanceForEachType = 30; - Rn.Config.maxCameraNumber = 3; - Rn.Config.maxSkeletalBoneNumber = 1; - Rn.Config.dataTextureWidth = 2 ** 8; - Rn.Config.dataTextureHeight = 2 ** 9; - Rn.Config.maxMorphTargetNumber = 1; - Rn.Config.isUboEnabled = false; - - await Rn.System.init({ - approach: Rn.ProcessApproach.Uniform, - canvas: document.getElementById('world') as HTMLCanvasElement, - }); - - // params - const vrmModelRotation = Rn.Vector3.fromCopyArray([0, (3 / 4) * Math.PI, 0]); - - // camera - const cameraEntity = Rn.EntityHelper.createCameraControllerEntity(); - const cameraComponent = cameraEntity.getCamera(); - cameraComponent.zNear = 0.1; - cameraComponent.zFar = 1000.0; - cameraComponent.setFovyAndChangeFocalLength(30.0); - cameraComponent.aspect = 1.0; - - // expresions - const expressions = []; - - // vrm - const vrmExpression = ( - await Rn.GltfImporter.importFromUri('../../../assets/vrm/test.vrm', { - defaultMaterialHelperArgumentArray: [ - { - isSkinning: false, - isMorphing: false, - makeOutputSrgb: true, - }, - ], - autoResizeTexture: true, - tangentCalculationMode: 0, - cameraComponent: cameraComponent, - }) - ).unwrapForce(); - expressions.push(vrmExpression); - - const vrmMainRenderPass = vrmExpression.renderPasses[0]; - vrmMainRenderPass.toClearColorBuffer = true; - - const vrmRootEntity = vrmMainRenderPass.sceneTopLevelGraphComponents[0].entity; - vrmRootEntity.getTransform().localEulerAngles = vrmModelRotation; - - //set default camera - Rn.CameraComponent.current = 0; - - // cameraController - const vrmMainCameraComponent = vrmMainRenderPass.cameraComponent; - const vrmMainCameraEntity = vrmMainCameraComponent.entity; - const vrmMainCameraControllerComponent = vrmMainCameraEntity.tryToGetCameraController(); - const controller = vrmMainCameraControllerComponent.controller as Rn.OrbitCameraController; - controller.dolly = 0.8; - controller.setTarget(vrmMainRenderPass.sceneTopLevelGraphComponents[0].entity); - - // Lights - const lightEntity = Rn.EntityHelper.createLightEntity(); - const lightComponent = lightEntity.getLight(); - lightComponent.type = Rn.LightType.Directional; - lightComponent.intensity = Rn.Vector3.fromCopyArray([1.0, 1.0, 1.0]); - lightEntity.getTransform().localEulerAngles = Rn.Vector3.fromCopyArray([0, 0, Math.PI / 8]); - - let count = 0; - const draw = function () { - if (p == null && count > 0) { - p = document.createElement('p'); - p.setAttribute('id', 'rendered'); - p.innerText = 'Rendered.'; - document.body.appendChild(p); - } - - if (window.isAnimating) { - // const date = new Date(); - } - - Rn.System.process(expressions); - - count++; - - requestAnimationFrame(draw); - }; - - draw(); -})(); +Rn.Config.maxEntityNumber = 200; +Rn.Config.maxLightNumberInShader = 1; +Rn.Config.maxVertexMorphNumberInShader = 1; +Rn.Config.maxMaterialInstanceForEachType = 30; +Rn.Config.maxCameraNumber = 3; +Rn.Config.maxSkeletalBoneNumber = 1; +Rn.Config.dataTextureWidth = 2 ** 8; +Rn.Config.dataTextureHeight = 2 ** 9; +Rn.Config.maxMorphTargetNumber = 1; +Rn.Config.isUboEnabled = false; + +await Rn.System.init({ + approach: Rn.ProcessApproach.Uniform, + canvas: document.getElementById('world') as HTMLCanvasElement, +}); + +// params +const vrmModelRotation = Rn.Vector3.fromCopyArray([0, (3 / 4) * Math.PI, 0]); + +// camera +const cameraEntity = Rn.EntityHelper.createCameraControllerEntity(); +const cameraComponent = cameraEntity.getCamera(); +cameraComponent.zNear = 0.1; +cameraComponent.zFar = 1000.0; +cameraComponent.setFovyAndChangeFocalLength(30.0); +cameraComponent.aspect = 1.0; + +// expresions +const expressions = []; + +// vrm +const vrmExpression = ( + await Rn.GltfImporter.importFromUri('../../../assets/vrm/test.vrm', { + defaultMaterialHelperArgumentArray: [ + { + isSkinning: false, + isMorphing: false, + makeOutputSrgb: true, + }, + ], + autoResizeTexture: true, + tangentCalculationMode: 0, + cameraComponent: cameraComponent, + }) +).unwrapForce(); +expressions.push(vrmExpression); + +const vrmMainRenderPass = vrmExpression.renderPasses[0]; +vrmMainRenderPass.toClearColorBuffer = true; + +const vrmRootEntity = vrmMainRenderPass.sceneTopLevelGraphComponents[0].entity; +vrmRootEntity.getTransform().localEulerAngles = vrmModelRotation; + +//set default camera +Rn.CameraComponent.current = 0; + +// cameraController +const vrmMainCameraComponent = vrmMainRenderPass.cameraComponent; +const vrmMainCameraEntity = vrmMainCameraComponent.entity; +const vrmMainCameraControllerComponent = vrmMainCameraEntity.tryToGetCameraController(); +const controller = vrmMainCameraControllerComponent.controller as Rn.OrbitCameraController; +controller.dolly = 0.8; +controller.setTarget(vrmMainRenderPass.sceneTopLevelGraphComponents[0].entity); + +// Lights +const lightEntity = Rn.EntityHelper.createLightEntity(); +const lightComponent = lightEntity.getLight(); +lightComponent.type = Rn.LightType.Directional; +lightComponent.intensity = Rn.Vector3.fromCopyArray([1.0, 1.0, 1.0]); +lightEntity.getTransform().localEulerAngles = Rn.Vector3.fromCopyArray([0, 0, Math.PI / 8]); + +let count = 0; +Rn.System.startRenderLoop(() => { + if (p == null && count > 0) { + p = document.createElement('p'); + p.setAttribute('id', 'rendered'); + p.innerText = 'Rendered.'; + document.body.appendChild(p); + } + + if (window.isAnimating) { + // const date = new Date(); + } + + Rn.System.process(expressions); + + count++; +}); window.exportGltf2 = function () { Rn.Gltf2Exporter.export('Rhodonite');