Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Implement Projectors to support textured lighting #13057

Closed
wants to merge 6 commits into from
Closed

Implement Projectors to support textured lighting #13057

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
6930153
implement ProjectorLights to support textured lighting
usefulthink Jan 6, 2018
2844fec
add attenuation from texture-alpha
usefulthink Jan 7, 2018
981d1e0
glsl whitespace adjustments
usefulthink Jan 7, 2018
7fb8f65
implement support for texture-matrix
usefulthink Jan 7, 2018
24a4da0
rename ProjectorLight to Projector
usefulthink Jan 8, 2018
7d94569
add docs
usefulthink Jan 11, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
185 changes: 185 additions & 0 deletions docs/api/lights/Projector.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,185 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<base href="../../" />
<script src="list.js"></script>
<script src="page.js"></script>
<link type="text/css" rel="stylesheet" href="page.css" />
</head>
<body>
[page:Object3D] &rarr; [page:Light] &rarr;

<h1>[name]</h1>

<div class="desc">
The projector is a light-source that emits light from a single point in one
direction, along a rectangular cone that increases in size the further from the light it gets.
The color of the light is read from a texture to produce a projector-like effect.<br /><br />

This light can cast shadows - see the [page:ProjectorShadow] page for details.
</div>




<h2>Example</h2>

<iframe src='../examples/webgl_lights_projector.html'></iframe>
<div>
[example:webgl_lights_projector View in Examples ]
</div>

<!--h2>Other Examples</h2>

<div>
[example:webgl_interactive_cubes_gpu interactive / cubes / gpu ]<br />
</div-->

<h2>Code Example</h2>
<code>
// projector shining from the side, casting a shadow
var projector = new THREE.Projector( 0xffffff );

projector.position.set( 100, 1000, 100 );
projector.map = new THREE.TextureLoader().load(textureUrl);
projector.fov = 30;
projector.aspect = 16 / 9;

projector.castShadow = true;

projector.shadow.mapSize.width = 1024;
projector.shadow.mapSize.height = 1024;

projector.shadow.camera.near = 500;
projector.shadow.camera.far = 4000;

scene.add( projector );
</code>

<h2>Constructor</h2>


<h3>[name]( [page:Integer color], [page:Float intensity], [page:Float distance], [page:Float fov], [page:Float aspect], [page:Float decay] )</h3>
<div>
[page:Integer color] - (optional) hexadecimal color of the light. Default is 0xffffff (white).<br />
[page:Float intensity] - (optional) numeric value of the light's strength/intensity. Default is 1.<br /><br />
[page:Float distance] - Maximum distance from origin where light will shine whose intensity
is attenuated linearly based on distance from origin. <br />
[page:Float fov] - The vertical field-of-view for the projector in degrees.<br />
[page:Float aspect] - The aspect-ratio (width / height) of the beam. Default is 1.<br />
[page:Float decay] - The amount the light dims along the distance of the light.<br /><br />

Creates a new [name].
</div>

<h2>Properties</h2>

See the base [page:Light Light] class for common properties.


<h3>[property:Vector3 position]</h3>
<div>
The position of the light-source in it's reference coordinate-system.
This is set equal to [page:Object3D.DefaultUp] (0, 1, 0), so that the light shines from the top down.
</div>

<h3>[property:Object3D target]</h3>
<div>
The Projector points from its [page:.position position] to target.position. The default
position of the target is *(0, 0, 0)*.<br />

*Note*: For the target's position to be changed to anything other than the default,
it must be added to the [page:Scene scene] using
<code>
scene.add( light.target );
</code>

This is so that the target's [page:Object3D.matrixWorld matrixWorld] gets automatically
updated each frame.<br /><br />

It is also possible to set the target to be another object in the scene (anything with a
[page:Object3D.position position] property), like so:
<code>
var targetObject = new THREE.Object3D();
scene.add(targetObject);

projector.target = targetObject;
</code>
The projector will now track the target object.
</div>

<h3>[property:Boolean isProjector]</h3>
<div>
Used to check whether this or derived classes are projectors. Default is *true*.<br /><br />

You should not change this, as it used internally for optimisation.
</div>

<h3>[property:Texture map]</h3>
<div>
A [page:Texture] used to calculate the color of the light at a given fragment-position.
</div>

<h3>[property:Float fov]</h3>
<div>
The vertical field-of-view angle of the projector specified in degrees. Should be smaller than 180.
</div>

<h3>[property:Float aspect]</h3>
<div>
Aspect ratio (width / height) of the projector-beam. Default is 1.
</div>

<h3>[property:Float distance]</h3>
<div>
If non-zero, light will attenuate linearly from maximum intensity at the light's
position down to zero at this distance from the light. Default is *0.0*.
</div>

<h3>[property:Float decay]</h3>
<div>
The amount the light dims along the distance of the light.<br />
In [page:WebGLRenderer.physicallyCorrectLights physically correct] mode, decay = 2 leads to
physically realistic light falloff. The default is *1*.
</div>

<h3>[property:Float power]</h3>
<div>
The light's power.<br />
In [page:WebGLRenderer.physicallyCorrectLights physically correct] mode, the luminous
power of the light measured in lumens. Default is *4Math.PI*. <br /><br />

This is directly related to the [page:.intensity intensity] in the ratio
<code>
power = intensity * &pi;
</code>
and changing this will also change the intensity.
</div>


<h3>[property:Boolean castShadow]</h3>
<div>
If set to *true* light will cast dynamic shadows. *Warning*: This is expensive and
requires tweaking to get shadows looking right. See the [page:ProjectorShadow] for details.
The default is *false*.
</div>

