Add Chromium-only Blender WebEngine parity work
This commit is contained in:
mes123456
678
web/app/src/three-adapter/viewport.ts
Normal file
678
web/app/src/three-adapter/viewport.ts
Normal file
@@ -0,0 +1,678 @@
|
||||
import {
|
||||
BufferGeometry,
|
||||
BoxGeometry,
|
||||
Color,
|
||||
DirectionalLight,
|
||||
GridHelper,
|
||||
Group,
|
||||
InstancedMesh,
|
||||
Matrix4,
|
||||
Mesh,
|
||||
HemisphereLight,
|
||||
MeshPhysicalMaterial,
|
||||
Raycaster,
|
||||
PerspectiveCamera,
|
||||
Scene,
|
||||
type Object3D,
|
||||
WebGLRenderer,
|
||||
Float32BufferAttribute,
|
||||
Uint32BufferAttribute,
|
||||
Euler,
|
||||
Quaternion,
|
||||
Vector2,
|
||||
Vector3,
|
||||
} from "../vendor/three/three.module.js";
|
||||
import { OrbitControls } from "../vendor/three/addons/controls/OrbitControls.js";
|
||||
import type { MaterialIR, SceneSnapshotIR } from "../../../protocol/scene-ir";
|
||||
import { applySceneDelta, type SceneDelta } from "../../../protocol/scene-delta";
|
||||
import type { MeshElementMode, MeshGeometryBuffer, WebEngineLODLevelResult } from "../../../protocol/web-engine";
|
||||
import { ThreeLODAdapter, type ThreeLODLevel, type LODSelectionResult } from "./lod";
|
||||
import {
|
||||
configurePBRLight,
|
||||
configurePBRRenderer,
|
||||
createPBRLight,
|
||||
createPBRMaterial,
|
||||
PBR_PROFILE,
|
||||
PBR_SHADOW_PROFILE,
|
||||
PBR_TONE_MAPPING,
|
||||
setPBRMaterialSelected,
|
||||
} from "./pbr";
|
||||
import { GPUTextureStore } from "./texture-assets";
|
||||
import type { GPUTextureAsset } from "../../../protocol/render-assets";
|
||||
import { gateEnvironmentImage, gateUDIMImage } from "../../../protocol/render-assets";
|
||||
import { applyNonMeshTransform, createNonMeshObject, type NonMeshElementKind } from "./nonmesh";
|
||||
import type { NonMeshGeometryChunk } from "../../../protocol/nonmesh-binary";
|
||||
import { applyGreasePencilTransform, createGreasePencilObject } from "./grease-pencil";
|
||||
|
||||
export function collectMeshInstanceGroups(snapshot: SceneSnapshotIR, minimumSize = 2): Map<string, string[]> {
|
||||
const groups = new Map<string, string[]>();
|
||||
for (const node of snapshot.nodes) {
|
||||
if (node.type !== "MESH" || !node.visible || !node.dataId) continue;
|
||||
const ids = groups.get(node.dataId) ?? [];
|
||||
ids.push(node.id);
|
||||
groups.set(node.dataId, ids);
|
||||
}
|
||||
for (const [meshId, ids] of groups) if (ids.length < minimumSize) groups.delete(meshId);
|
||||
return groups;
|
||||
}
|
||||
|
||||
/** Three.js owns the browser viewport; Blender's Z-up coordinates are adapted at the boundary. */
|
||||
export class ViewportRenderer {
|
||||
readonly renderer: WebGLRenderer;
|
||||
readonly scene: Scene;
|
||||
readonly camera: PerspectiveCamera;
|
||||
readonly controls: OrbitControls;
|
||||
private readonly canvas: HTMLCanvasElement;
|
||||
private readonly importedRoot = new Group();
|
||||
private readonly importedLights = new Group();
|
||||
private readonly resizeObserver: ResizeObserver;
|
||||
private animationFrame = 0;
|
||||
private disposed = false;
|
||||
private currentSnapshot: SceneSnapshotIR | null = null;
|
||||
private readonly objectByBlenderId = new Map<string, Object3D>();
|
||||
private readonly instanceIndexByBlenderId = new Map<string, number>();
|
||||
private readonly lodAdapter = new ThreeLODAdapter();
|
||||
private readonly textureStore = new GPUTextureStore();
|
||||
private readonly raycaster = new Raycaster();
|
||||
private readonly pointer = new Vector2();
|
||||
private readonly onSelect?: (objectId: string, additive: boolean) => void;
|
||||
private readonly onElementSelect?: (meshId: string, mode: MeshElementMode, index: number, additive: boolean, nonMeshKind?: NonMeshElementKind) => void;
|
||||
private editMode = false;
|
||||
private selectionMode: MeshElementMode = "FACE";
|
||||
|
||||
constructor(
|
||||
canvas: HTMLCanvasElement,
|
||||
onSelect?: (objectId: string, additive: boolean) => void,
|
||||
onElementSelect?: (meshId: string, mode: MeshElementMode, index: number, additive: boolean, nonMeshKind?: NonMeshElementKind) => void,
|
||||
) {
|
||||
this.canvas = canvas;
|
||||
this.onSelect = onSelect;
|
||||
this.onElementSelect = onElementSelect;
|
||||
this.renderer = new WebGLRenderer({ canvas, antialias: true, alpha: false, preserveDrawingBuffer: true });
|
||||
configurePBRRenderer(this.renderer);
|
||||
this.renderer.setPixelRatio(Math.min(window.devicePixelRatio || 1, 2));
|
||||
this.renderer.setClearColor(new Color("#25272b"));
|
||||
this.canvas.dataset.rendererBackend = "webgl-pbr";
|
||||
this.canvas.dataset.pbrProfile = PBR_PROFILE;
|
||||
this.canvas.dataset.toneMapping = PBR_TONE_MAPPING;
|
||||
this.canvas.dataset.shadowMap = PBR_SHADOW_PROFILE;
|
||||
this.scene = new Scene();
|
||||
this.camera = new PerspectiveCamera(45, 1, 0.01, 1000);
|
||||
this.camera.position.set(4.5, -4.5, 3.5);
|
||||
this.controls = new OrbitControls(this.camera, canvas);
|
||||
this.controls.target.set(0, 0, 0);
|
||||
this.controls.enableDamping = true;
|
||||
|
||||
this.scene.add(new HemisphereLight(0xf2f5ff, 0x3a4149, 0.55));
|
||||
const keyLight = new DirectionalLight(0xffffff, 2.5);
|
||||
keyLight.position.set(4, -5, 8);
|
||||
keyLight.castShadow = true;
|
||||
keyLight.shadow.mapSize.set(1024, 1024);
|
||||
keyLight.shadow.bias = -0.0005;
|
||||
keyLight.shadow.normalBias = 0.03;
|
||||
this.scene.add(keyLight, keyLight.target);
|
||||
this.scene.add(new GridHelper(20, 20, 0x60656e, 0x383b42));
|
||||
this.scene.add(this.importedRoot);
|
||||
this.scene.add(this.importedLights);
|
||||
|
||||
this.resizeObserver = new ResizeObserver(() => this.resize());
|
||||
this.resizeObserver.observe(canvas);
|
||||
this.canvas.addEventListener("click", this.handleClick);
|
||||
this.resize();
|
||||
this.renderLoop();
|
||||
}
|
||||
|
||||
setSnapshot(snapshot: SceneSnapshotIR, geometryBuffers: MeshGeometryBuffer[] = [], nonMeshGeometryBuffers: NonMeshGeometryChunk[] = []): void {
|
||||
this.currentSnapshot = snapshot;
|
||||
const udim = snapshot.images.find((image) => image.tiles && image.tiles.length > 0);
|
||||
if (udim) {
|
||||
const gate = gateUDIMImage(udim);
|
||||
this.canvas.dataset.udimGate = gate.status.toLowerCase();
|
||||
this.canvas.dataset.udimGateCode = gate.issues[0]?.code ?? "";
|
||||
}
|
||||
const worldId = snapshot.scenes[0]?.worldId;
|
||||
const world = snapshot.worlds.find((candidate) => candidate.id === worldId) ?? snapshot.worlds[0];
|
||||
if (world?.environmentImageId) {
|
||||
const gate = gateEnvironmentImage(snapshot.images.find((image) => image.id === world.environmentImageId));
|
||||
this.canvas.dataset.iblGate = gate.status.toLowerCase();
|
||||
this.canvas.dataset.iblGateCode = gate.issues[0]?.code ?? "";
|
||||
}
|
||||
this.objectByBlenderId.clear();
|
||||
this.instanceIndexByBlenderId.clear();
|
||||
this.lodAdapter.clear();
|
||||
this.clearImportedScene();
|
||||
this.applyWorld(snapshot);
|
||||
this.applyCamera(snapshot);
|
||||
this.populateLights(snapshot);
|
||||
this.populateNonMesh(snapshot, nonMeshGeometryBuffers);
|
||||
this.populateGreasePencils(snapshot);
|
||||
const meshes = new Map(snapshot.meshes.map((mesh) => [mesh.id, mesh]));
|
||||
const binaryGeometry = new Map(geometryBuffers.map((payload) => [payload.meshId, payload]));
|
||||
for (const node of snapshot.nodes) {
|
||||
if (node.type !== "MESH" || !node.visible || !node.dataId) continue;
|
||||
const summary = meshes.get(node.dataId);
|
||||
if (!summary) continue;
|
||||
const materialById = new Map(snapshot.materials.map((material) => [material.id, material]));
|
||||
const fallbackMaterial = this.createMaterial(undefined, node.id === snapshot.activeObjectId);
|
||||
const materials = (summary.materialSlotIds ?? [])
|
||||
.map((id) => materialById.get(id))
|
||||
.map((material) => this.createMaterial(material, node.id === snapshot.activeObjectId));
|
||||
if (materials.length === 0) materials.push(fallbackMaterial);
|
||||
let geometry: BufferGeometry = new BoxGeometry(2, 2, 2);
|
||||
const payload = binaryGeometry.get(summary.id);
|
||||
const positionsData = payload ? new Float32Array(payload.positions) : summary.positions;
|
||||
const indicesData = payload ? new Uint32Array(payload.indices) : summary.indices;
|
||||
const normalsData = payload?.normals ? new Float32Array(payload.normals) : summary.normals;
|
||||
const triangleCornerData = payload?.triangleCornerIndices ? new Uint32Array(payload.triangleCornerIndices) : summary.triangleCornerIndices;
|
||||
const triangleFaceData = payload?.triangleFaceIndices ? new Uint32Array(payload.triangleFaceIndices) : summary.triangleFaceIndices;
|
||||
const uvData = payload?.uvs ? new Float32Array(payload.uvs) : summary.uvs;
|
||||
const colorData = payload?.colors ? new Float32Array(payload.colors) : summary.colors;
|
||||
const triangleMaterialData = payload?.triangleMaterialIndices ? new Uint32Array(payload.triangleMaterialIndices) : summary.triangleMaterialIndices;
|
||||
if ((summary.geometryStatus === "available" || summary.geometryStatus === "binary") && positionsData && indicesData) {
|
||||
geometry = new BufferGeometry();
|
||||
const hasCornerAttributes = Boolean(triangleCornerData && (uvData || colorData));
|
||||
if (hasCornerAttributes && triangleCornerData) {
|
||||
const positions: number[] = [];
|
||||
const normals: number[] = [];
|
||||
const uvs: number[] = [];
|
||||
const colors: number[] = [];
|
||||
for (let index = 0; index < indicesData.length; index++) {
|
||||
const vertex = indicesData[index] * 3;
|
||||
positions.push(positionsData[vertex], positionsData[vertex + 2], -positionsData[vertex + 1]);
|
||||
if (normalsData) {
|
||||
normals.push(normalsData[vertex], normalsData[vertex + 2], -normalsData[vertex + 1]);
|
||||
}
|
||||
const corner = triangleCornerData[index];
|
||||
if (uvData) uvs.push(uvData[corner * 2], uvData[corner * 2 + 1]);
|
||||
if (colorData) colors.push(colorData[corner * 4], colorData[corner * 4 + 1], colorData[corner * 4 + 2], colorData[corner * 4 + 3]);
|
||||
}
|
||||
geometry.setAttribute("position", new Float32BufferAttribute(positions, 3));
|
||||
if (normals.length > 0) geometry.setAttribute("normal", new Float32BufferAttribute(normals, 3));
|
||||
if (uvs.length > 0) geometry.setAttribute("uv", new Float32BufferAttribute(uvs, 2));
|
||||
if (colors.length > 0) geometry.setAttribute("color", new Float32BufferAttribute(colors, 4));
|
||||
} else {
|
||||
const positions = new Array<number>(positionsData.length);
|
||||
for (let index = 0; index < positionsData.length; index += 3) {
|
||||
// Blender Z-up/right-handed -> Three.js Y-up/right-handed.
|
||||
positions[index] = positionsData[index];
|
||||
positions[index + 1] = positionsData[index + 2];
|
||||
positions[index + 2] = -positionsData[index + 1];
|
||||
}
|
||||
geometry.setAttribute("position", new Float32BufferAttribute(positions, 3));
|
||||
if (normalsData) {
|
||||
const normals = new Array<number>(normalsData.length);
|
||||
for (let index = 0; index < normalsData.length; index += 3) {
|
||||
normals[index] = normalsData[index];
|
||||
normals[index + 1] = normalsData[index + 2];
|
||||
normals[index + 2] = -normalsData[index + 1];
|
||||
}
|
||||
geometry.setAttribute("normal", new Float32BufferAttribute(normals, 3));
|
||||
}
|
||||
geometry.setIndex(new Uint32BufferAttribute(indicesData, 1));
|
||||
if (!normalsData) geometry.computeVertexNormals();
|
||||
}
|
||||
if (triangleMaterialData && materials.length > 1) {
|
||||
for (let triangle = 0; triangle < triangleMaterialData.length; triangle++) {
|
||||
const materialIndex = Math.min(triangleMaterialData[triangle], materials.length - 1);
|
||||
geometry.addGroup(triangle * 3, 3, materialIndex);
|
||||
}
|
||||
}
|
||||
}
|
||||
const mesh = new Mesh(geometry, materials.length === 1 ? materials[0] : materials);
|
||||
mesh.castShadow = true;
|
||||
mesh.receiveShadow = true;
|
||||
mesh.name = node.name;
|
||||
// Summary-only meshes use a bounded proxy until their transferable geometry is available.
|
||||
const [x, y, z] = node.transform.translation;
|
||||
mesh.position.set(x, z, -y);
|
||||
mesh.rotation.set(node.transform.rotationEuler[0], node.transform.rotationEuler[2], -node.transform.rotationEuler[1]);
|
||||
mesh.scale.set(...node.transform.scale);
|
||||
mesh.userData.sceneNodeId = node.id;
|
||||
mesh.userData.blenderId = node.id;
|
||||
mesh.userData.meshId = summary.id;
|
||||
mesh.userData.materialSlotIds = summary.materialSlotIds ?? [];
|
||||
mesh.userData.revision = snapshot.revision;
|
||||
mesh.userData.vertexCount = summary.vertexCount;
|
||||
mesh.userData.sourcePositions = positionsData ? Array.from(positionsData) : undefined;
|
||||
mesh.userData.sourceIndices = indicesData ? Array.from(indicesData) : undefined;
|
||||
mesh.userData.triangleFaceIndices = triangleFaceData ? Array.from(triangleFaceData) : undefined;
|
||||
mesh.userData.edgeVertexIndices = payload?.edgeVertexIndices
|
||||
? Array.from(new Uint32Array(payload.edgeVertexIndices))
|
||||
: summary.edgeVertexIndices;
|
||||
this.importedRoot.add(mesh);
|
||||
this.objectByBlenderId.set(node.id, mesh);
|
||||
}
|
||||
this.coalesceMeshInstances(snapshot);
|
||||
if (this.importedRoot.children.length > 0) {
|
||||
this.controls.target.set(0, 0, 0);
|
||||
}
|
||||
}
|
||||
|
||||
private populateNonMesh(snapshot: SceneSnapshotIR, nonMeshGeometryBuffers: readonly NonMeshGeometryChunk[]): void {
|
||||
const dataById = new Map((snapshot.nonMeshData ?? []).map((data) => [data.id, data]));
|
||||
let previewCount = 0;
|
||||
let blockedCount = 0;
|
||||
for (const node of snapshot.nodes) {
|
||||
if (!node.visible || !node.dataId || node.type === "MESH" || node.type === "LIGHT" || node.type === "CAMERA") continue;
|
||||
const data = dataById.get(node.dataId);
|
||||
if (!data) continue;
|
||||
const object = createNonMeshObject(data, nonMeshGeometryBuffers);
|
||||
if (!object) {
|
||||
blockedCount++;
|
||||
continue;
|
||||
}
|
||||
applyNonMeshTransform(object, node);
|
||||
object.traverse((child) => {
|
||||
child.userData.sceneNodeId = node.id;
|
||||
child.userData.blenderId = node.id;
|
||||
child.userData.nonMeshDataId = data.id;
|
||||
});
|
||||
this.importedRoot.add(object);
|
||||
this.objectByBlenderId.set(node.id, object);
|
||||
previewCount++;
|
||||
}
|
||||
this.canvas.dataset.nonMeshCount = String(previewCount);
|
||||
this.canvas.dataset.nonMeshBlockedCount = String(blockedCount);
|
||||
}
|
||||
|
||||
private populateGreasePencils(snapshot: SceneSnapshotIR): void {
|
||||
const dataById = new Map((snapshot.greasePencils ?? []).map((data) => [data.id, data]));
|
||||
let previewCount = 0;
|
||||
let blockedCount = 0;
|
||||
for (const node of snapshot.nodes) {
|
||||
if (node.type !== "GREASE_PENCIL" || !node.visible || !node.dataId) continue;
|
||||
const data = dataById.get(node.dataId);
|
||||
if (!data) continue;
|
||||
const object = createGreasePencilObject(data, snapshot.frame.current);
|
||||
if (!object) {
|
||||
blockedCount++;
|
||||
continue;
|
||||
}
|
||||
applyGreasePencilTransform(object, node);
|
||||
this.importedRoot.add(object);
|
||||
this.objectByBlenderId.set(node.id, object);
|
||||
previewCount++;
|
||||
}
|
||||
this.canvas.dataset.greasePencilCount = String(previewCount);
|
||||
this.canvas.dataset.greasePencilBlockedCount = String(blockedCount);
|
||||
}
|
||||
|
||||
setTextureAssets(assets: readonly GPUTextureAsset[]): void {
|
||||
if (assets.length === 0) {
|
||||
this.canvas.dataset.textureStatus = "none";
|
||||
this.canvas.dataset.textureLoaded = "0";
|
||||
this.canvas.dataset.textureBytes = "0";
|
||||
return;
|
||||
}
|
||||
void this.textureStore.upload(assets).then((status) => {
|
||||
this.canvas.dataset.textureStatus = status.rejected > 0 ? "blocked" : "ready";
|
||||
this.canvas.dataset.textureLoaded = String(status.loaded);
|
||||
this.canvas.dataset.textureBytes = String(status.bytes);
|
||||
this.canvas.dataset.textureErrorCode = status.errorCodes[0] ?? "";
|
||||
if (!this.currentSnapshot) return;
|
||||
this.textureStore.applySnapshotMaterials(this.importedRoot, this.currentSnapshot);
|
||||
const worldId = this.currentSnapshot.scenes[0]?.worldId;
|
||||
const world = this.currentSnapshot.worlds.find((candidate) => candidate.id === worldId) ?? this.currentSnapshot.worlds[0];
|
||||
void this.textureStore.applyEnvironment(this.scene, this.renderer, world, true).then((ready) => {
|
||||
this.canvas.dataset.iblStatus = ready ? "ready" : world?.environmentImageId ? "blocked" : "none";
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
applyDelta(delta: SceneDelta, geometryBuffers: MeshGeometryBuffer[] = [], nonMeshGeometryBuffers: NonMeshGeometryChunk[] = []): void {
|
||||
if (!this.currentSnapshot) throw new Error("Cannot apply a SceneDelta before a snapshot");
|
||||
const next = applySceneDelta(this.currentSnapshot, delta);
|
||||
const hasLifecycleChanges = Boolean(delta.nodes?.added?.length || delta.nodes?.removed?.length ||
|
||||
delta.meshes || delta.materials || delta.cameras || delta.lights || delta.animations);
|
||||
if (hasLifecycleChanges) {
|
||||
this.setSnapshot(next, geometryBuffers, nonMeshGeometryBuffers);
|
||||
return;
|
||||
}
|
||||
for (const change of delta.nodes?.updated ?? []) {
|
||||
const object = this.objectByBlenderId.get(change.id);
|
||||
if (!object) continue;
|
||||
const instanceIndex = this.instanceIndexByBlenderId.get(change.id);
|
||||
if (object instanceof InstancedMesh && instanceIndex !== undefined) {
|
||||
const node = next.nodes.find((candidate) => candidate.id === change.id);
|
||||
if (node) object.setMatrixAt(instanceIndex, this.instanceMatrix(node.transform, node.visible));
|
||||
object.instanceMatrix.needsUpdate = true;
|
||||
}
|
||||
else if (change.visible !== undefined) object.visible = change.visible;
|
||||
if (change.visible !== undefined && typeof object.userData.meshId === "string") this.lodAdapter.setEnabled(object.userData.meshId, change.visible);
|
||||
if (change.transform && !(object instanceof InstancedMesh)) {
|
||||
const [x, y, z] = change.transform.translation;
|
||||
object.position.set(x, z, -y);
|
||||
object.rotation.set(change.transform.rotationEuler[0], change.transform.rotationEuler[2], -change.transform.rotationEuler[1]);
|
||||
object.scale.set(...change.transform.scale);
|
||||
}
|
||||
object.userData.revision = next.revision;
|
||||
}
|
||||
this.currentSnapshot = next;
|
||||
}
|
||||
|
||||
setSelection(objectIds: ReadonlySet<string>): void {
|
||||
const visitedInstances = new Set<InstancedMesh>();
|
||||
for (const [objectId, object] of this.objectByBlenderId) {
|
||||
if (object instanceof InstancedMesh) {
|
||||
if (visitedInstances.has(object)) continue;
|
||||
visitedInstances.add(object);
|
||||
const ids = object.userData.instanceNodeIds as string[];
|
||||
for (let index = 0; index < ids.length; index++) {
|
||||
object.setColorAt(index, new Color(objectIds.has(ids[index]) ? 0xf08a45 : 0xffffff));
|
||||
}
|
||||
if (object.instanceColor) object.instanceColor.needsUpdate = true;
|
||||
continue;
|
||||
}
|
||||
if (!(object instanceof Mesh)) continue;
|
||||
const materials = Array.isArray(object.material) ? object.material : [object.material];
|
||||
for (const material of materials) {
|
||||
if (!(material instanceof MeshPhysicalMaterial)) continue;
|
||||
setPBRMaterialSelected(material, objectIds.has(objectId));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
setInteractionMode(editMode: boolean, selectionMode: MeshElementMode): void {
|
||||
this.editMode = editMode;
|
||||
this.selectionMode = selectionMode;
|
||||
}
|
||||
|
||||
registerLOD(meshId: string, levels: readonly ThreeLODLevel[], radius: number): void {
|
||||
this.lodAdapter.register(meshId, levels, radius);
|
||||
}
|
||||
|
||||
unregisterLOD(meshId: string): void {
|
||||
this.lodAdapter.unregister(meshId);
|
||||
}
|
||||
|
||||
installLODLevels(meshId: string, levels: readonly WebEngineLODLevelResult[]): void {
|
||||
const source = [...this.objectByBlenderId.values()].find((object) => object.userData.meshId === meshId);
|
||||
if (!(source instanceof Mesh) || source instanceof InstancedMesh || levels.length === 0) return;
|
||||
const created: ThreeLODLevel[] = [];
|
||||
const sourceMaterials = Array.isArray(source.material) ? source.material : [source.material];
|
||||
source.geometry.computeBoundingSphere();
|
||||
const radius = source.geometry.boundingSphere?.radius ?? 1;
|
||||
for (const level of levels) {
|
||||
const payload = level.geometryBuffers.find((geometry) => geometry.meshId === level.meshId) ?? level.geometryBuffers[0];
|
||||
if (!payload) continue;
|
||||
const mesh = new Mesh(this.createLODGeometry(payload, sourceMaterials.length), sourceMaterials);
|
||||
mesh.castShadow = true;
|
||||
mesh.receiveShadow = true;
|
||||
mesh.name = `${source.name} LOD ${level.level}`;
|
||||
mesh.position.copy(source.position);
|
||||
mesh.rotation.copy(source.rotation);
|
||||
mesh.scale.copy(source.scale);
|
||||
mesh.userData.sceneNodeId = source.userData.sceneNodeId;
|
||||
mesh.userData.blenderId = source.userData.blenderId;
|
||||
mesh.userData.meshId = meshId;
|
||||
this.importedRoot.add(mesh);
|
||||
created.push({ object: mesh, screenHeightThreshold: Math.max(24, 768 / 2 ** level.level) });
|
||||
}
|
||||
if (created.length === 0) return;
|
||||
source.visible = false;
|
||||
this.lodAdapter.register(meshId, created, radius);
|
||||
}
|
||||
|
||||
updateLODSelection(hysteresis = 0.08): Map<string, LODSelectionResult> {
|
||||
return this.lodAdapter.update(this.camera, Math.max(1, this.canvas.clientHeight), hysteresis);
|
||||
}
|
||||
|
||||
private createLODGeometry(payload: MeshGeometryBuffer, materialCount: number): BufferGeometry {
|
||||
const positionsData = new Float32Array(payload.positions);
|
||||
const indicesData = new Uint32Array(payload.indices);
|
||||
const normalsData = payload.normals ? new Float32Array(payload.normals) : undefined;
|
||||
const cornerData = payload.triangleCornerIndices ? new Uint32Array(payload.triangleCornerIndices) : undefined;
|
||||
const uvData = payload.uvs ? new Float32Array(payload.uvs) : undefined;
|
||||
const colorData = payload.colors ? new Float32Array(payload.colors) : undefined;
|
||||
const materialData = payload.triangleMaterialIndices ? new Uint32Array(payload.triangleMaterialIndices) : undefined;
|
||||
const geometry = new BufferGeometry();
|
||||
if (cornerData && (uvData || colorData)) {
|
||||
const positions: number[] = [];
|
||||
const normals: number[] = [];
|
||||
const uvs: number[] = [];
|
||||
const colors: number[] = [];
|
||||
for (let index = 0; index < indicesData.length; index++) {
|
||||
const vertex = indicesData[index] * 3;
|
||||
positions.push(positionsData[vertex], positionsData[vertex + 2], -positionsData[vertex + 1]);
|
||||
if (normalsData) normals.push(normalsData[vertex], normalsData[vertex + 2], -normalsData[vertex + 1]);
|
||||
const corner = cornerData[index];
|
||||
if (uvData) uvs.push(uvData[corner * 2], uvData[corner * 2 + 1]);
|
||||
if (colorData) colors.push(colorData[corner * 4], colorData[corner * 4 + 1], colorData[corner * 4 + 2], colorData[corner * 4 + 3]);
|
||||
}
|
||||
geometry.setAttribute("position", new Float32BufferAttribute(positions, 3));
|
||||
if (normals.length > 0) geometry.setAttribute("normal", new Float32BufferAttribute(normals, 3));
|
||||
if (uvs.length > 0) geometry.setAttribute("uv", new Float32BufferAttribute(uvs, 2));
|
||||
if (colors.length > 0) geometry.setAttribute("color", new Float32BufferAttribute(colors, 4));
|
||||
}
|
||||
else {
|
||||
const positions = new Array<number>(positionsData.length);
|
||||
for (let index = 0; index < positionsData.length; index += 3) {
|
||||
positions[index] = positionsData[index];
|
||||
positions[index + 1] = positionsData[index + 2];
|
||||
positions[index + 2] = -positionsData[index + 1];
|
||||
}
|
||||
geometry.setAttribute("position", new Float32BufferAttribute(positions, 3));
|
||||
if (normalsData) {
|
||||
const normals = new Array<number>(normalsData.length);
|
||||
for (let index = 0; index < normalsData.length; index += 3) {
|
||||
normals[index] = normalsData[index];
|
||||
normals[index + 1] = normalsData[index + 2];
|
||||
normals[index + 2] = -normalsData[index + 1];
|
||||
}
|
||||
geometry.setAttribute("normal", new Float32BufferAttribute(normals, 3));
|
||||
}
|
||||
geometry.setIndex(new Uint32BufferAttribute(indicesData, 1));
|
||||
if (!normalsData) geometry.computeVertexNormals();
|
||||
}
|
||||
if (materialData && materialCount > 1) {
|
||||
for (let triangle = 0; triangle < materialData.length; triangle++) geometry.addGroup(triangle * 3, 3, Math.min(materialData[triangle], materialCount - 1));
|
||||
}
|
||||
return geometry;
|
||||
}
|
||||
|
||||
private instanceMatrix(transform: SceneSnapshotIR["nodes"][number]["transform"], visible = true): Matrix4 {
|
||||
const [x, y, z] = transform.translation;
|
||||
const [rx, ry, rz] = transform.rotationEuler;
|
||||
const scale = visible ? new Vector3(...transform.scale) : new Vector3(0, 0, 0);
|
||||
return new Matrix4().compose(
|
||||
new Vector3(x, z, -y),
|
||||
new Quaternion().setFromEuler(new Euler(rx, rz, -ry)),
|
||||
scale,
|
||||
);
|
||||
}
|
||||
|
||||
private coalesceMeshInstances(snapshot: SceneSnapshotIR): void {
|
||||
const instanceGroups = collectMeshInstanceGroups(snapshot);
|
||||
for (const [meshId, nodeIds] of instanceGroups) {
|
||||
const meshes = nodeIds.map((id) => this.objectByBlenderId.get(id)).filter((object): object is Mesh => object instanceof Mesh && !(object instanceof InstancedMesh));
|
||||
if (meshes.length !== nodeIds.length || meshes.length < 2) continue;
|
||||
const first = meshes[0];
|
||||
const instances = new InstancedMesh(first.geometry, first.material, meshes.length);
|
||||
instances.castShadow = true;
|
||||
instances.receiveShadow = true;
|
||||
instances.name = `${first.name} (${meshes.length} instances)`;
|
||||
instances.frustumCulled = true;
|
||||
instances.userData = { ...first.userData, blenderId: undefined, instanceNodeIds: [...nodeIds], meshId };
|
||||
for (let index = 0; index < nodeIds.length; index++) {
|
||||
const node = snapshot.nodes.find((candidate) => candidate.id === nodeIds[index]);
|
||||
if (!node) continue;
|
||||
instances.setMatrixAt(index, this.instanceMatrix(node.transform, node.visible));
|
||||
instances.setColorAt(index, new Color(0xffffff));
|
||||
this.objectByBlenderId.set(node.id, instances);
|
||||
this.instanceIndexByBlenderId.set(node.id, index);
|
||||
}
|
||||
instances.instanceMatrix.needsUpdate = true;
|
||||
if (instances.instanceColor) instances.instanceColor.needsUpdate = true;
|
||||
for (let index = 0; index < meshes.length; index++) {
|
||||
const mesh = meshes[index];
|
||||
this.importedRoot.remove(mesh);
|
||||
if (index === 0) continue;
|
||||
mesh.geometry.dispose();
|
||||
const materials = Array.isArray(mesh.material) ? mesh.material : [mesh.material];
|
||||
for (const material of materials) material.dispose();
|
||||
}
|
||||
this.importedRoot.add(instances);
|
||||
}
|
||||
this.canvas.dataset.instanceGroups = String(instanceGroups.size);
|
||||
}
|
||||
|
||||
private clearImportedScene(): void {
|
||||
while (this.importedRoot.children.length > 0) {
|
||||
const child = this.importedRoot.children.pop();
|
||||
if (!child) continue;
|
||||
child.traverse((object) => {
|
||||
const mesh = object as Mesh;
|
||||
if (mesh.geometry && typeof mesh.geometry.dispose === "function") mesh.geometry.dispose();
|
||||
const materials = Array.isArray(mesh.material) ? mesh.material : [mesh.material];
|
||||
for (const material of materials) {
|
||||
if (material && typeof material.dispose === "function") material.dispose();
|
||||
}
|
||||
});
|
||||
}
|
||||
while (this.importedLights.children.length > 0) {
|
||||
const child = this.importedLights.children.pop();
|
||||
if (child && "dispose" in child && typeof child.dispose === "function") child.dispose();
|
||||
}
|
||||
}
|
||||
|
||||
private createMaterial(definition: MaterialIR | undefined, active: boolean): MeshPhysicalMaterial {
|
||||
return createPBRMaterial(definition, active);
|
||||
}
|
||||
|
||||
private applyWorld(snapshot: SceneSnapshotIR): void {
|
||||
const sceneDefinition = snapshot.scenes.find((scene) => scene.id === snapshot.sceneId) ?? snapshot.scenes[0];
|
||||
const worldId = snapshot.scenes[0]?.worldId;
|
||||
const world = snapshot.worlds.find((candidate) => candidate.id === worldId) ?? snapshot.worlds[0];
|
||||
this.scene.background = world ? new Color().setRGB(...world.color) : new Color("#25272b");
|
||||
configurePBRRenderer(this.renderer, sceneDefinition?.colorManagement?.exposure ?? world?.exposure ?? 0);
|
||||
this.canvas.dataset.viewTransform = sceneDefinition?.colorManagement?.viewTransform ?? "";
|
||||
this.canvas.dataset.viewLook = sceneDefinition?.colorManagement?.look ?? "";
|
||||
this.canvas.dataset.mist = world?.mist?.enabled ? "metadata-only" : "disabled";
|
||||
}
|
||||
|
||||
private applyCamera(snapshot: SceneSnapshotIR): void {
|
||||
const cameraObjectId = snapshot.scenes[0]?.cameraObjectId;
|
||||
const cameraNode = snapshot.nodes.find((node) => node.id === cameraObjectId && node.type === "CAMERA");
|
||||
const definition = snapshot.cameras.find((camera) => camera.id === cameraNode?.dataId);
|
||||
if (!cameraNode || !definition) return;
|
||||
const sensor = definition.sensorFit === 2 ? definition.sensorHeightMm : definition.sensorWidthMm;
|
||||
const fov = (2 * Math.atan((sensor / Math.max(0.001, definition.lensMm)) / 2) * 180) / Math.PI;
|
||||
this.camera.fov = definition.projection === "ORTHOGRAPHIC" ? 45 : fov;
|
||||
this.camera.near = Math.max(0.0001, definition.near);
|
||||
this.camera.far = Math.max(this.camera.near + 0.001, definition.far);
|
||||
this.camera.filmGauge = sensor;
|
||||
this.camera.filmOffset = definition.shift[0] * sensor;
|
||||
this.camera.updateProjectionMatrix();
|
||||
}
|
||||
|
||||
private populateLights(snapshot: SceneSnapshotIR): void {
|
||||
const lights = new Map(snapshot.lights.map((light) => [light.id, light]));
|
||||
for (const node of snapshot.nodes) {
|
||||
if (node.type !== "LIGHT" || !node.visible || !node.dataId) continue;
|
||||
const definition = lights.get(node.dataId);
|
||||
if (!definition) continue;
|
||||
const light = createPBRLight(definition);
|
||||
configurePBRLight(light, node, this.importedLights);
|
||||
light.name = node.name;
|
||||
light.userData.sceneNodeId = node.id;
|
||||
light.userData.blenderId = node.id;
|
||||
light.userData.revision = snapshot.revision;
|
||||
this.importedLights.add(light);
|
||||
this.objectByBlenderId.set(node.id, light);
|
||||
}
|
||||
}
|
||||
|
||||
private resize(): void {
|
||||
const width = Math.max(1, this.canvas.clientWidth);
|
||||
const height = Math.max(1, this.canvas.clientHeight);
|
||||
this.camera.aspect = width / height;
|
||||
this.camera.updateProjectionMatrix();
|
||||
this.renderer.setSize(width, height, false);
|
||||
}
|
||||
|
||||
private handleClick = (event: MouseEvent): void => {
|
||||
const bounds = this.canvas.getBoundingClientRect();
|
||||
if (bounds.width <= 0 || bounds.height <= 0) return;
|
||||
this.pointer.set(
|
||||
((event.clientX - bounds.left) / bounds.width) * 2 - 1,
|
||||
-((event.clientY - bounds.top) / bounds.height) * 2 + 1,
|
||||
);
|
||||
this.raycaster.setFromCamera(this.pointer, this.camera);
|
||||
const hit = this.raycaster.intersectObjects(this.importedRoot.children, true)
|
||||
.find((intersection) => typeof intersection.object.userData.blenderId === "string" || Array.isArray(intersection.object.userData.instanceNodeIds));
|
||||
if (!hit) return;
|
||||
const additive = event.shiftKey || event.ctrlKey || event.metaKey;
|
||||
const nonMeshDataId = hit.object.userData.nonMeshDataId;
|
||||
if (typeof nonMeshDataId === "string" && hit.index !== undefined) {
|
||||
const indexMap = hit.object.userData.nonMeshPointIndexMap as number[] | undefined;
|
||||
const pointIndex = indexMap?.[hit.index] ?? Math.max(0, Math.floor(hit.object.userData.nonMeshPointOffset ?? 0) + hit.index);
|
||||
const kindMap = hit.object.userData.nonMeshPointKindMap as NonMeshElementKind[] | undefined;
|
||||
this.onElementSelect?.(nonMeshDataId, "VERT", pointIndex, additive, kindMap?.[hit.index] ?? "CONTROL_POINT");
|
||||
return;
|
||||
}
|
||||
const meshId = hit.object.userData.meshId;
|
||||
const triangle = hit.faceIndex ?? -1;
|
||||
const sourceIndices = hit.object.userData.sourceIndices as number[] | undefined;
|
||||
if (this.editMode && typeof meshId === "string" && triangle >= 0 && sourceIndices) {
|
||||
const triangleVertices = sourceIndices.slice(triangle * 3, triangle * 3 + 3);
|
||||
let selectedIndex = -1;
|
||||
if (this.selectionMode === "FACE") {
|
||||
const triangleFaces = hit.object.userData.triangleFaceIndices as number[] | undefined;
|
||||
selectedIndex = triangleFaces?.[triangle] ?? triangle;
|
||||
}
|
||||
else if (this.selectionMode === "VERT") {
|
||||
const positions = hit.object.userData.sourcePositions as number[] | undefined;
|
||||
if (positions) {
|
||||
const localHit = hit.object.worldToLocal(hit.point.clone());
|
||||
const local = [localHit.x, -localHit.z, localHit.y];
|
||||
selectedIndex = triangleVertices.reduce((best, vertex) => {
|
||||
if (best < 0) return vertex;
|
||||
const distance = (positions[vertex * 3] - local[0]) ** 2 + (positions[vertex * 3 + 1] - local[1]) ** 2 + (positions[vertex * 3 + 2] - local[2]) ** 2;
|
||||
const bestDistance = (positions[best * 3] - local[0]) ** 2 + (positions[best * 3 + 1] - local[1]) ** 2 + (positions[best * 3 + 2] - local[2]) ** 2;
|
||||
return distance < bestDistance ? vertex : best;
|
||||
}, -1);
|
||||
}
|
||||
}
|
||||
else {
|
||||
const edges = hit.object.userData.edgeVertexIndices as number[] | undefined;
|
||||
if (edges) {
|
||||
const candidates = [[triangleVertices[0], triangleVertices[1]], [triangleVertices[1], triangleVertices[2]], [triangleVertices[2], triangleVertices[0]]];
|
||||
selectedIndex = candidates.reduce((found, pair) => {
|
||||
if (found >= 0) return found;
|
||||
const low = Math.min(pair[0], pair[1]);
|
||||
const high = Math.max(pair[0], pair[1]);
|
||||
for (let edge = 0; edge < edges.length / 2; edge++) {
|
||||
if (Math.min(edges[edge * 2], edges[edge * 2 + 1]) === low && Math.max(edges[edge * 2], edges[edge * 2 + 1]) === high) return edge;
|
||||
}
|
||||
return -1;
|
||||
}, -1);
|
||||
}
|
||||
}
|
||||
if (selectedIndex >= 0) this.onElementSelect?.(meshId, this.selectionMode, selectedIndex, additive);
|
||||
return;
|
||||
}
|
||||
const instanceIds = hit.object.userData.instanceNodeIds as string[] | undefined;
|
||||
const objectId = instanceIds && hit.instanceId !== undefined ? instanceIds[hit.instanceId] : hit.object.userData.blenderId;
|
||||
if (typeof objectId === "string") this.onSelect?.(objectId, additive);
|
||||
};
|
||||
|
||||
private renderLoop = (): void => {
|
||||
if (this.disposed) return;
|
||||
this.controls.update();
|
||||
this.lodAdapter.update(this.camera, Math.max(1, this.canvas.clientHeight));
|
||||
this.renderer.render(this.scene, this.camera);
|
||||
this.animationFrame = window.requestAnimationFrame(this.renderLoop);
|
||||
};
|
||||
|
||||
dispose(): void {
|
||||
this.disposed = true;
|
||||
window.cancelAnimationFrame(this.animationFrame);
|
||||
this.resizeObserver.disconnect();
|
||||
this.canvas.removeEventListener("click", this.handleClick);
|
||||
this.controls.dispose();
|
||||
this.lodAdapter.clear();
|
||||
this.clearImportedScene();
|
||||
this.textureStore.dispose();
|
||||
this.renderer.dispose();
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user