Feat/geometry alignment

src/components/SDFTest/SDFTest.tsx

@@ -29,7 +29,7 @@ const fileName = 'OpenSans-Regular'
 
 export const SDFTest = ({ text, inBias = 0, outBias = 0, fontSize = 32, rotation = 0, spacing = 0, verticalAlign = 0.0, horizontalAlign = 0.0 }: Props) => {
 
-  const glyphAtlas = useTexture(`glyphs/${fileName}.png`, (tex: Texture) => {
+  const glyphAtlas = useTexture(`./glyphs/${fileName}.png`, (tex: Texture) => {
     tex.generateMipmaps = false
     tex.magFilter = LinearFilter
     tex.minFilter = LinearFilter
@@ -39,7 +39,7 @@ export const SDFTest = ({ text, inBias = 0, outBias = 0, fontSize = 32, rotation
   const [glyphConfig, setGlyphConfig] = useState<GlyphConfig | null>()
 
   useEffect(() => {
-    get(`glyphs/${fileName}.json`).then((json: MsdfFontJson) => {
+    get(`./glyphs/${fileName}.json`).then((json: MsdfFontJson) => {
       setGlyphConfig(createConfig(json))
     }).catch(() => setGlyphConfig(null))
   }, [])

src/components/Wellbores/Casings/Casings.tsx

@@ -1,12 +1,12 @@
 import { ForwardedRef, forwardRef, ReactElement, useEffect, useMemo, useState } from 'react'
-import { useGenerator } from '../../../hooks/useGenerator'
 import { BufferGeometry, Group, Material, MeshStandardMaterial, Object3D } from 'three'
+import { useGenerator } from '../../../hooks/useGenerator'
 import { useWellboreContext } from '../../../hooks/useWellboreContext'
-import { queue } from '../../../sdk/utils/limiter'
-import { casings, CasingsGeneratorResponse } from './casings-defs'
 import { createLayers, LAYERS } from '../../../layers/layers'
 import { unpackBufferGeometry } from '../../../sdk/geometries/packing'
+import { queue } from '../../../sdk/utils/limiter'
 import { CommonComponentProps, CustomMaterialProps } from '../../common'
+import { casings, CasingsGeneratorResponse } from './casings-defs'
 
 /**
  * Casing props
@@ -17,8 +17,8 @@ export type CasingProps = CommonComponentProps & CustomMaterialProps & {
   radialSegments?: number,
   sizeMultiplier?: number,
   shoeFactor?: number,
-  segmentsPerMeter?: number,
-  simplificationThreshold?: number,
+  overrideSegmentsPerMeter?: number,
+  overrideSimplificationThreshold?: number,
   opacity?: number,
   priority?: number,
 }
@@ -54,18 +54,30 @@ export const Casings = forwardRef(({
   radialSegments = 16,
   sizeMultiplier = 1,
   shoeFactor = 1,
-  segmentsPerMeter = 0.1,
-  simplificationThreshold = 0,
+  overrideSegmentsPerMeter,
+  overrideSimplificationThreshold,
   opacity = 1,
   fallback,
   priority = 0
 }: CasingProps, ref: ForwardedRef<Group>) => {
 
-  const { id, fromMsl } = useWellboreContext()
+  const { 
+    id,
+    fromMsl,
+    segmentsPerMeter: defaultSegmentsPerMeter,
+    simplificationThreshold: defaultSimplificationThreshold,
+  } = useWellboreContext()
   const generator = useGenerator<CasingsGeneratorResponse>(casings)
   const [geometry, setGeometry] = useState<BufferGeometry | null>(null)
   const [useFallback, setUseFallback] = useState(false)
 
+  const { segmentsPerMeter, simplificationThreshold } = useMemo(() => {
+    return {
+      segmentsPerMeter: overrideSegmentsPerMeter !== undefined ? overrideSegmentsPerMeter : defaultSegmentsPerMeter || 0.1,
+      simplificationThreshold: overrideSimplificationThreshold !== undefined ? overrideSimplificationThreshold : defaultSimplificationThreshold || 0
+    }
+  }, [defaultSegmentsPerMeter, defaultSimplificationThreshold, overrideSegmentsPerMeter, overrideSimplificationThreshold])
+
   const material = useMemo<Material | Material[]>(() => {
     if (customMaterial) {
       return customMaterial
@@ -75,7 +87,7 @@ export const Casings = forwardRef(({
       new MeshStandardMaterial({
         color: 'black',
         metalness: 0,
-        roughness: 1
+        roughness: 1,
       }),
       new MeshStandardMaterial({
         color: '#555',

src/components/Wellbores/CompletionTools/CompletionTools.tsx

@@ -1,13 +1,13 @@
 import { ReactElement, useEffect, useMemo, useState } from 'react'
-import { useGenerator } from '../../../hooks/useGenerator'
 import { BufferGeometry, Material, MeshLambertMaterial, MeshStandardMaterial, Object3D } from 'three'
-import { ScreenMaterial } from './Screen/screen-material'
+import { useGenerator } from '../../../hooks/useGenerator'
 import { useWellboreContext } from '../../../hooks/useWellboreContext'
-import { queue } from '../../../sdk/utils/limiter'
-import { completionTools, CompletionToolsGeneratorResponse } from './completion-tools-defs'
 import { createLayers, LAYERS } from '../../../layers/layers'
 import { unpackBufferGeometry } from '../../../sdk/geometries/packing'
+import { queue } from '../../../sdk/utils/limiter'
 import { CommonComponentProps, CustomMaterialProps } from '../../common'
+import { completionTools, CompletionToolsGeneratorResponse } from './completion-tools-defs'
+import { ScreenMaterial } from './Screen/screen-material'
 
 /**
  * CompletionTools props
@@ -16,8 +16,8 @@ import { CommonComponentProps, CustomMaterialProps } from '../../common'
 export type CompletionToolsProps = CommonComponentProps & CustomMaterialProps & {
   radialSegments?: number,
   sizeMultiplier?: number,
-  segmentsPerMeter?: number,
-  simplificationThreshold?: number,
+  overrideSegmentsPerMeter?: number,
+  overrideSimplificationThreshold?: number,
   fallback?: (() => ReactElement<Object3D>),
   priority?: number,
 }
@@ -51,16 +51,29 @@ export const CompletionTools = ({
   customDistanceMaterial,
   radialSegments = 16,
   sizeMultiplier = 1,
-  segmentsPerMeter = 0.1,
-  simplificationThreshold = 0,
+  overrideSegmentsPerMeter,
+  overrideSimplificationThreshold,
   priority = 0,
   fallback,
 }: CompletionToolsProps) => {
-  const { id, fromMsl } = useWellboreContext()
+  const { 
+    id,
+    fromMsl,
+    segmentsPerMeter: defaultSegmentsPerMeter,
+    simplificationThreshold: defaultSimplificationThreshold,
+  } = useWellboreContext()
+
   const generator = useGenerator<CompletionToolsGeneratorResponse>(completionTools)
   const [geometry, setGeometry] = useState<BufferGeometry | null>(null)
   const [useFallback, setUseFallback] = useState(false)
 
+  const { segmentsPerMeter, simplificationThreshold } = useMemo(() => {
+    return {
+      segmentsPerMeter: overrideSegmentsPerMeter !== undefined ? overrideSegmentsPerMeter : defaultSegmentsPerMeter || 0.1,
+      simplificationThreshold: overrideSimplificationThreshold !== undefined ? overrideSimplificationThreshold : defaultSimplificationThreshold || 0
+    }
+  }, [defaultSegmentsPerMeter, defaultSimplificationThreshold, overrideSegmentsPerMeter, overrideSimplificationThreshold])
+
   const material = useMemo<Material | Material[]>(() => {
       if (customMaterial) {
         return customMaterial
@@ -132,6 +145,7 @@ export const CompletionTools = ({
           color: '#ccc',
         })
       ]
+
       return m
     }, [customMaterial])
 

src/components/Wellbores/WellboreFormationColumn/WellboreFormationColumn.stories.tsx

@@ -23,9 +23,11 @@ type DemoProps = {
   merged: boolean
   scaleFactor: number
   stepSize: number
+  segmentsPerMeter: number
+  simplificationThreshold: number
 } 
 
-const DemoComponent = ({ showRibbon, merged, scaleFactor, stepSize }: DemoProps) => {
+const DemoComponent = ({ showRibbon, merged, scaleFactor, stepSize, segmentsPerMeter, simplificationThreshold }: DemoProps) => {
   useEffect(() => {
       dispatchEvent(new WellboreSelectedEvent({ id: wellboreId }))
     }, [])
@@ -34,7 +36,7 @@ const DemoComponent = ({ showRibbon, merged, scaleFactor, stepSize }: DemoProps)
     <>
         <GlyphsProvider fontAtlasUrl='glyphs/OpenSans-Regular.png' fontConfigUrl='glyphs/OpenSans-Regular.json'>
           <group>
-            <Wellbore id={wellboreId}>
+            <Wellbore id={wellboreId} segmentsPerMeter={segmentsPerMeter} simplificationThreshold={simplificationThreshold}>
               {showRibbon && (
                 <WellboreRibbon>
                   <MeasuredDepthStripe stepSize={stepSize} width={15} offset={-7.5} />
@@ -88,6 +90,8 @@ export const Default: Story = {
     merged: true,
     scaleFactor: 5,
     stepSize: 10,
+    segmentsPerMeter: 0.1,
+    simplificationThreshold: 0,
     // stratColumnId,
     // startRadius: 0.5,
     // formationWidth: 2,
@@ -113,6 +117,22 @@ export const Default: Story = {
         step: 1
       }
     },
+    segmentsPerMeter: {
+      control: {
+        type: 'range',
+        min: 0.1,
+        max: 1,
+        step: 0.1
+      }
+    },
+    simplificationThreshold: {
+      control: {
+        type: 'range',
+        min: 0,
+        max: 0.00005,
+        step: 0.000001
+      }
+    },
     // formationWidth: {
     //   control: {
     //     type: 'range',

src/components/Wellbores/WellboreRibbon/WellboreRibbon.tsx

@@ -1,20 +1,27 @@
 import { PropsWithChildren, useEffect, useMemo, useState } from 'react'
 import { BufferAttribute, InstancedBufferGeometry, InstancedInterleavedBuffer, InterleavedBufferAttribute } from 'three'
 import { CameraFocusAtPointEvent, cameraFocusAtPointEventType, CameraSetPositionEvent, cameraSetPositionEventType, useData, useWellboreContext } from '../../../main'
-import { calculateFrenetFrames, getCurveSegments, getTrajectory, PositionLog, Trajectory, Vec3 } from '../../../sdk'
+import { calculateFrenetFrames, getCurvePositions, getTrajectory, PositionLog, Trajectory, Vec3 } from '../../../sdk'
 import { WellboreRibbonContext, WellboreRibbonContextProps } from './WellboreRibbonContext'
 
 
 
-function createStripeGeometry(trajectory: Trajectory, segmentsPerMeter: number, fromMsl?: number) {
+function createStripeGeometry(trajectory: Trajectory, segmentsPerMeter: number, simplificationThreshold: number, fromMsl?: number) {
   const positions = new Float32Array([
     0, -0.5,
     1, -0.5,
     1, 0.5,
     0, 0.5,
   ])
   const from = fromMsl !== undefined ? trajectory.getPositionAtDepth(fromMsl, true)! : 0
-  const segments = getCurveSegments(trajectory.curve, segmentsPerMeter, from, 1)
+
+  const segments = getCurvePositions(
+    trajectory.curve,
+    from,
+    1,
+    segmentsPerMeter,
+    simplificationThreshold
+  )
   const frenetFrames = calculateFrenetFrames(trajectory.curve, segments)
 
   const attributesBuffer = new Float32Array(frenetFrames.length * 7)
@@ -67,15 +74,15 @@ function createStripeGeometry(trajectory: Trajectory, segmentsPerMeter: number,
  */
 export const WellboreRibbon = ({ children }: PropsWithChildren) => {
   const store = useData()
-  const { id, fromMsl, segmentsPerMeter } = useWellboreContext()
+  const { id, fromMsl, segmentsPerMeter, simplificationThreshold } = useWellboreContext()
   const [trajectory, setTrajectory] = useState<Trajectory | null>(null)
   const [direction, setDirection] = useState<Vec3>([0, -1, 0])
   const stripeGeometry = useMemo(() => {
     if (trajectory) {
-      return createStripeGeometry(trajectory, segmentsPerMeter, fromMsl)
+      return createStripeGeometry(trajectory, segmentsPerMeter, simplificationThreshold, fromMsl)
     }
     return null
-  }, [trajectory, segmentsPerMeter, fromMsl])
+  }, [trajectory, segmentsPerMeter, simplificationThreshold, fromMsl])
 
   const context = useMemo<WellboreRibbonContextProps | null>(() => {
     if (trajectory && stripeGeometry) {

src/generators/basic-trajectory-generator.ts

@@ -2,67 +2,14 @@ import { transfer } from 'comlink'
 import {
   BufferAttributeLike,
   clamp,
-  Curve3D,
-  dotVec3,
+  getCurvePositions,
   getTrajectory,
   limit,
   packBufferGeometryLike,
   PositionLog,
   ReadonlyStore,
 } from '../sdk'
 
-function calculateSegments(
-  curve: Curve3D,
-  startPos: number,
-  endPos: number,
-  segmentsPerMeter: number,
-  simplificationThreshold: number
-) {
-  const segments: number[] = []
-  const curveLength = curve.length
-
-  const deltaPos = endPos - startPos
-  const segmentLength = deltaPos * curveLength
-
-  const nSegments = Math.ceil(segmentsPerMeter * segmentLength)
-  const stepSize = deltaPos / nSegments
-
-  const MIN_SEGMENT_LENGTH = 1 / (curveLength * 0.01)
-
-  if (simplificationThreshold) {
-    simplificationThreshold *= 0.1
-  }
-
-  // add first segment of step
-  segments.push(startPos)
-  let guideTangent = simplificationThreshold
-    ? curve.getTangentAt(startPos)
-    : null
-  let lastPosition = startPos
-  // interpolate in-between segments
-  for (let j = 1; j < nSegments; j++) {
-    const curvePosition = startPos + j * stepSize
-    const currentSegmentLength = curvePosition - lastPosition
-    const candidateTangent = simplificationThreshold
-      ? curve.getTangentAt(curvePosition)
-      : null
-    if (
-      currentSegmentLength >= MIN_SEGMENT_LENGTH ||
-      !simplificationThreshold ||
-      Math.abs(dotVec3(guideTangent!, candidateTangent!)) <
-        1 - simplificationThreshold
-    ) {
-      segments.push(curvePosition)
-      guideTangent = candidateTangent
-      lastPosition = curvePosition
-    }
-  }
-
-  segments.push(endPos)
-
-  return segments
-}
-
 export async function generateBasicTrajectory(
   this: ReadonlyStore,
   id: string,
@@ -88,17 +35,17 @@ export async function generateBasicTrajectory(
         )
       : 0
 
-  const segments = calculateSegments(
+  const curvePositions = getCurvePositions(
     trajectory.curve,
     from,
     1,
     segmentsPerMeter,
     simplificationThreshold
   )
-  const positions = new Float32Array(segments.length * 3)
-  const lengths = includeLengths ? new Float32Array(segments.length) : null
+  const positions = new Float32Array(curvePositions.length * 3)
+  const lengths = includeLengths ? new Float32Array(curvePositions.length) : null
 
-  segments.forEach((u, i) => {
+  curvePositions.forEach((u, i) => {
     const pos = trajectory.curve.getPointAt(u)
     positions[i * 3] = pos[0]
     positions[i * 3 + 1] = pos[1]