LittleJS 1.30.0

Render3D

Render3DPlugin

Render3D Plugin - The 3D renderer, camera, lights, shadows and fog

  • There is one of these, in the global render3D
  • It draws the 3D scene before gameRender, so 2D drawing lands on top
  • Set renderAfter2D to draw the 3D scene over the 2D scene instead
  • Settings like lighting and specular are read as each thing draws
  • Every object sets them from its own flags, so you rarely touch them

Constructor

new Render3DPlugin()render3d.js:561

Create the global 3D renderer, call in gameInit

new Render3DPlugin;
render3D.camera.pos = vec3(0, 5, 10);
render3D.camera.lookAt(vec3());
new EngineObject3D(vec3(), buildBox());

Members

Methods

Members

additive : booleanrender3d.js:841

Additive blending instead of alpha, in the transparent stage

ambientColor : Colorrender3d.js:591

Ambient light color, from above when ambientGroundColor is set

ambientGroundColor : Color|undefinedrender3d.js:596

Ambient light from below: set, the ambient blends from this on faces pointing down to ambientColor on faces pointing up, the way a sky and a ground light a scene; setSky sets both from its colors

anisotropy : numberrender3d.js:690

Anisotropic filtering for textures seen at an angle, 1 to 16, 1 is off; needs mipmaps

attribValues : Array<Array<number>>render3d.js:803
billboardMesh : Meshrender3d.js:706

A square of size 1 facing +Z with the tile across it, the corners in the order drawBillboard writes them; a ParticleEmitter3D draws its particles as instances of it, each with its own matrix

blend : booleanrender3d.js:945

Blending on, set by the stages

A box of size 1 that drawBox uses, for any object that is a box; set the object's scale3D and color instead of editing the mesh, which would change every box that uses it

The camera

cameraDepthFramebuffer : WebGLFramebuffer|undefinedrender3d.js:777
cameraDepthTexture : WebGLTexture|undefinedrender3d.js:775
cameraForward : Vector3render3d.js:729

Camera forward axis this frame

Camera right axis this frame

Camera up axis this frame

capture : Mesh|undefinedrender3d.js:814
captureDepth : WebGLRenderbuffer|undefinedrender3d.js:757
captureFramebuffer : WebGLFramebuffer|undefinedrender3d.js:755
capturingCube : CubeMap|undefinedrender3d.js:753
cubeCaptures : Set<CubeMap>render3d.js:751
cullBackFaces : booleanrender3d.js:859

Skip back faces, set by drawMesh from each mesh: off for strips so they show from both sides

currentProgram : WebGLProgram|undefinedrender3d.js:740
depthTest : booleanrender3d.js:848

Test against the depth buffer, reset to true before each object and callback; a draw with it off goes over what was drawn before it and under what is drawn after, by render order, which ends the batch of meshes before it, so one per object costs a draw per object

depthTexture : booleanrender3d.js:626

Draw the camera's depth into a texture each frame for post processing: PostProcessPlugin hands it to its shader as iChannel2, read with sceneDepth(uv); off by default and free when off, on it draws the solid objects of the default layer once more, depth only

depthWrite : booleanrender3d.js:853

Write to the depth buffer, owned by the stages: on for opaque, off for transparent

emissive : numberrender3d.js:836

How much a surface lights itself, set per object by its emissive

emissiveMap : TextureInfo|undefinedrender3d.js:897

Emissive map for the next draws, set from each object's emissiveMap

emissiveMapColor : Colorrender3d.js:916

Multiplies the emissive map, set from each object's emissiveMapColor; compared by its rgb, so a Color changed in place is seen when it is set again, and undefined is white

environment : CubeMap|undefinedrender3d.js:676

The world around, what reflective surfaces reflect: an object's reflectivity says how much and its shininess how sharp, the same shininess that tightens its highlight: 10000 a mirror, 1000 polished, 10 a wide blur; undefined reflects the sky's colors as setSky gave them; a cube map holds GPU memory until its dispose(), so one made again and again, as for a sky that changes, disposes the one it replaces, or a captured one is captured into again

