From 1a93bbd1b31cc45ff564eb09ad4c157acf6106a7 Mon Sep 17 00:00:00 2001 From: Martin Valigursky Date: Thu, 29 Sep 2022 10:52:43 +0100 Subject: [PATCH 1/3] Small improvements to physical lights units example --- .../graphics/light-physical-units.tsx | 22 ++++++++++--------- 1 file changed, 12 insertions(+), 10 deletions(-) diff --git a/examples/src/examples/graphics/light-physical-units.tsx b/examples/src/examples/graphics/light-physical-units.tsx index 6759d5890c2..670e343909d 100644 --- a/examples/src/examples/graphics/light-physical-units.tsx +++ b/examples/src/examples/graphics/light-physical-units.tsx @@ -45,10 +45,10 @@ class LightPhysicalUnitsExample { - + - + @@ -91,6 +91,9 @@ class LightPhysicalUnitsExample { app.scene.ambientLight.set(1, 0, 0); app.scene.ambientLuminance = 20000; + // enable area lights which are disabled by default for clustered lighting + app.scene.lighting.areaLightsEnabled = true; + // set the loaded area light LUT data const luts = assets.luts.resource; app.setAreaLightLuts(luts.LTC_MAT_1, luts.LTC_MAT_2); @@ -159,7 +162,7 @@ class LightPhysicalUnitsExample { luminance: 100000 }, rect: { - luminance: 100000 + luminance: 200000 }, camera: { aperture: 16.0, @@ -184,7 +187,7 @@ class LightPhysicalUnitsExample { shutter: 1 / data.get('script.camera.shutter'), sensitivity: data.get('script.camera.sensitivity') }); - camera.setLocalPosition(0, 5, 30); + camera.setLocalPosition(0, 5, 11); camera.camera.requestSceneColorMap(true); camera.addComponent("script"); @@ -202,7 +205,6 @@ class LightPhysicalUnitsExample { app.root.addChild(camera); app.scene.skyboxLuminance = data.get('script.sky.luminance'); - const directionalLight = new pc.Entity(); directionalLight.addComponent("light", { @@ -250,7 +252,7 @@ class LightPhysicalUnitsExample { areaLight.addComponent("light", { type: "spot", shape: pc.LIGHTSHAPE_RECT, - color: pc.Color.WHITE, + color: pc.Color.YELLOW, range: 9999, luminance: data.get('script.rect.luminance'), falloffMode: pc.LIGHTFALLOFF_INVERSESQUARED, @@ -258,13 +260,13 @@ class LightPhysicalUnitsExample { outerConeAngle: 85, normalOffsetBias: 0.1 }); - areaLight.setLocalScale(2, 2, 2); - areaLight.setEulerAngles(90, 180, 0); - areaLight.setLocalPosition(5, 0, -5); + areaLight.setLocalScale(4, 1, 5); + areaLight.setEulerAngles(70, 180, 0); + areaLight.setLocalPosition(5, 3, -5); // emissive material that is the light source color const brightMaterial = new pc.StandardMaterial(); - brightMaterial.emissive = pc.Color.WHITE; + brightMaterial.emissive = pc.Color.YELLOW; brightMaterial.emissiveIntensity = areaLight.light.luminance; brightMaterial.useLighting = false; brightMaterial.cull = pc.CULLFACE_NONE; From 4ba024c036449c6ada9e39cdf112d3ee64f39867 Mon Sep 17 00:00:00 2001 From: Martin Valigursky Date: Thu, 29 Sep 2022 11:49:47 +0100 Subject: [PATCH 2/3] re-arranged labels + wider control panel to fit without clipping --- .../graphics/light-physical-units.tsx | 43 ++++++++++++------- 1 file changed, 27 insertions(+), 16 deletions(-) diff --git a/examples/src/examples/graphics/light-physical-units.tsx b/examples/src/examples/graphics/light-physical-units.tsx index 670e343909d..4271f94c5f5 100644 --- a/examples/src/examples/graphics/light-physical-units.tsx +++ b/examples/src/examples/graphics/light-physical-units.tsx @@ -11,46 +11,46 @@ class LightPhysicalUnitsExample { controls(data: Observer) { return <> - - + + - - + + - + - - - - - - - + - + - + + + - - + + + + + + ; } @@ -314,9 +314,20 @@ class LightPhysicalUnitsExample { } }); + let resizeControlPanel = true; let time = 0; app.on("update", function (dt) { time += dt; + + // resize control panel to fit the content better + if (resizeControlPanel) { + const panel = window.top.document.getElementById('controlPanel'); + if (panel) { + panel.style.width = '360px'; + resizeControlPanel = false; + } + } + if (data.get('script.camera.animate')) { data.set('script.camera.aperture', 3 + (1 + Math.sin(time)) * 5.0); } From ba17019a6df871802ac616571f5bc5f4555bbee4 Mon Sep 17 00:00:00 2001 From: Martin Valigursky Date: Thu, 29 Sep 2022 12:09:07 +0100 Subject: [PATCH 3/3] final cleanup --- .../graphics/light-physical-units.tsx | 66 +++++++++---------- 1 file changed, 33 insertions(+), 33 deletions(-) diff --git a/examples/src/examples/graphics/light-physical-units.tsx b/examples/src/examples/graphics/light-physical-units.tsx index 4271f94c5f5..d01c1810d15 100644 --- a/examples/src/examples/graphics/light-physical-units.tsx +++ b/examples/src/examples/graphics/light-physical-units.tsx @@ -25,10 +25,10 @@ class LightPhysicalUnitsExample { - + - + @@ -179,31 +179,6 @@ class LightPhysicalUnitsExample { app.scene.physicalUnits = data.get('script.scene.physicalUnits'); app.scene.setSkybox(assets.helipad.resources); - // Create an Entity with a camera component - const camera = new pc.Entity(); - camera.addComponent("camera", { - clearColor: new pc.Color(0.4, 0.45, 0.5), - aperture: data.get('script.camera.aperture'), - shutter: 1 / data.get('script.camera.shutter'), - sensitivity: data.get('script.camera.sensitivity') - }); - camera.setLocalPosition(0, 5, 11); - - camera.camera.requestSceneColorMap(true); - camera.addComponent("script"); - camera.script.create("orbitCamera", { - attributes: { - inertiaFactor: 0.2, - focusEntity: sheen1, - distanceMin: 1, - distanceMax: 400, - frameOnStart: false - } - }); - camera.script.create("orbitCameraInputMouse"); - camera.script.create("orbitCameraInputTouch"); - app.root.addChild(camera); - app.scene.skyboxLuminance = data.get('script.sky.luminance'); const directionalLight = new pc.Entity(); @@ -219,9 +194,9 @@ class LightPhysicalUnitsExample { directionalLight.setEulerAngles(45, 35, 0); app.root.addChild(directionalLight); - const pointLight = new pc.Entity(); - pointLight.addComponent("light", { - type: "point", + const omniLight = new pc.Entity(); + omniLight.addComponent("light", { + type: "omni", color: pc.Color.WHITE, castShadows: false, luminance: data.get('script.point.luminance'), @@ -229,8 +204,8 @@ class LightPhysicalUnitsExample { normalOffsetBias: 0.05, shadowResolution: 2048 }); - pointLight.setLocalPosition(0, 5, 0); - app.root.addChild(pointLight); + omniLight.setLocalPosition(0, 5, 0); + app.root.addChild(omniLight); const spotLight = new pc.Entity(); spotLight.addComponent("light", { @@ -282,6 +257,31 @@ class LightPhysicalUnitsExample { areaLight.addChild(brightShape); app.root.addChild(areaLight); + // Create an Entity with a camera component + const camera = new pc.Entity(); + camera.addComponent("camera", { + clearColor: new pc.Color(0.4, 0.45, 0.5), + aperture: data.get('script.camera.aperture'), + shutter: 1 / data.get('script.camera.shutter'), + sensitivity: data.get('script.camera.sensitivity') + }); + camera.setLocalPosition(0, 5, 11); + + camera.camera.requestSceneColorMap(true); + camera.addComponent("script"); + camera.script.create("orbitCamera", { + attributes: { + inertiaFactor: 0.2, + focusEntity: sheen1, + distanceMin: 1, + distanceMax: 400, + frameOnStart: false + } + }); + camera.script.create("orbitCameraInputMouse"); + camera.script.create("orbitCameraInputTouch"); + app.root.addChild(camera); + data.on('*:set', (path: string, value: any) => { if (path === 'script.sun.luminance') { directionalLight.light.luminance = value; @@ -292,7 +292,7 @@ class LightPhysicalUnitsExample { } else if (path === 'script.spot.aperture') { spotLight.light.outerConeAngle = value; } else if (path === 'script.point.luminance') { - pointLight.light.luminance = value; + omniLight.light.luminance = value; } else if (path === 'script.rect.luminance') { areaLight.light.luminance = value; brightMaterial.emissiveIntensity = value;