Class: Thrender

Thrender(ecs, x)

new Thrender(ecs, x)

Parameters:

Name	Type	Description
`ecs`	ECS
`x`	x	{options, ...}

Source:

lib/sys/thrender.js, line 29

Methods

(static) applyTransform(mesh, transf) → {THREE.Mesh}

Set affine transform to mesh's local matrix.

Parameters:

Name	Type	Description
`mesh`	THREE.Mesh
`transf`	array	transformations

Source:

lib/sys/thrender.js, line 499

Returns:

mesh

Type: THREE.Mesh

(static) combineGltfPoints(nodes) → {THREE.Points}

Clone and combine gltf nodes' geometry[position] buffer - the modules vertices.

This method can only handling Visual.vtype == AssetType.point, making points (vertices) can basically rendered.

This is not enough. Animizer would added more components to animize points.

Parameters:

Name	Type	Description
	xv.Components.Obj3
`nodes`	array	nodes loaded from gltf.
`Visual.paras,`	paras	define, size, color...

Source:

lib/sys/thrender.js, line 995

Returns:

points

Type: THREE.Points

(static) createCubeVoxel(cmpObj3, cmpVisual) → {THREE.Mesh}

Create cube voxel. (points evenly dividing in cube).

Return mesh object can be rendered by Thrender.
AssetType: AssetType.refPoint; AssetType.cubeVoxel

Parameters:

Name	Type	Description
`cmpObj3`	Obj3
`cmpVisual`	Visual

Source:

lib/sys/thrender.js, line 1168

Returns:

Type: THREE.Mesh

(static) createCubeVoxel(options, camopt) → {THREE.HemisphereLight}

Setup light of THREE.DirectionalLight & THREE.DirectionalLightShadow.
For parameters' example, see test/html/ecs-basics/light.html

Parameters:

Name Type Attributes Default Description

options

object

Properties

Name	Type	Attributes	Description
`light`	object	<optional>

otpions.light.skyColor number <optional> 0xffffbb

options.light.groundColor number <optional> 0x080820

options.light.pos array <optional> [0, 1, 0.56]

options.light.intensity number <optional> 1.1

otpions.light.castShadow number <optional> true

options.shadow

object

Properties

Name Type Attributes Default Description

mapSize object <optional> {width: 1024, height: 1024}

camera object <optional> {near: 50, far: 2000}

size

number

The shadow cull space size, scaled to default THREE.shadowCamera.width, height, like:

light.shadow.camera.left *= size;
light.shadow.camera.right *= size;
light.shadow.camera.bottom *= size;
light.shadow.camera.top *= size;

cam

object

{near, far}, camera's near, far

Source:

lib/sys/thrender.js, line 1223

Returns:

with options = arg-options

Type: THREE.HemisphereLight

(static) createObj3Line(obj3, paras, material) → {object}

Generate line, segments or curve, e.g Obj3.geom = RandomCurve, RandomSects, PointSects, CatmullRom, Spline from XComponent.Obj3Type.

use xgeom.generateCurve to generate points
create the THREE.Line or LineSegments,

Parameters:

Name	Type	Description
`obj3`	Obj3
`paras`	object	Visual.paras, @see `xgeom.generateCurve`
`material`	Material

Source:

lib/sys/thrender.js, line 680

Returns:

{curve, path, points}

Type: object

(static) createObj3mesh(cmpObj3, paras, material) → {object}

Create object mesh, put int cmpObj3. This method handle only AssetType.PathTube.

Parameters:

Name	Type	Description
`cmpObj3`	Obj3	{geom: Obj3Type.GeomCurve (with future sects?)}
`paras`	object	Visual.paras, @see xgeom.generateCurve
`material`	THREE.Materail

Source:

lib/sys/thrender.js, line 759

See:

Thrender.createObj3mesh

Returns:

{tube, path}, where geomCurve is THREE.BufferGeometry,

Type: object

(static) createObj3mesh(cmpObj3, geomType, material, visualopt)

Create object mesh, put int cmpObj3.

Parameters:

Name	Type	Attributes	Description
`cmpObj3`	Obj3
`geomType`	Obj3Type
`material`	THREE.Materail
`visual`	object	<optional>	Visual with additional paras, such as points of [[x, y, z]] for creating path, road, polygon, etc.

Source:

lib/sys/thrender.js, line 736

(static) createObj3particles(cmpObj3, fromesh, cmpVisual) → {THREE.Points}

Create particles (THREE.Points) from vertices of mesh.

Parameters:

Name	Type	Description
`cmpObj3`	Obj3	this enitiy's Obj3 component, uniforms merged to target mesh
`fromesh`	THREE.Mesh	referencing mesh
`cmpVisual`	Visual	this entity's Visual component. cmVisual.paras.u_tex: texture path cmVisual.shader: parameters for generate vertex and framgment shaders. see xglsl.xvShader().

Source:

lib/sys/thrender.js, line 1116

Returns:

where geometry is generated by xglsl.particlesGeom(), material is THREE.ShaderMaterial.

Type: THREE.Points

(static) createObj3points(cmpObj3, geomType, material) → {THREE.Mesh}

Create THREE.Points from cmpObj3.mesh.

Difference to createObj3particles which createing vertices from referenced mesh, this method create points according to Obj3.geomType (Obj3Type) with Obj3.box as constructor parameters.

Parameters:

Name	Type	Description
`cmpObj3`	Obj3	Obj3 for the mesh
`geomType`	AssetType	Visual.vtype
`material`	THREE.Material	[optional] default is THREE.ShaderMaterail.

Source:

lib/sys/thrender.js, line 709

Returns:

mesh (already set in cmpObj3)

Type: THREE.Mesh

(static) createObj3s(ecs, scene, light, entities)

Create three.js Object3D

create mesh with geometry of Obj3.geom (e.g Obj3Type.BOX).

Parameters:

Name	Type	Description
`ecs`	ECS
`scene`	THREE.Scene
`light`	THREE.Light
`entities`	Array.<Entity>

Source:

lib/sys/thrender.js, line 58

(static) createXShaderMaterial(shaderflag, uniforms, vparas, obj3) → {THREE.ShaderMaterial}

Parameters:

Name	Type	Description
`shaderflag`	ShaderFlag
`uniforms`	object	Mesh.material.uniforms
`vparas`	object	visual paras
`obj3`	Obj3	Entity Obj3

Source:

lib/sys/thrender.js, line 519

Returns:

material for x-shaders

Type: THREE.ShaderMaterial

(static) geometryCase(geomType, geomParaArr, vpara, modelSeqsopt) → {THREE.BufferGeometry}

Create geometry for different cases.

Parameters:

Name	Type	Attributes	Description
`geomType`	XComponent.Obj3Type		Obj3Type (geom types)
`geomParaArr`	array.<number>		geometry parameters for the given type. See `Obj3Type` for parameters details.
`vpara`	object		Visual.para - shouldn't been here once the orthogonal way is redesigned
`modelSeqs`	ModelSeqs	<optional>	path will be saved in modelSeqs.cache Design Memo: when geometry handling became a separate process, this parameters should replaced by component?

Source:

lib/sys/thrender.js, line 795

Returns:

any subclass of three-js BufferGeometry.

Type: THREE.BufferGeometry

(static) xlineMaterial(uniforms, vparas) → {object}

Create a line material either one of xv.ShaderFlag.colorLine or the THREE. LineDashedMaterial, depends on wither dashSize or gapSize presented in vparas.

Three.js LineBasicMaterial opacity works but has issues. We tried and seems it's not transparent. See also discussion: Change opacity using fat lines example for line opacity

Parameters:

Name	Type	Description
`uniforms`	object
`vparas`	object

Source:

lib/sys/thrender.js, line 612

Returns:

{curve, path, points}

Type: object

init(canvas, x)

Parameters:

Name	Type	Description
`canvas`	Canvas
`x`	x	{options, ...}

Source:

lib/sys/thrender.js, line 1337

update(tick, entities)

Show picked object outline.
Render with composer or scene render.

Parameters:

Name	Type	Description
`tick`	Number
`entities`	Array.<Entity>

Source:

lib/sys/thrender.js, line 1417

Thrender()

X renderer of ecs subsystem based on Three.js renderer.

Constructor

new Thrender()

Source:

lib/sys/thrender.js, line 24

Methods

(static) applyTransform(mesh, transf) → {THREE.Mesh}

Set affine transform to mesh's local matrix.

Parameters:

Name	Type	Description
`mesh`	THREE.Mesh
`transf`	array	transformations

Source:

lib/sys/thrender.js, line 499

Returns:

mesh

Type: THREE.Mesh

(static) combineGltfPoints(nodes) → {THREE.Points}

Clone and combine gltf nodes' geometry[position] buffer - the modules vertices.

This method can only handling Visual.vtype == AssetType.point, making points (vertices) can basically rendered.

This is not enough. Animizer would added more components to animize points.

Parameters:

Name	Type	Description
	xv.Components.Obj3
`nodes`	array	nodes loaded from gltf.
`Visual.paras,`	paras	define, size, color...

Source:

lib/sys/thrender.js, line 995

Returns:

points

Type: THREE.Points

(static) createCubeVoxel(cmpObj3, cmpVisual) → {THREE.Mesh}

Create cube voxel. (points evenly dividing in cube).

Return mesh object can be rendered by Thrender.
AssetType: AssetType.refPoint; AssetType.cubeVoxel

Parameters:

Name	Type	Description
`cmpObj3`	Obj3
`cmpVisual`	Visual

Source:

lib/sys/thrender.js, line 1168

Returns:

Type: THREE.Mesh

(static) createCubeVoxel(options, camopt) → {THREE.HemisphereLight}

Setup light of THREE.DirectionalLight & THREE.DirectionalLightShadow.
For parameters' example, see test/html/ecs-basics/light.html

Parameters:

Name Type Attributes Default Description

options

object

Properties

Name	Type	Attributes	Description
`light`	object	<optional>

otpions.light.skyColor number <optional> 0xffffbb

options.light.groundColor number <optional> 0x080820

options.light.pos array <optional> [0, 1, 0.56]

options.light.intensity number <optional> 1.1

otpions.light.castShadow number <optional> true

options.shadow

object

Properties

Name Type Attributes Default Description

mapSize object <optional> {width: 1024, height: 1024}

camera object <optional> {near: 50, far: 2000}

size

number

The shadow cull space size, scaled to default THREE.shadowCamera.width, height, like:

light.shadow.camera.left *= size;
light.shadow.camera.right *= size;
light.shadow.camera.bottom *= size;
light.shadow.camera.top *= size;

cam

object

{near, far}, camera's near, far

Source:

lib/sys/thrender.js, line 1223

Returns:

with options = arg-options

Type: THREE.HemisphereLight

(static) createObj3Line(obj3, paras, material) → {object}

Generate line, segments or curve, e.g Obj3.geom = RandomCurve, RandomSects, PointSects, CatmullRom, Spline from XComponent.Obj3Type.

use xgeom.generateCurve to generate points
create the THREE.Line or LineSegments,

Parameters:

Name	Type	Description
`obj3`	Obj3
`paras`	object	Visual.paras, @see `xgeom.generateCurve`
`material`	Material

Source:

lib/sys/thrender.js, line 680

Returns:

{curve, path, points}

Type: object

(static) createObj3mesh(cmpObj3, paras, material) → {object}

Create object mesh, put int cmpObj3. This method handle only AssetType.PathTube.

Parameters:

Name	Type	Description
`cmpObj3`	Obj3	{geom: Obj3Type.GeomCurve (with future sects?)}
`paras`	object	Visual.paras, @see xgeom.generateCurve
`material`	THREE.Materail

Source:

lib/sys/thrender.js, line 759

See:

Thrender.createObj3mesh

Returns:

{tube, path}, where geomCurve is THREE.BufferGeometry,

Type: object

(static) createObj3mesh(cmpObj3, geomType, material, visualopt)

Create object mesh, put int cmpObj3.

Parameters:

Name	Type	Attributes	Description
`cmpObj3`	Obj3
`geomType`	Obj3Type
`material`	THREE.Materail
`visual`	object	<optional>	Visual with additional paras, such as points of [[x, y, z]] for creating path, road, polygon, etc.

Source:

lib/sys/thrender.js, line 736

(static) createObj3particles(cmpObj3, fromesh, cmpVisual) → {THREE.Points}

Create particles (THREE.Points) from vertices of mesh.

Parameters:

Name	Type	Description
`cmpObj3`	Obj3	this enitiy's Obj3 component, uniforms merged to target mesh
`fromesh`	THREE.Mesh	referencing mesh
`cmpVisual`	Visual	this entity's Visual component. cmVisual.paras.u_tex: texture path cmVisual.shader: parameters for generate vertex and framgment shaders. see xglsl.xvShader().

Source:

lib/sys/thrender.js, line 1116

Returns:

where geometry is generated by xglsl.particlesGeom(), material is THREE.ShaderMaterial.

Type: THREE.Points

(static) createObj3points(cmpObj3, geomType, material) → {THREE.Mesh}

Create THREE.Points from cmpObj3.mesh.

Difference to createObj3particles which createing vertices from referenced mesh, this method create points according to Obj3.geomType (Obj3Type) with Obj3.box as constructor parameters.

Parameters:

Name	Type	Description
`cmpObj3`	Obj3	Obj3 for the mesh
`geomType`	AssetType	Visual.vtype
`material`	THREE.Material	[optional] default is THREE.ShaderMaterail.

Source:

lib/sys/thrender.js, line 709

Returns:

mesh (already set in cmpObj3)

Type: THREE.Mesh

(static) createObj3s(ecs, scene, light, entities)

Create three.js Object3D

create mesh with geometry of Obj3.geom (e.g Obj3Type.BOX).

Parameters:

Name	Type	Description
`ecs`	ECS
`scene`	THREE.Scene
`light`	THREE.Light
`entities`	Array.<Entity>

Source:

lib/sys/thrender.js, line 58

(static) createXShaderMaterial(shaderflag, uniforms, vparas, obj3) → {THREE.ShaderMaterial}

Parameters:

Name	Type	Description
`shaderflag`	ShaderFlag
`uniforms`	object	Mesh.material.uniforms
`vparas`	object	visual paras
`obj3`	Obj3	Entity Obj3

Source:

lib/sys/thrender.js, line 519

Returns:

material for x-shaders

Type: THREE.ShaderMaterial

(static) geometryCase(geomType, geomParaArr, vpara, modelSeqsopt) → {THREE.BufferGeometry}

Create geometry for different cases.

Parameters:

Name	Type	Attributes	Description
`geomType`	XComponent.Obj3Type		Obj3Type (geom types)
`geomParaArr`	array.<number>		geometry parameters for the given type. See `Obj3Type` for parameters details.
`vpara`	object		Visual.para - shouldn't been here once the orthogonal way is redesigned
`modelSeqs`	ModelSeqs	<optional>	path will be saved in modelSeqs.cache Design Memo: when geometry handling became a separate process, this parameters should replaced by component?

Source:

lib/sys/thrender.js, line 795

Returns:

any subclass of three-js BufferGeometry.

Type: THREE.BufferGeometry

(static) xlineMaterial(uniforms, vparas) → {object}

Create a line material either one of xv.ShaderFlag.colorLine or the THREE. LineDashedMaterial, depends on wither dashSize or gapSize presented in vparas.

Three.js LineBasicMaterial opacity works but has issues. We tried and seems it's not transparent. See also discussion: Change opacity using fat lines example for line opacity

Parameters:

Name	Type	Description
`uniforms`	object
`vparas`	object

Source:

lib/sys/thrender.js, line 612

Returns:

{curve, path, points}

Type: object

init(canvas, x)

Parameters:

Name	Type	Description
`canvas`	Canvas
`x`	x	{options, ...}

Source:

lib/sys/thrender.js, line 1337

update(tick, entities)

Show picked object outline.
Render with composer or scene render.

Parameters:

Name	Type	Description
`tick`	Number
`entities`	Array.<Entity>

Source:

lib/sys/thrender.js, line 1417