environmentMap : CubeMap|undefinedrender3d.js:902

The cube map the next draws reflect in place of render3D.environment, set from each object's environment

fogColor : Color|undefinedrender3d.js:599

Fog color, uses canvasClearColor when undefined

fogDepth : booleanrender3d.js:606

Measure fog by depth along the view instead of distance from the camera, so fog is even across the screen like a classic depth fog; the fade below is measured the same way

fogEnd : numberrender3d.js:603

Distance from the camera where fog is total, 0 disables fog

fogFadeEnd : numberrender3d.js:611

Where see through draws are fully transparent, 0 turns the fade off; distant things melt into a sky or backdrop drawn behind them instead of into the fog color

fogFadeStart : numberrender3d.js:608

Where see through draws start to fade to transparent, measured like the fog

fogStart : numberrender3d.js:601

Distance from the camera where fog starts

frustumCulling : booleanrender3d.js:682

Skip meshes whose bounding sphere is outside the view

frustumPlanes : Array<Array<number>>render3d.js:734

Added to the velocity3D of every object with a mass each frame, scaled by its gravityScale; sync2D objects use the 2D gravity

instanceBuffers : Array<WebGLBuffer>render3d.js:798
instanceMeshes : Array<Mesh>render3d.js:801
instancing : booleanrender3d.js:685

Draw every use of a mesh in the opaque stage as one instanced call, mesh.instanced overrides it per mesh

isRendering : booleanrender3d.js:712

True while the 3D pass is running, 3D draws are only valid then

lighting : booleanrender3d.js:831

Apply lighting, when false draws plain vertex color times texture and casts no shadow; off for billboards, lines, ribbons and soft discs, an object sets emissive instead

mipmaps : booleanrender3d.js:688

Sample textures through mipmaps so they do not shimmer in the distance, false uses each texture's own filtering like 2D

mirrored : booleanrender3d.js:865

The transform mirrors the draw, so the other winding is the front, set by drawMesh from each transform

normalMap : TextureInfo|undefinedrender3d.js:882

Normal map for the next draws, set from each object's normalMap

normalScale : numberrender3d.js:887

How strongly the normal map bends the surface, set from each object's normalScale

onRenderOpaque : function|undefinedrender3d.js:658

Draw solid world here, it runs again for shadows so only draw in it

onRenderTransparent : function|undefinedrender3d.js:661

Draw see through things here, like glows, billboards and soft shadows

pixelated : booleanrender3d.js:940

Keep texture pixels hard edged, no mipmaps and no blending between them, set per object by pixelated

A flat square of size 1 facing +Y, seen from above only, for floors, water and decals; stand it up with the object's rotation3D, and size it with scale3D

planeMeshDoubleSided : Meshrender3d.js:703

The same square seen and lit from both sides, for signs, cards and leaves

program : WebGLProgram|undefinedrender3d.js:738
projectionMatrix : Matrix4render3d.js:718

This frame's projection matrix

receiveShadow : booleanrender3d.js:934

Darken by the shadow map when shadows are on, turn it off for things that should stay lit inside a shadow

reflectivity : numberrender3d.js:892

How much the surface reflects the sky, 0 to 1, set from each object's reflectivity

renderAfter2D : booleanrender3d.js:678

Draw the 3D scene on top of the 2D scene instead of under it

roundLighting : booleanrender3d.js:909

Light the next billboards as if they bulge toward the camera like a ball, lit on the side toward each light, in place of the same all over; set from each object's roundLighting, a normal map overrides it

samplerKey : string|undefinedrender3d.js:768
samplers : Map<number, WebGLSampler>render3d.js:766
shader : Shader|undefinedrender3d.js:928

Custom Shader for the next draws, set from each object's shader; undefined draws with the plugin's own

shadowBias : numberrender3d.js:651