<h3>[property:ProjectorShadow shadow]</h3>
<div>
A [page:ProjectorShadow] used to calculate shadows for this light.
</div>

<h2>Methods</h2>

See the base [page:Light Light] class for common methods.

<h3>[method:Projector copy]( [page:SpotLight source] )</h3>
<div>
Copies value of all the properties from the [page:Projector source] to this
Projector.
</div>

[link:https://github.com/mrdoob/three.js/blob/master/src/[path].js src/[path].js]
</body>
</html>
102 changes: 102 additions & 0 deletions docs/api/lights/shadows/ProjectorShadow.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,102 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<base href="../../../" />
<script src="list.js"></script>
<script src="page.js"></script>
<link type="text/css" rel="stylesheet" href="page.css" />
</head>
<body>
[page:LightShadow] &rarr;

<h1>[name]</h1>

<div class="desc">
This is used internally by [page:Projector Projectors] for calculating shadows.
</div>

<h2>Example</h2>
<div>
<code>
//Create a WebGLRenderer and turn on shadows in the renderer
var renderer = new THREE.WebGLRenderer();
renderer.shadowMap.enabled = true;
renderer.shadowMap.type = THREE.PCFSoftShadowMap; // default THREE.PCFShadowMap

//Create a Projector and turn on shadows for the projector
var projector = new THREE.Projector( 0xffffff );
projector.map = new THREE.TextureLoader().load(TEXTURE_URL);
projector.castShadow = true; // default false
scene.add( projector );

//Set up shadow properties for the projector
projector.shadow.mapSize.width = 512; // default
projector.shadow.mapSize.height = 512; // default
projector.shadow.camera.near = 0.5; // default
projector.shadow.camera.far = 500 // default

//Create a sphere that cast shadows (but does not receive them)
var sphereGeometry = new THREE.SphereBufferGeometry( 5, 32, 32 );
var sphereMaterial = new THREE.MeshStandardMaterial( { color: 0xff0000 } );
var sphere = new THREE.Mesh( sphereGeometry, sphereMaterial );
sphere.castShadow = true; //default is false
sphere.receiveShadow = false; //default
scene.add( sphere );

//Create a plane that receives shadows (but does not cast them)
var planeGeometry = new THREE.PlaneBufferGeometry( 20, 20, 32, 32 );
var planeMaterial = new THREE.MeshStandardMaterial( { color: 0x00ff00 } )
var plane = new THREE.Mesh( planeGeometry, planeMaterial );
plane.receiveShadow = true;
scene.add( plane );

//Create a helper for the shadow camera (optional)
var helper = new THREE.CameraHelper( projector.shadow.camera );
scene.add( helper );
</code>
</div>


<h2>Constructor</h2>

The constructor creates a [page:PerspectiveCamera PerspectiveCamera] to manage the shadow's view of the world.

<h2>Properties</h2>
See the base [page:LightShadow LightShadow] class for common properties.


<h3>[property:Camera camera]</h3>
<div>
The projector's view of the world. This is used to generate a depth map of the scene; objects behind
other objects from the projector's perspective will be in shadow.<br /><br />

The default is a [page:PerspectiveCamera] with [page:PerspectiveCamera.near near] clipping plane at 0.5.
The [page:PerspectiveCamera.fov fov] will track the [page:Projector.angle angle] property of the owning
[page:Projector Projector] via the [page:ProjectorShadow.update update] method. Similarly, the
[page:PerspectiveCamera.aspect aspect] property will track the aspect of the
[page:LightShadow.mapSize mapSize]. If the [page:Projector.distance distance] property of the projector is
set, the [page:PerspectiveCamera.far far] clipping plane will track that, otherwise it defaults to 500.

</div>

<h3>[property:Boolean isProjectorShadow]</h3>
<div>
Used to check whether this or derived classes are spot projector shadows. Default is *true*.<br /><br />

You should not change this, as it used internally for optimisation.
</div>

<h2>Methods</h2>
See the base [page:LightShadow LightShadow] class for common methods.

<h3>[method:ProjectorShadow update]( [page:Projector projector] )</h3>
<div>
Updates the internal perspective [page:.camera camera] based on the passed in [page:Projector projector].
</div>

<h2>Source</h2>

[link:https://github.com/mrdoob/three.js/blob/master/src/lights/[name].js src/lights/[name].js]
</body>
</html>
6 changes: 4 additions & 2 deletions docs/list.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -206,13 +206,15 @@ var list = {
"Light": "api/lights/Light",
"PointLight": "api/lights/PointLight",
"RectAreaLight": "api/lights/RectAreaLight",
"SpotLight": "api/lights/SpotLight"
"SpotLight": "api/lights/SpotLight",
"Projector": "api/lights/Projector"
},

"Lights / Shadows": {
"DirectionalLightShadow": "api/lights/shadows/DirectionalLightShadow",
"LightShadow": "api/lights/shadows/LightShadow",
"SpotLightShadow": "api/lights/shadows/SpotLightShadow"
"SpotLightShadow": "api/lights/shadows/SpotLightShadow",
"ProjectorShadow": "api/lights/shadows/ProjectorShadow"
},

"Loaders": {
Expand Down
1 change: 1 addition & 0 deletions examples/files.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -67,6 +67,7 @@ var files = {
"webgl_lights_pointlights2",
"webgl_lights_spotlight",
"webgl_lights_spotlights",
"webgl_lights_projector",
"webgl_lights_rectarealight",
"webgl_lines_colors",
"webgl_lines_cubes",
Expand Down
Loading