Skip to content

Commit 430b44a

Browse files
marklundinmvaligurskyraytranuk
authored
Feature/arealights (playcanvas#2535)
 Co-authored-by: Martin Valigursky <mvaligursky@snap.com> Co-authored-by: Ray Tran <raytranuk@users.noreply.github.com>
1 parent f5aad7a commit 430b44a

File tree

19 files changed

+1227
-99
lines changed

19 files changed

+1227
-99
lines changed

‎examples/assets/scripts/lights/area-light-lut.js

Lines changed: 13 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎examples/assets/textures/seaside-rocks01-color.jpg

152 KB
Loading

‎examples/assets/textures/seaside-rocks01-gloss.jpg

71 KB
Loading

‎examples/assets/textures/seaside-rocks01-normal.jpg

136 KB
Loading

‎examples/examples.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@ var categories = [
1616
}, {
1717
name: "graphics",
1818
examples: [
19+
"area-lights",
1920
"area-picker",
2021
"batching-dynamic",
2122
"grab-pass",

‎examples/graphics/area-lights.html

Lines changed: 266 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,266 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>PlayCanvas Area lights</title>
5+
<meta charset="utf-8">
6+
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
7+
<link rel="icon" type="image/png" href="../playcanvas-favicon.png" />
8+
<script src="../../build/playcanvas.js"></script>
9+
<script src="../../build/playcanvas-extras.js"></script>
10+
<style>
11+
body {
12+
margin: 0;
13+
overflow-y: hidden;
14+
}
15+
</style>
16+
</head>
17+
18+
<body>
19+
<!-- The canvas element -->
20+
<canvas id="application-canvas"></canvas>
21+
22+
<!-- The script -->
23+
<script>
24+
var canvas = document.getElementById("application-canvas");
25+
26+
// Create the app and start the update loop
27+
var app = new pc.Application(canvas);
28+
29+
</script>
30+
31+
<!-- LUT table for area lights, included after the app has been created -->
32+
<script src="../assets/scripts/lights/area-light-lut.js"></script>
33+
34+
<script>
35+
36+
// helper function to create a primitive with shape type, position, scale, color
37+
function createPrimitive(primitiveType, position, scale, color, assetManifest) {
38+
39+
// create material of specified color
40+
var material = new pc.StandardMaterial();
41+
material.diffuse = color;
42+
material.shininess = 80;
43+
material.useMetalness = true;
44+
45+
if (assetManifest) {
46+
material.diffuseMap = assetManifest[0].asset.resource;
47+
material.normalMap = assetManifest[1].asset.resource;
48+
material.glossMap = assetManifest[2].asset.resource;
49+
material.metalness = 0.7;
50+
}
51+
52+
material.update();
53+
54+
// create primitive
55+
var primitive = new pc.Entity();
56+
primitive.addComponent('model', {
57+
type: primitiveType
58+
});
59+
primitive.model.material = material;
60+
61+
// set position and scale and add it to scene
62+
primitive.setLocalPosition(position);
63+
primitive.setLocalScale(scale);
64+
app.root.addChild(primitive);
65+
66+
return primitive;
67+
}
68+
69+
// helper function to create area light including its visual representation in the world
70+
function createAreaLight(type, shape, position, scale, color, intensity, shadows, range) {
71+
var lightParent = new pc.Entity();
72+
lightParent.translate(position);
73+
app.root.addChild(lightParent);
74+
75+
var light = new pc.Entity();
76+
light.addComponent("light", {
77+
type: type,
78+
shape: shape,
79+
color: color,
80+
intensity: intensity,
81+
falloffMode: pc.LIGHTFALLOFF_INVERSESQUARED,
82+
range: range,
83+
castShadows: shadows,
84+
innerConeAngle: 80,
85+
outerConeAngle: 85,
86+
shadowBias: 0.1,
87+
normalOffsetBias: 0.1,
88+
shadowResolution: 2048
89+
});
90+
91+
light.setLocalScale( scale, scale, scale);
92+
lightParent.addChild(light);
93+
94+
// emissive material that is the light source color
95+
var brightMaterial = new pc.StandardMaterial();
96+
brightMaterial.emissive = color;
97+
brightMaterial.useLighting = false;
98+
brightMaterial.cull = (shape === pc.LIGHTSHAPE_RECT) ? pc.CULLFACE_NONE : pc.CULLFACE_BACK;
99+
brightMaterial.update();
100+
101+
var brightShape = new pc.Entity();
102+
// primitive shape that matches light source shape
103+
brightShape.addComponent("model", {
104+
type: (shape === pc.LIGHTSHAPE_SPHERE) ? "sphere" : (shape === pc.LIGHTSHAPE_DISK) ? "cone" : "plane",
105+
material: brightMaterial,
106+
castShadows: (type === "directional") ? false : true
107+
});
108+
brightShape.setLocalScale( ((type === "directional") ? scale * range : scale), (shape === pc.LIGHTSHAPE_DISK ) ? 0.001 : ((type === "directional") ? scale * range : scale), ((type === "directional") ? scale * range : scale));
109+
lightParent.addChild(brightShape);
110+
111+
// add black primitive shape if not omni-directional or global directional
112+
if (type === "spot") {
113+
// black material
114+
var blackMaterial = new pc.StandardMaterial();
115+
blackMaterial.diffuse = new pc.Color(0, 0, 0);
116+
blackMaterial.useLighting = false;
117+
blackMaterial.cull = (shape === pc.LIGHTSHAPE_RECT) ? pc.CULLFACE_NONE : pc.CULLFACE_BACK;
118+
blackMaterial.update();
119+
120+
var blackShape = new pc.Entity();
121+
blackShape.addComponent("model", {
122+
type: (shape === pc.LIGHTSHAPE_SPHERE) ? "sphere" : (shape === pc.LIGHTSHAPE_DISK) ? "cone" : "plane",
123+
material: blackMaterial
124+
});
125+
blackShape.setLocalPosition(0, 0.01 / scale, 0);
126+
blackShape.setLocalEulerAngles(-180, 0, 0);
127+
brightShape.addChild(blackShape);
128+
}
129+
130+
return lightParent;
131+
}
132+
133+
// A list of assets that need to be loaded
134+
var assetManifest = [
135+
{
136+
type: "texture",
137+
url: "../assets/textures/seaside-rocks01-color.jpg"
138+
},
139+
{
140+
type: "texture",
141+
url: "../assets/textures/seaside-rocks01-normal.jpg"
142+
},
143+
{
144+
type: "texture",
145+
url: "../assets/textures/seaside-rocks01-gloss.jpg"
146+
},
147+
{
148+
type: "container",
149+
url: "../assets/models/statue.glb"
150+
},
151+
];
152+
153+
// Load all assets and then run the example
154+
var assetsToLoad = assetManifest.length;
155+
assetManifest.forEach(function (entry) {
156+
app.assets.loadFromUrl(entry.url, entry.type, function (err, asset) {
157+
if (!err && asset) {
158+
assetsToLoad--;
159+
entry.asset = asset;
160+
if (assetsToLoad === 0) {
161+
run();
162+
}
163+
}
164+
});
165+
});
166+
167+
var camera;
168+
var light1, light2, light3;
169+
var far = 5000.0;
170+
171+
function run() {
172+
173+
app.start();
174+
175+
// Set the canvas to fill the window and automatically change resolution to be the same as the canvas size
176+
app.setCanvasFillMode(pc.FILLMODE_FILL_WINDOW);
177+
app.setCanvasResolution(pc.RESOLUTION_AUTO);
178+
179+
window.addEventListener("resize", function () {
180+
app.resizeCanvas(canvas.width, canvas.height);
181+
});
182+
183+
var miniStats = new pcx.MiniStats(app);
184+
185+
// set up some general scene rendering properties
186+
app.scene.gammaCorrection = pc.GAMMA_SRGB;
187+
app.scene.toneMapping = pc.TONEMAP_ACES;
188+
189+
// setup skydome
190+
app.scene.skyboxMip = 1; // use top mipmap level of cubemap (full resolution)
191+
app.scene.skyboxIntensity = 0.4; // make it darker
192+
193+
// Load a cubemap asset. This DDS file was 'prefiltered' in the PlayCanvas Editor and then downloaded.
194+
var cubemapAsset = new pc.Asset('helipad.dds', 'cubemap', {
195+
url: "../assets/cubemaps/helipad.dds"
196+
}, {
197+
type: pc.TEXTURETYPE_RGBM
198+
});
199+
app.assets.add(cubemapAsset);
200+
app.assets.load(cubemapAsset);
201+
cubemapAsset.ready(function () {
202+
app.scene.setSkybox(cubemapAsset.resources);
203+
});
204+
205+
// create ground plane
206+
createPrimitive("plane", new pc.Vec3(0, 0, 0), new pc.Vec3(20, 20, 20), new pc.Color(0.3, 0.3, 0.3), assetManifest);
207+
208+
// Create a model entity and assign the statue model
209+
var statue = new pc.Entity();
210+
statue.addComponent("model", {
211+
type: "asset",
212+
asset: assetManifest[3].asset.resource.model
213+
});
214+
statue.setLocalScale(0.4, 0.4, 0.4);
215+
app.root.addChild(statue);
216+
217+
218+
// Create the camera, which renders entities
219+
camera = new pc.Entity();
220+
camera.addComponent("camera", {
221+
clearColor: new pc.Color(0.2, 0.2, 0.2),
222+
fov: 60,
223+
farClip: 100000
224+
});
225+
app.root.addChild(camera);
226+
camera.setLocalPosition(0, 2.5, 12);
227+
camera.lookAt(0, 0, 0);
228+
229+
// Create lights with light source shape
230+
light1 = createAreaLight("spot", pc.LIGHTSHAPE_RECT, new pc.Vec3(-3, 4, 0), 4, new pc.Color(1, 1, 1), 2, true, 10);
231+
light2 = createAreaLight("omni", pc.LIGHTSHAPE_SPHERE, new pc.Vec3(5, 2, -2), 2, new pc.Color(1, 1, 0), 2, true, 10);
232+
light3 = createAreaLight("directional", pc.LIGHTSHAPE_DISK, new pc.Vec3(0, 0, 0), 0.2, new pc.Color(0.7, 0.7, 1), 10, true, far);
233+
}
234+
235+
// update things each frame
236+
var time = 0;
237+
var switchTime = 0;
238+
app.on("update", function (dt) {
239+
time += dt;
240+
241+
var factor1 = (Math.sin(time) + 1) * 0.5;
242+
var factor2 = (Math.sin(time * 0.6) + 1) * 0.5;
243+
var factor3 = (Math.sin(time * 0.4) + 1) * 0.5;
244+
245+
if (light1) {
246+
light1.setLocalEulerAngles(pc.math.lerp(-90, 110, factor1), 0, 90);
247+
light1.setLocalPosition(-4, pc.math.lerp(2, 4, factor3), pc.math.lerp(-2, 2, factor2));
248+
}
249+
250+
if (light2) {
251+
light2.setLocalPosition(5, pc.math.lerp(1, 3, factor1), pc.math.lerp(-2, 2, factor2));
252+
}
253+
254+
if (light3) {
255+
256+
light3.setLocalEulerAngles(pc.math.lerp(230, 310, factor2), pc.math.lerp(-30, 0, factor3), 90);
257+
258+
var dir = light3.getWorldTransform().getY();
259+
var campos = camera.getPosition();
260+
261+
light3.setPosition(campos.x + dir.x * far, campos.y + dir.y * far, campos.z + dir.z * far);
262+
}
263+
});
264+
</script>
265+
</body>
266+
</html>

‎src/framework/components/light/component.js

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import { Vec4 } from '../../../math/vec4.js';
66
import {
77
BLUR_GAUSSIAN,
88
LAYERID_WORLD,
9+
LIGHTSHAPE_PUNCTUAL,
910
LIGHTFALLOFF_LINEAR,
1011
MASK_BAKED, MASK_DYNAMIC, MASK_LIGHTMAP,
1112
SHADOW_PCF3,
@@ -159,6 +160,9 @@ var _defineProps = function () {
159160
_defineProperty("intensity", 1, function (newValue, oldValue) {
160161
this.light.intensity = newValue;
161162
});
163+
_defineProperty("shape", LIGHTSHAPE_PUNCTUAL, function (newValue, oldValue) {
164+
this.light.shape = newValue;
165+
});
162166
_defineProperty("castShadows", false, function (newValue, oldValue) {
163167
this.light.castShadows = newValue;
164168
});

‎src/framework/components/light/system.js

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import { Color } from '../../../core/color.js';
22

33
import { Vec2 } from '../../../math/vec2.js';
44

5-
import { LIGHTTYPE_DIRECTIONAL, LIGHTTYPE_POINT, LIGHTTYPE_SPOT } from '../../../scene/constants.js';
5+
import { LIGHTTYPE_DIRECTIONAL, LIGHTTYPE_OMNI, LIGHTTYPE_SPOT } from '../../../scene/constants.js';
66
import { Light } from '../../../scene/light.js';
77

88
import { ComponentSystem } from '../system.js';
@@ -20,7 +20,8 @@ import { LightComponentData } from './data.js';
2020
*/
2121
var lightTypes = {
2222
'directional': LIGHTTYPE_DIRECTIONAL,
23-
'point': LIGHTTYPE_POINT,
23+
'omni': LIGHTTYPE_OMNI,
24+
'point': LIGHTTYPE_OMNI,
2425
'spot': LIGHTTYPE_SPOT
2526
};
2627

@@ -73,6 +74,7 @@ Object.assign(LightComponentSystem.prototype, {
7374

7475
var light = new Light();
7576
light.type = lightTypes[data.type];
77+
light.shape = data.shape;
7678
light._node = component.entity;
7779
light._scene = this.app.scene;
7880
component.data.light = light;

‎src/graphics/device.js

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -682,7 +682,12 @@ var GraphicsDevice = function (canvas, options) {
682682
// #ifdef DEBUG
683683
this._destroyedTextures = new Set(); // list of textures that have already been reported as destroyed
684684
// #endif
685+
686+
// area light LUT format
687+
this._areaLightLutFormat = (this.extTextureFloat) ? PIXELFORMAT_RGBA32F : (this.extTextureHalfFloat && this.textureHalfFloatUpdatable) ? PIXELFORMAT_RGBA16F : PIXELFORMAT_R8_G8_B8_A8;
688+
685689
};
690+
686691
GraphicsDevice.prototype = Object.create(EventHandler.prototype);
687692
GraphicsDevice.prototype.constructor = GraphicsDevice;
688693

‎src/graphics/program-lib/chunks/chunks.js

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -68,6 +68,7 @@ import lightmapSingleVertPS from './lightmapSingleVert.frag';
6868
import lightSpecularAnisoGGXPS from './lightSpecularAnisoGGX.frag';
6969
import lightSpecularBlinnPS from './lightSpecularBlinn.frag';
7070
import lightSpecularPhongPS from './lightSpecularPhong.frag';
71+
import ltc from './ltc.frag';
7172
import metalnessPS from './metalness.frag';
7273
import msdfPS from './msdf.frag';
7374
import normalVS from './normal.vert';
@@ -271,6 +272,7 @@ var shaderChunks = {
271272
lightSpecularAnisoGGXPS: lightSpecularAnisoGGXPS,
272273
lightSpecularBlinnPS: lightSpecularBlinnPS,
273274
lightSpecularPhongPS: lightSpecularPhongPS,
275+
ltc: ltc,
274276
metalnessPS: metalnessPS,
275277
msdfPS: msdfPS,
276278
normalVS: normalVS,

‎src/graphics/program-lib/chunks/falloffInvSquared.frag

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,9 @@
1+
float getFalloffWindow(float lightRadius) {
2+
float sqrDist = dot(dLightDirW, dLightDirW);
3+
float invRadius = 1.0 / lightRadius;
4+
return square( saturate( 1.0 - square( sqrDist * square(invRadius) ) ) );
5+
}
6+
17
float getFalloffInvSquared(float lightRadius) {
28
float sqrDist = dot(dLightDirW, dLightDirW);
39
float falloff = 1.0 / (sqrDist + 1.0);
@@ -8,3 +14,5 @@ float getFalloffInvSquared(float lightRadius) {
814

915
return falloff;
1016
}
17+
18+

0 commit comments

Comments
 (0)