From 181913118a6e5c6c2aedaff87edadf6ff905ed31 Mon Sep 17 00:00:00 2001 From: Josh Field Date: Fri, 28 Jun 2024 12:18:59 +1000 Subject: [PATCH] optimize spline helper (#10295) --- .../components/debug/SplineHelperComponent.ts | 123 +++++++++--------- 1 file changed, 58 insertions(+), 65 deletions(-) diff --git a/packages/engine/src/scene/components/debug/SplineHelperComponent.ts b/packages/engine/src/scene/components/debug/SplineHelperComponent.ts index 3e5a053ca7..aa60fe9380 100644 --- a/packages/engine/src/scene/components/debug/SplineHelperComponent.ts +++ b/packages/engine/src/scene/components/debug/SplineHelperComponent.ts @@ -24,34 +24,21 @@ Ethereal Engine. All Rights Reserved. */ import { useEffect } from 'react' -import { - BufferAttribute, - BufferGeometry, - Line, - LineBasicMaterial, - Mesh, - MeshBasicMaterial, - SphereGeometry, - Vector3 -} from 'three' +import { BufferAttribute, BufferGeometry, Line, LineBasicMaterial, MeshBasicMaterial, Vector3 } from 'three' import { createEntity, defineComponent, - Entity, removeEntity, setComponent, useComponent, useEntityContext } from '@etherealengine/ecs' -import { TransformComponent } from '@etherealengine/spatial' -import { AxesHelperComponent } from '@etherealengine/spatial/src/common/debug/AxesHelperComponent' import { NameComponent } from '@etherealengine/spatial/src/common/NameComponent' import { addObjectToGroup } from '@etherealengine/spatial/src/renderer/components/GroupComponent' -import { ObjectLayerMaskComponent } from '@etherealengine/spatial/src/renderer/components/ObjectLayerComponent' import { setVisibleComponent } from '@etherealengine/spatial/src/renderer/components/VisibleComponent' import { ObjectLayerMasks } from '@etherealengine/spatial/src/renderer/constants/ObjectLayers' -import { useDisposable, useResource } from '@etherealengine/spatial/src/resources/resourceHooks' +import { useResource } from '@etherealengine/spatial/src/resources/resourceHooks' import { EntityTreeComponent } from '@etherealengine/spatial/src/transform/components/EntityTree' import { SplineComponent } from '../SplineComponent' @@ -59,10 +46,12 @@ import { SplineComponent } from '../SplineComponent' const ARC_SEGMENTS = 200 const _point = new Vector3() -const lineGeometry = new BufferGeometry() -lineGeometry.setAttribute('position', new BufferAttribute(new Float32Array(ARC_SEGMENTS * 3), 3)) -const lineMaterial = new LineBasicMaterial({ color: 0xff0000, opacity: 0.35 }) - +const lineMaterial = new LineBasicMaterial({ color: 'white', opacity: 0.35 }) +const createLineGeom = () => { + const lineGeometry = new BufferGeometry() + lineGeometry.setAttribute('position', new BufferAttribute(new Float32Array(ARC_SEGMENTS * 3), 3)) + return lineGeometry +} const greenMeshMaterial = () => new MeshBasicMaterial({ color: 'lightgreen', opacity: 0.2 }) const redMeshMaterial = () => new MeshBasicMaterial({ color: 'red', opacity: 0.2 }) @@ -75,39 +64,43 @@ export const SplineHelperComponent = defineComponent({ onSet: (entity, component, json) => { if (!json) return - if (typeof json.layerMask == 'number') component.layerMask.set(json.layerMask) + if (typeof json.layerMask === 'number') component.layerMask.set(json.layerMask) }, reactor: function () { const entity = useEntityContext() const component = useComponent(entity, SplineHelperComponent) const spline = useComponent(entity, SplineComponent) - const [sphereGeometry] = useResource(() => new SphereGeometry(0.05, 4, 2), entity) - - const [greenMat] = useResource(greenMeshMaterial, entity) - const [greenSphere] = useDisposable( - Mesh, - entity, - sphereGeometry.value as SphereGeometry, - greenMat.value as MeshBasicMaterial - ) - - const [redMat] = useResource(redMeshMaterial, entity) - const [redSphere] = useDisposable( - Mesh, - entity, - sphereGeometry.value as SphereGeometry, - redMat.value as MeshBasicMaterial - ) + + const [lineGeometry] = useResource(createLineGeom, entity) + /** @todo these are probably unnecessary and were just used for debugging the implementation */ + // const [sphereGeometry] = useResource(() => new SphereGeometry(0.05, 4, 2), entity) + + // const [greenMat] = useResource(greenMeshMaterial, entity) + // const [greenSphere] = useDisposable( + // Mesh, + // entity, + // sphereGeometry.value as SphereGeometry, + // greenMat.value as MeshBasicMaterial + // ) + + // const [redMat] = useResource(redMeshMaterial, entity) + // const [redSphere] = useDisposable( + // Mesh, + // entity, + // sphereGeometry.value as SphereGeometry, + // redMat.value as MeshBasicMaterial + // ) useEffect(() => { - const gizmoEntities = [] as Entity[] + // const gizmoEntities = [] as Entity[] const curve = spline.curve.value const elements = spline.elements + if (elements.length < 3) return const lineEntity = createEntity() // Geometry and material are created in module scope and reused, do not dispose - const line = new Line(lineGeometry, lineMaterial) + const line = new Line(lineGeometry.value as BufferGeometry, lineMaterial) line.name = `SplineHelperComponent-${entity}` addObjectToGroup(lineEntity, line) @@ -116,31 +109,31 @@ export const SplineHelperComponent = defineComponent({ setVisibleComponent(lineEntity, true) - if (elements.length > 0) { - const first = elements[0].value - greenSphere.position.copy(first.position) - addObjectToGroup(lineEntity, greenSphere) - } - - if (elements.length > 1) { - const last = elements[elements.length - 1].value - redSphere.position.copy(last.position) - addObjectToGroup(lineEntity, redSphere) - } - - let id = 0 - for (const elem of elements.value) { - const gizmoEntity = createEntity() - gizmoEntities.push(gizmoEntity) - setComponent(gizmoEntity, EntityTreeComponent, { parentEntity: lineEntity }) - setComponent(gizmoEntity, TransformComponent, { - position: elem.position, - rotation: elem.quaternion - }) - setComponent(gizmoEntity, AxesHelperComponent, { name: `spline-gizmo-${++id}` }) - } - - setComponent(lineEntity, ObjectLayerMaskComponent, component.layerMask.value) + // if (elements.length > 0) { + // const first = elements[0].value + // greenSphere.position.copy(first.position) + // addObjectToGroup(lineEntity, greenSphere) + // } + + // if (elements.length > 1) { + // const last = elements[elements.length - 1].value + // redSphere.position.copy(last.position) + // addObjectToGroup(lineEntity, redSphere) + // } + + // let id = 0 + // for (const elem of elements.value) { + // const gizmoEntity = createEntity() + // gizmoEntities.push(gizmoEntity) + // setComponent(gizmoEntity, EntityTreeComponent, { parentEntity: lineEntity }) + // setComponent(gizmoEntity, TransformComponent, { + // position: elem.position, + // rotation: elem.quaternion + // }) + // setComponent(gizmoEntity, AxesHelperComponent, { name: `spline-gizmo-${++id}` }) + // } + + // setComponent(lineEntity, ObjectLayerMaskComponent, component.layerMask.value) const positions = line.geometry.attributes.position for (let i = 0; i < ARC_SEGMENTS; i++) { @@ -152,7 +145,7 @@ export const SplineHelperComponent = defineComponent({ return () => { if (lineEntity) removeEntity(lineEntity) - for (const gizmoEntity of gizmoEntities) removeEntity(gizmoEntity) + // for (const gizmoEntity of gizmoEntities) removeEntity(gizmoEntity) } }, [spline.curve, component.layerMask])