Stops surfaces shadowing themselves, raise for speckles, lower if shadows drift off; a share of the shadow map's depth, twice shadowRange for the sun and a spotlight's radius, so the gap behind a caster grows with the range as the map's texels do, and the speckles they make stay away

shadowCenter : Vector3|undefinedrender3d.js:647

Center of the shadowed area, read each frame, undefined follows the camera

shadowFramebuffer : WebGLFramebuffer|undefinedrender3d.js:772
shadowLight : Light3D|undefinedrender3d.js:640

A spotlight, a Light3D with a coneAngle, to cast the shadows in place of the sun, a flashlight in the dark: the shadow map looks down its cone, as far as its radius, and the sun still lights the scene but casts none; undefined for the sun, as is a light that is off or has no cone

shadowMapSize : numberrender3d.js:635

Size of the shadow map in pixels, bigger is sharper and slower

shadowMatrix : Matrix4render3d.js:722

This frame's light view projection for the shadow map

shadowPass : booleanrender3d.js:714

True while the shadow map is being drawn, draws go to the depth only shader

shadowPassMatrix : Matrix4render3d.js:747
shadowPlanes : Array<Array<number>>render3d.js:736
shadowProgram : WebGLProgram|undefinedrender3d.js:745
shadowRange : numberrender3d.js:644

World size the shadow map covers around shadowCenter, smaller is sharper; it is a square facing the light, so it turns as the light does, and about 1.5 times an area's width covers it from any angle

shadows : booleanrender3d.js:630

Cast real shadows from the sun, off by default and free when off

shadowShader : WebGLProgram|undefinedrender3d.js:743
shadowSoftness : numberrender3d.js:653

How much to blur the shadow edges

shadowTexture : WebGLTexture|undefinedrender3d.js:770
shininess : numberrender3d.js:877

The highlight's exponent, how small and sharp it is: 4 is broad like rubber, 100 sharp like polished metal; set from each object's shininess

sky : Mesh|undefinedrender3d.js:664

Sky dome from buildSky or setSky, drawn around the camera behind everything

skyBox : CubeMap|undefinedrender3d.js:669

A cube map drawn as the sky, behind everything, in place of the sky dome; an orthographic camera looks the same way through every pixel, so it sees one color of it; fog fades to fogColor, not to the sky box, so with fog set fogColor to its horizon's color

skyBoxProgram : WebGLProgram|undefinedrender3d.js:760
skyBoxVao : WebGLVertexArrayObject|undefinedrender3d.js:762
smoothShading : booleanrender3d.js:621

Default for every builder's smooth argument: true for smooth vertex normals, false for flat faces

softShadowHeight : number|HeightMap|functionrender3d.js:618

Floor for objects with a softShadow: a height, a HeightMap, or (x, z) => y

sortTransparent : booleanrender3d.js:680

Draw see through things far to near so they blend correctly

soundDefaultRange : numberrender3d.js:633

How far a sound played with playSound is heard when it was made with no range of its own, in world units; further than the 2D soundDefaultRange, a 3D world is bigger

specular : numberrender3d.js:871

Strength of the highlight where the sun and the Light3D objects reflect, 0 is none and 1 adds a light's full color at its brightest; shininess sets its size

sphereMesh : Meshrender3d.js:697

A smooth sphere of diameter 1 that drawSphere uses, shared the same way as boxMesh

stateVersion : numberrender3d.js:576

Goes up when a draw state field changes, so a batch sees at a glance that none did

streamBuffer : WebGLBuffer|undefinedrender3d.js:796
streamState : Object|undefinedrender3d.js:811
streamTileInfo : TextureInfo|undefinedrender3d.js:809

Sunlight color

sunDirection : Vector3render3d.js:587

Direction toward the sun, where its light comes from, like a directional Light3D; read at each draw, and any length will do, the shading and the shadows normalize it themselves; the sun is the one light that casts shadows

