Rendering Components

import { addComponent, MeshRenderer, PrimitiveType } from '@web-engine/core';
 
// Create box primitive
const box = world.addEntity();
addComponent(world, MeshRenderer, box);
MeshRenderer.primitiveType[box] = PrimitiveType.Box;
MeshRenderer.castShadow[box] = 1;
MeshRenderer.receiveShadow[box] = 1;
 
// Create entity with loaded model
const character = world.addEntity();
addComponent(world, MeshRenderer, character);
MeshRenderer.primitiveType[character] = PrimitiveType.None;
MeshRenderer.assetId[character] = loadedModelAssetId;

import { addComponent, MaterialRef } from '@web-engine/core';
 
// Assign material with color tint
const entity = world.addEntity();
addComponent(world, MaterialRef, entity);
MaterialRef.assetId[entity] = materialAssetId;
MaterialRef.colorOverride[entity][0] = 1.0; // Red
MaterialRef.colorOverride[entity][1] = 0.5; // Green
MaterialRef.colorOverride[entity][2] = 0.5; // Blue
 
// UV tiling for repeating textures
MaterialRef.tiling[entity][0] = 2.0; // Tile 2x horizontally
MaterialRef.tiling[entity][1] = 2.0; // Tile 2x vertically
 
// Material transparency
MaterialRef.alphaOverride[entity] = 0.5; // 50% transparent

import { addComponent, Light } from '@web-engine/core';
 
// Create directional light (sun)
const sun = world.addEntity();
addComponent(world, Transform, sun);
addComponent(world, Light, sun);
Light.type[sun] = 1; // Directional
Light.intensity[sun] = 1.0;
Light.color[sun][0] = 1.0; // White
Light.color[sun][1] = 1.0;
Light.color[sun][2] = 1.0;
Light.castShadow[sun] = 1;
Transform.rotation[sun][0] = -Math.PI / 4; // Angle down
 
// Create point light (lamp)
const lamp = world.addEntity();
addComponent(world, Transform, lamp);
addComponent(world, Light, lamp);
Light.type[lamp] = 0; // Point
Light.intensity[lamp] = 2.0;
Light.range[lamp] = 15.0;
Light.color[lamp][0] = 1.0; // Orange
Light.color[lamp][1] = 0.7;
Light.color[lamp][2] = 0.3;
 
// Create spot light (flashlight)
const flashlight = world.addEntity();
addComponent(world, Transform, flashlight);
addComponent(world, Light, flashlight);
Light.type[flashlight] = 2; // Spot
Light.intensity[flashlight] = 3.0;
Light.range[flashlight] = 20.0;
Light.angle[flashlight] = Math.PI / 6; // 30 degree cone

import { addComponent, Camera, CameraTag } from '@web-engine/core';
 
// Create main camera
const camera = world.addEntity();
addComponent(world, Transform, camera);
addComponent(world, Camera, camera);
addComponent(world, CameraTag, camera); // Mark as active
 
Camera.fov[camera] = 75.0; // Wide FOV for FPS
Camera.near[camera] = 0.1;
Camera.far[camera] = 500.0;
 
// Position camera
Transform.position[camera][1] = 1.7; // Eye height
Transform.position[camera][2] = 5.0; // Back from origin

import { addComponent, Renderable } from '@web-engine/core';
 
// Mark entity as renderable
addComponent(world, Renderable, entity);

import { addComponent, RenderLayers, RenderLayerBit } from '@web-engine/core';
 
// Create UI element on UI layer
const uiElement = world.addEntity();
addComponent(world, RenderLayers, uiElement);
RenderLayers.mask[uiElement] = RenderLayerBit.UI;
 
// Create object visible on multiple layers
const multiLayerObject = world.addEntity();
addComponent(world, RenderLayers, multiLayerObject);
RenderLayers.mask[multiLayerObject] =
  RenderLayerBit.Default | RenderLayerBit.Shadows;

import { addComponent, CullingMask, RenderLayerBit } from '@web-engine/core';
 
// Main camera sees default and shadows only
addComponent(world, CullingMask, mainCamera);
CullingMask.mask[mainCamera] =
  RenderLayerBit.Default | RenderLayerBit.Shadows;
 
// UI camera sees UI only
addComponent(world, CullingMask, uiCamera);
CullingMask.mask[uiCamera] = RenderLayerBit.UI;

import { addComponent, LODGroup } from '@web-engine/core';
 
// Setup LOD for tree
const tree = world.addEntity();
addComponent(world, LODGroup, tree);
 
// LOD0: Full detail (0-20m)
LODGroup.assetIds[tree][0] = highDetailTreeAssetId;
LODGroup.distances[tree][0] = 20.0;
 
// LOD1: Medium detail (20-50m)
LODGroup.assetIds[tree][1] = mediumDetailTreeAssetId;
LODGroup.distances[tree][1] = 50.0;
 
// LOD2: Low detail (50-100m)
LODGroup.assetIds[tree][2] = lowDetailTreeAssetId;
LODGroup.distances[tree][2] = 100.0;
 
// Beyond 100m: Culled (not rendered)
 
// Optional: Adjust hysteresis to prevent flickering
LODGroup.hysteresis[tree] = 26; // 10% hysteresis (26/255 ≈ 0.1)