transparentQueue : Array<{distance: number, state: Object, draw: function(): void}>|undefinedrender3d.js:816
uniforms : WeakMap<WebGLProgram, Object<string, (WebGLUniformLocation|null)>>render3d.js:783
uniformValues : Object<string, Array<number>>render3d.js:785
vao : WebGLVertexArrayObject|undefinedrender3d.js:749

This frame's view matrix

viewProjection : Matrix4render3d.js:720

This frame's combined view projection

whiteTexture : WebGLTexture|undefinedrender3d.js:764

Methods

bake(drawFunction) → Meshrender3d.js:1239

Build a mesh once out of draw calls, instead of redrawing the shapes every frame

  • Call the same drawStrip, drawQuad and drawBox calls inside, and get a mesh back
  • Strips inside a bake ignore their tileInfo, the finished mesh picks the texture when it draws
  • drawMesh, drawBox and drawSphere copy their mesh in, moved and tinted, their tileInfo dropped too
  • The mesh skips its back faces like any, set doubleSided when what was drawn is open
drawFunction function
drawBillboard(pos, size, tileInfo, color, angle, upright) → voidrender3d.js:1462

Draw a flat square that always faces the camera

  • Lit with no direction, since it always faces the camera: each light by how near it is, the sun where its light reaches, the ambient and the shadows, the same from any side, so a cloud is brighter by a light in it; with roundLighting it is lit as a ball, bright on the side toward each light, and with a normal map as a card facing the camera; no specular or reflection
  • An additive one is light of its own and stays unlit, and emissive 1 keeps its own colors
  • Draw it from onRenderTransparent or a transparent object so it can fade
pos Vector3

Center

size Vector2 optional

World units

tileInfo TileInfo|TextureInfo optional
color Color optional
angle number optional, default 0

Rotation in the camera plane, counter clockwise

upright boolean optional, default false

Stand on world up and only turn to face the camera, for sprites on the ground

drawBox(pos, size, color, rotation)render3d.js:1434

Draw a box, untextured, for blocking out a scene without meshes or objects

pos Vector3

Center

size Vector3|number optional, default 1

Full size, a number for a cube

color Color optional
rotation Vector3 optional

vec3(pitch, yaw, roll)

drawLine(posA, posB, width, color)render3d.js:1566

Draw a line as a camera facing ribbon, unlit

posA Vector3
posB Vector3
width number optional, default 0.1
color Color optional
drawMesh(mesh, matrix, tileInfo, color) → voidrender3d.js:1117

Draw a mesh with the current draw state, batched with its other uses in the opaque stage when instancing is on

mesh Mesh
matrix Matrix4|Vector3 optional

Object transform, or just a position to draw it at

tileInfo TileInfo|TextureInfo optional

Texture, mesh uvs map across the tile or the whole texture

color Color optional

Tint

drawQuad(a, b, c, d, tileInfo, color)render3d.js:1538

Draw a quad from four corners in loop order, counter clockwise seen from the front, a is the top left of the texture

a Vector3
b Vector3
c Vector3
d Vector3
tileInfo TileInfo|TextureInfo optional
color Color|Array<Color> optional

One for all or one per corner

drawRibbon(points, width, tileInfo, color, side)render3d.js:1580

Draw a ribbon along a path, unlit and visible from both sides; width and color can change along it

  • The texture runs along the length, u from the first point to the last
  • A path that ends where it starts is a loop, and joins with no seam
points Array<Vector3>

Center line in order, at least two

width number|Array<number> optional, default 0.1

Full width, one for all or one per point

tileInfo TileInfo|TextureInfo optional
color Color|Array<Color> optional

One for all or one per point

side Vector3|Array<Vector3> optional

Direction across the ribbon, one for all or one per point, default faces the camera

Draw render3D.skyBox, or render3D.sky around the camera, unlit, unfogged and behind everything, called automatically by the pass

drawSoftDisc(pos, size, color, normal, sides) → voidrender3d.js:1620

Draw a disc that fades to transparent at the rim, unlit, for glows, puffs and sky dots

pos Vector3

Center

size number optional, default 1

Diameter

color Color optional
normal Vector3 optional

Facing direction, faces the camera by default

sides number optional, default 16
drawSoftShadow(pos, size, floorHeight, color, lift) → voidrender3d.js:1645

Draw a soft round shadow on the ground under something, much cheaper than a real shadow

  • Draw it from onRenderTransparent or from a transparent object
pos Vector3

Position of the thing casting the shadow

size number optional, default 1

Diameter

floorHeight number|HeightMap|function optional, default 0

Height of the ground, a HeightMap, or (x, z) => y to follow terrain

color Color optional
lift number optional, default 0.02

How far above the ground to draw, raise it if the shadow cuts into rough ground

drawSphere(pos, size, color)render3d.js:1443

Draw a sphere, untextured and smooth shaded

pos Vector3

Center

size number optional, default 1

Diameter

color Color optional
drawStrip(points, normals, uvs, colors, tileInfo) → voidrender3d.js:1171

Draw a triangle strip, batched into the stream with the current draw state

  • Strip order: the first three points make a triangle, then each point makes another with the two before it
  • List the first three points counter clockwise as seen from the front, or the face points away and may vanish when back faces are culled
  • inside a bake the strip goes into the mesh instead, in the transparent stage it is queued for sorting and the arrays are read when the queue replays, so leave them unchanged until the stage ends
points Array<Vector3>

In strip order

normals Vector3|Array<Vector3> optional

One for all or one per point, default up

uvs Vector2|Array<Vector2> optional

One for all or one per point, 0-1 across the tile

colors Color|Array<Color> optional

One for all or one per point, vertex colors come before the texture

tileInfo TileInfo|TextureInfo optional

Texture for this strip

drawStripUnlit(points, normals, uvs, colors, tileInfo)render3d.js:1212

Draw a strip with lighting off, for camera facing shapes where the light direction means nothing

points Array<Vector3>

Strip order

normals Vector3|Array<Vector3> optional
uvs Vector2|Array<Vector2> optional
colors Color|Array<Color> optional
tileInfo TileInfo|TextureInfo optional
drawTriangle(a, b, c, color)render3d.js:1554

Draw a triangle, counter clockwise from outside is the front

a Vector3
b Vector3
c Vector3
color Color optional

Draw the pending stream vertices as one strip with the state they were drawn under, called automatically when needed

flushTransparentQueue()render3d.js:1324

Draw the queued transparent draws far to near with the state each was drawn under, called automatically at the end of the transparent stage

isSphereVisible(center, radius) → booleanrender3d.js:1106

Is any part of a sphere on screen this frame, the test that skips meshes the camera cannot see

  • While the shadow map is drawing it tests the shadow area instead
center Vector3
radius number
pick(from, objects) → Object|undefinedrender3d.js:1044

Find the nearest object under a screen position or along a ray, for clicking on things

  • A mesh is hit on its triangles, the ones that face the ray as they are drawn, both sides of a doubleSided mesh; a sprite is hit as the quad it draws, and a height map, voxel map or mesh collider on its surface
  • engineObjectsRaycast3D is the other half of this, every object along a ray instead of the nearest
from Vector2|Ray3D

A screen position like mousePosScreen, or a ray to look along

objects Array<EngineObject> optional

Defaults to every object; only those with a mesh or a sprite count, and the height maps, voxel maps and mesh colliders, on their surfaces

playSound(sound, pos3D, volume, pitch, randomnessScale, loop, paused) → SoundInstance|undefinedrender3d.js:1068

Play a sound at a 3D position, quieter with distance from the camera and panned by its side, like Sound.play with a 2D position; a sound made with no range of its own is heard to soundDefaultRange, 100, and one given a range keeps it

sound Sound
pos3D Vector3
volume number optional, default 1
pitch number optional, default 1
randomnessScale number optional, default 1

How much to scale pitch randomness

loop boolean optional, default false
paused boolean optional, default false

Start it paused

Returns
  • undefined when out of range or sound is off
playSoundLoop(sound, pos3D, volume, pitch, randomnessScale) → SoundInstance|undefinedrender3d.js:1098

Play a sound on a loop at a 3D position, the same as playSound with loop on

  • Its volume and pan are set when it starts, change or stop it through the SoundInstance returned
sound Sound
pos3D Vector3
volume number optional, default 1
pitch number optional, default 1
randomnessScale number optional, default 1

How much to scale pitch randomness

Returns
  • undefined when out of range or sound is off
queueTransparent(pos, draw) → voidrender3d.js:1309

Queue a draw for the transparent stage, replayed far to near with the current draw state, or draw it now when sorting is off

  • The draw runs later, so it should hold copies of any values the caller may change before then
pos Vector3

Where the draw is, for sorting

draw function
renderStages(objects, isDefault)render3d.js:1256

Draw a layer's objects, solid ones first and see through ones after, called automatically

  • The main layer also draws the sky, the render callbacks and the debug shapes
objects Array<EngineObject3D>
isDefault boolean optional, default true
screenToGround(screenPos, groundHeight, canvasSize) → Vector3|undefinedrender3d.js:1029

Where a screen position lands on a flat ground plane, for top down games; use HeightMap.raycast for terrain

screenPos Vector2

Same space as mousePosScreen

groundHeight number optional, default 0

World height of the ground plane

canvasSize Vector2 optional

Defaults to the main canvas size, as in screenToRay

Returns
  • undefined when the ray misses the plane
screenToRay(screenPos, canvasSize) → Ray3Drender3d.js:1006

Get the world ray under a screen position, for clicking on things in 3D

  • Uses the camera where it is right now, so it is fine to call from gameUpdate
  • It brings the view matrices up to date for that canvas, so worldToScreen stays its exact opposite
screenPos Vector2

Same space as mousePosScreen

canvasSize Vector2 optional

Defaults to the main canvas size

Returns
  • Starts at the camera with a unit direction, or on the near plane when orthographic
setFog(fogStart, fogEnd, fogColor)render3d.js:1418

Set where fog starts and ends, and its color

fogStart number

Distance from the camera where fog starts

fogEnd number

Distance where fog is total, 0 disables fog

fogColor Color optional

Leaves the color alone when not passed, setSky sets it to the horizon

setSky(topColor, horizonColor, bottomColor, ambient) → Meshrender3d.js:1404

Build a sky dome, set it as the sky, and light the scene by it: the fog takes the horizon color, and the ambient light comes from the top color above and the bottom color below, both at the ambient strength

topColor Color optional

Straight up

horizonColor Color optional

Level with the camera

bottomColor Color optional

Straight down, defaults to the horizon color

ambient number optional, default 0.5

How much of the sky colors lights the scene as ambient, 0 for none

Returns
  • The dome, also in render3D.sky
updateMatrices(aspect)render3d.js:953

Rebuild the view and projection matrices from the camera, called automatically each frame

aspect number optional

Width over height, defaults to the main canvas

updateShadowMatrix()render3d.js:1358

Rebuild the light's view projection around the shadow center, called automatically each frame shadows are on

worldToClip(pos) → Vector3|undefinedrender3d.js:974

Where a world point lands on screen as -1 to 1 across and up, with z as depth

  • Uses this frame's camera, call updateMatrices first if the camera just moved
pos Vector3
Returns
  • undefined when behind the camera or closer than the near plane
worldToScreen(pos, canvasSize) → Vector2|undefinedrender3d.js:992

Project a world point to screen space pixels, same space as mousePosScreen

  • The opposite of screenToRay, and it takes the same canvas so the pair agree
pos Vector3
canvasSize Vector2 optional

Defaults to the main canvas size, as in screenToRay; the projection is whatever updateMatrices last built, which screenToRay does for its canvas

Returns
  • undefined when behind the camera or closer than the near plane