From d9914fe272261efe032d7ad03fcc9758fc91ad63 Mon Sep 17 00:00:00 2001 From: Adnane Belmadiaf Date: Wed, 15 Jun 2022 01:02:19 +0200 Subject: [PATCH] feat(GLTFImporter): add GLTFImporter --- .../content/docs/gallery/GLTFImporter.jpg | Bin 0 -> 30479 bytes Documentation/content/examples/index.md | 778 +++++++++--------- .../IO/Geometry/GLTFImporter/Animations.js | 256 ++++++ Sources/IO/Geometry/GLTFImporter/Constants.js | 85 ++ Sources/IO/Geometry/GLTFImporter/Decoder.js | 78 ++ .../IO/Geometry/GLTFImporter/Extensions.js | 103 +++ .../GLTFImporter/ORMTexture.worker.js | 35 + Sources/IO/Geometry/GLTFImporter/Parser.js | 505 ++++++++++++ Sources/IO/Geometry/GLTFImporter/Reader.js | 613 ++++++++++++++ Sources/IO/Geometry/GLTFImporter/Utils.js | 195 +++++ .../GLTFImporter/example/controller.html | 89 ++ .../IO/Geometry/GLTFImporter/example/index.js | 347 ++++++++ Sources/IO/Geometry/GLTFImporter/index.d.ts | 266 ++++++ Sources/IO/Geometry/GLTFImporter/index.js | 277 +++++++ Sources/IO/Geometry/index.js | 2 + 15 files changed, 3241 insertions(+), 388 deletions(-) create mode 100644 Documentation/content/docs/gallery/GLTFImporter.jpg create mode 100644 Sources/IO/Geometry/GLTFImporter/Animations.js create mode 100644 Sources/IO/Geometry/GLTFImporter/Constants.js create mode 100644 Sources/IO/Geometry/GLTFImporter/Decoder.js create mode 100644 Sources/IO/Geometry/GLTFImporter/Extensions.js create mode 100644 Sources/IO/Geometry/GLTFImporter/ORMTexture.worker.js create mode 100644 Sources/IO/Geometry/GLTFImporter/Parser.js create mode 100644 Sources/IO/Geometry/GLTFImporter/Reader.js create mode 100644 Sources/IO/Geometry/GLTFImporter/Utils.js create mode 100644 Sources/IO/Geometry/GLTFImporter/example/controller.html create mode 100644 Sources/IO/Geometry/GLTFImporter/example/index.js create mode 100644 Sources/IO/Geometry/GLTFImporter/index.d.ts create mode 100644 Sources/IO/Geometry/GLTFImporter/index.js diff --git a/Documentation/content/docs/gallery/GLTFImporter.jpg b/Documentation/content/docs/gallery/GLTFImporter.jpg new file mode 100644 index 0000000000000000000000000000000000000000..5b7b6be47900f951706a8d3c02dae96562f224cd GIT binary patch literal 30479 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 w6 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 Rjs - .categories { - columns: 2 200px; - column-gap: 1rem; - } - - .category { - break-inside: avoid; - display: inline-block; - width: 100%; - } - - .categories br { - display: none; - } - - .category ul { - margin-top: 0; - } - - .gallery img { - width: 32%; - display: inline-block; - padding: 2px; - } - - .gallery br { - display: none; - } - - -This will allow you to see the some live code running in your browser. Just pick a class on the left menu or in the category grouping below. The [Simple Cone](SimpleCone.html) is a good example to start with if you are new to VTK. - -
- -[![VolumeContour Example][VolumeContour]](./VolumeContour.html) -[![MultiSliceImageMapper Example][MultiSliceImageMapper]](./MultiSliceImageMapper.html) -[![PiecewiseGaussianWidget Example][PiecewiseGaussianWidget]](./PiecewiseGaussianWidget.html) - -
- -[MultiSliceImageMapper]: ../docs/gallery/MultiSliceImageMapper.jpg -[PiecewiseGaussianWidget]: ../docs/gallery/PiecewiseGaussianWidget.jpg -[VolumeContour]: ../docs/gallery/VolumeContour.jpg - -# Applications - -
- -[![GeometryViewer Example][GeometryViewerBrainBloodVessels]](./GeometryViewer.html "Load and visualize meshes") -[![OBJViewerFerrari Example][OBJViewerFerrari]](./OBJViewer.html "Load OBJ files with textures") -[![SceneExplorer Example][SceneExplorerVesselWithStreamlines]](./SceneExplorer.html "Load exported ParaView scenes") -[![SkyboxViewer Example][SkyboxViewer]](./SkyboxViewer.html "Skybox with VR support") -[![VolumeViewer Example][VolumeViewer]](./VolumeViewer.html "Load and visualize volumes") -[![QuadView Example][QuadView]](./QuadView.html "QuadView") - -
- -[GeometryViewerBrainBloodVessels]: ../docs/gallery/GeometryViewerBrainBloodVessels2.jpg -[OBJViewerFerrari]: ../docs/gallery/OBJViewerFerrari.jpg -[SceneExplorerVesselWithStreamlines]: ../docs/gallery/SceneExplorerVesselWithStreamlines.jpg -[SkyboxViewer]: ../docs/gallery/SkyboxViewer.jpg -[VolumeViewer]: ../docs/gallery/VolumeViewer.jpg -[QuadView]: ../docs/gallery/QuadView.jpg - -# Geometry - -
- -[![ImplicitBoolean Example][ImplicitBoolean]](./ImplicitBoolean.html "ImplicitBoolean") - -
- -[ImplicitBoolean]: ../docs/gallery/ImplicitBoolean.jpg - -# Volume - -
- -[![MultiSliceImageMapper Example][MultiSliceImageMappergif]](./MultiSliceImageMapper.html "MultiSliceImageMapper") -[![TestVolumeTypes Example][TestVolumeTypes]](./TestVolumeTypes.html "TestVolumeTypes") - -
- -[MultiSliceImageMappergif]: ../docs/gallery/MultiSliceImageMapper.gif -[TestVolumeTypes]: ../docs/gallery/TestVolumeTypes.jpg - -# Filters - -
- -[![Calculator Example][Calculator2]](./Calculator.html "Calculator") -[![ClipClosedSurface Example][ClipClosedSurface]](./ClipClosedSurface.html "ClipClosedSurface") -[![ContourLoopExtraction Example][ContourLoopExtraction]](./ContourLoopExtraction.html "ContourLoopExtraction") -[![ContourTriangulator Example][ContourTriangulator]](./ContourTriangulator.html "ContourTriangulator") -[![ImageCropFilter Example][ImageCropFilter]](./ImageCropFilter.html "ImageCropFilter") -[![ImageMarchingCubes Example][ImageMarchingCubes]](./ImageMarchingCubes.html "ImageMarchingCubes") -[![ImageMarchingSquares Example][ImageMarchingSquares]](./ImageMarchingSquares.html "ImageMarchingSquares") -[![ImageStreamline Example][ImageStreamline]](./ImageStreamline.html "ImageStreamline") -[![OBBTree Example][OBBTree]](./OBBTree.html "OBBTree") -[![OutlineFilter Example][OutlineFilter]](./OutlineFilter.html "OutlineFilter") -[![ScalarToRGBA Example][ScalarToRGBA]](./ScalarToRGBA.html "ScalarToRGBA") -[![TriangleFilter Example][TriangleFilter]](./TriangleFilter.html "TriangleFilter") -[![TubeFilter Example][TubeFilter]](./TubeFilter.html "TubeFilter") -[![Cutter Example][Cutter]](./Cutter.html "Cutter") -[![PolyDataNormals Example][PolyDataNormals]](./PolyDataNormals.html "PolyDataNormals") - -
- -[Calculator2]: ../docs/gallery/Calculator2.jpg -[ClipClosedSurface]: ../docs/gallery/ClipClosedSurface.jpg -[ContourLoopExtraction]: ../docs/gallery/ContourLoopExtraction.jpg -[ContourTriangulator]: ../docs/gallery/ContourTriangulator.jpg -[ImageCropFilter]: ../docs/gallery/ImageCropFilter.jpg -[ImageMarchingCubes]: ../docs/gallery/ImageMarchingCubes.jpg -[ImageMarchingSquares]: ../docs/gallery/ImageMarchingSquares.jpg -[ImageStreamline]: ../docs/gallery/ImageStreamline.jpg -[OBBTree]: ../docs/gallery/OBBTree.jpg -[OutlineFilter]: ../docs/gallery/OutlineFilter.jpg -[ScalarToRGBA]: ../docs/gallery/ScalarToRGBA.jpg -[TriangleFilter]: ../docs/gallery/TriangleFilter.jpg -[TubeFilter]: ../docs/gallery/TubeFilter.jpg -[Cutter]: ../docs/gallery/Cutter.jpg -[PolyDataNormals]: ../docs/gallery/PolyDataNormals.jpg - -# Sources - -
- -[![ArrowSource Example][ArrowSource]](./ArrowSource.html "ArrowSource") -[![CircleSource Example][CircleSource]](./CircleSource.html "CircleSource") -[![ConcentricCylinderSource Example][ConcentricCylinderSource]](./ConcentricCylinderSource.html "ConcentricCylinderSource") -[![ConeSource Example][ConeSource]](./ConeSource.html "ConeSource") -[![Cone Example][Cone]](./Cone.html "Cone source") -[![CubeSource Example][CubeSource]](./CubeSource.html "CubeSource") -[![Cursor3D Example][Cursor3D]](./Cursor3D.html "Cursor3D") -[![CylinderSource Example][CylinderSource]](./CylinderSource.html "CylinderSource") -[![LineSource Example][LineSource]](./LineSource.html "LineSource") -[![PlaneSource Example][PlaneSource]](./PlaneSource.html "PlaneSource") -[![PointSource Example][PointSource]](./PointSource.html "PointSource") -[![SLICSource Example][SLICSource]](./SLICSource.html "SLICSource") -[![SphereSource Example][SphereSource]](./SphereSource.html "SphereSource") -[![WarpScalar Example][WarpScalargif]](./WarpScalar.html "WarpScalar") -[![WindowedSincPolyDataFilter Example][WindowedSincPolyDataFilter]](./WindowedSincPolyDataFilter.html "WindowedSincPolyDataFilter") - -
- -[ArrowSource]: ../docs/gallery/ArrowSource.jpg -[CircleSource]: ../docs/gallery/CircleSource.jpg -[ConcentricCylinderSource]: ../docs/gallery/ConcentricCylinderSource.jpg -[ConeSource]: ../docs/gallery/ConeSource.jpg -[Cone]: ../docs/gallery/Cone.jpg -[CubeSource]: ../docs/gallery/CubeSource.jpg -[Cursor3D]: ../docs/gallery/Cursor3D.gif -[CylinderSource]: ../docs/gallery/CylinderSource.jpg -[LineSource]: ../docs/gallery/LineSource.jpg -[PlaneSource]: ../docs/gallery/PlaneSource.jpg -[PointSource]: ../docs/gallery/PointSource.jpg -[SLICSource]: ../docs/gallery/SLICSource.jpg -[SphereSource]: ../docs/gallery/SphereSource.gif -[WarpScalargif]: ../docs/gallery/WarpScalar.gif -[WindowedSincPolyDataFilter]: ../docs/gallery/WindowedSincPolyDataFilter.gif - -# IO - -
- -[![DracoReader Example][DracoReaderWithIcon]](./DracoReader.html "Draco reader(drc)") -[![PLYReader Example][PLYReaderWithIcon]](./PLYReader.html "PLY reader(ply)") -[![PLYWriter Example][PLYWriterWithIcon]](./PLYWriter.html "PLY writer(ply)") -[![STLReader Example][STLReaderWithIcon]](./STLReader.html "STL reader(stl)") -[![STLWriter Example][STLWriterWithIcon]](./STLWriter.html "STL writer(stl)") -[![PolyDataReader Example][PolyDataReaderWithIcon]](./PolyDataReader.html "VTK legacy reader(VTK)") -[![ElevationReader Example][ElevationReaderWithIcon]](./ElevationReader.html "Elevation reader(CSV, JPG)") -[![OBJReader Example][OBJReaderWithIcon]](./OBJReader.html "OBJ reader(OBJ, MTL, JPG)") -[![PDBReader Example][PDBReaderWithIcon]](./PDBReader.html "PDB reader(OBJ, MTL, JPG)") -[![XMLImageDataWriter Example][XMLImageDataWriterWithIcon]](./XMLImageDataWriter.html "ImageData XML writer(VTI)") -[![XMLPolyDataDataWriter Example][XMLPolyDataWriterWithIcon]](./XMLPolyDataWriter.html "PolyData XML writer(VTP)") -[![ZipHttpReader Example][ZipHttpReaderWithIcon]](./ZipHttpReader.html "ZIP http reader(ZIP)") -[![HttpDataSetReader Example][HttpDataSetReaderWithIcon]](./HttpDataSetReader.html "Import a VTK dataset") -[![HttpDataSetSeriesReader Example][HttpDataSetSeriesReaderWithIcon]](./HttpDataSetSeriesReader.html "Import a VTK dataset with time support.") -[![HttpSceneLoader Example][HttpSceneLoaderWithIcon]](./HttpSceneLoader.html "Import a VTK scene (data + representation)") -[![OfflineLocalView Example][OfflineLocalViewWithIcon]](./OfflineLocalView.html "Load a serialized scene (VTKSZ)") - -
- -[DracoReaderWithIcon]: ../docs/gallery/DracoReaderWithIcon.jpg -[PLYReaderWithIcon]: ../docs/gallery/PLYReaderWithIcon.jpg -[PLYWriterWithIcon]: ../docs/gallery/PLYWriterWithIcon.jpg -[STLReaderWithIcon]: ../docs/gallery/STLReaderWithIcon.jpg -[STLWriterWithIcon]: ../docs/gallery/STLWriterWithIcon.jpg -[PolyDataReaderWithIcon]: ../docs/gallery/VTKReaderWithIcon.jpg -[ElevationReaderWithIcon]: ../docs/gallery/ElevationReaderWithIcon.jpg -[OBJReaderWithIcon]: ../docs/gallery/OBJReaderWithIcon.jpg -[PDBReaderWithIcon]: ../docs/gallery/PDBReaderWithIcon.jpg -[XMLImageDataWriterWithIcon]: ../docs/gallery/XMLImageDataWriterWithIcon.jpg -[XMLPolyDataWriterWithIcon]: ../docs/gallery/XMLPolyDataWriterWithIcon.jpg -[ZipHttpReaderWithIcon]: ../docs/gallery/ZipHttpReaderWithIcon.jpg -[HttpDataSetReaderWithIcon]: ../docs/gallery/HttpDataSetReaderWithIcon.jpg -[HttpDataSetSeriesReaderWithIcon]: ../docs/gallery/HttpDataSetSeriesReaderWithIcon.gif -[HttpSceneLoaderWithIcon]: ../docs/gallery/HttpSceneLoaderWithIcon.jpg -[OfflineLocalViewWithIcon]: ../docs/gallery/OfflineLocalViewWithIcon.jpg - -# Actors - -
- -[![ScalarBarActor Example][ScalarBarActor]](./ScalarBarActor.html "Scalar bar/color legend/LUT actor") -[![Actor2D Example][Actor2D]](./Actor2D.html "Actor2D") -[![CubeAxes Example][CubeAxes]](./CubeAxes.html "Cube axes around an actor") - -
- -[ScalarBarActor]: ../docs/gallery/ScalarBarActor.jpg -[Actor2D]: ../docs/gallery/Actor2D.jpg -[CubeAxes]: ../docs/gallery/CubeAxes.jpg - -# Rendering - -
- -[![DepthTest Example][DepthTest]](./DepthTest.html "Capture and render the depth buffer of the scene") -[![Texture Example][Texture]](./Texture.html "Apply a texture on a sphere") -[![Convolution2DPass Example][Convolution2DPass]](./Convolution2DPass.html "Convolution2DPass") -[![ManyRenderers Example][ManyRenderers]](./ManyRenderers.html "ManyRenderers") -[![ManyRenderWindows Example][ManyRenderWindows]](./ManyRenderWindows.html "ManyRenderWindows") - -
- -[Convolution2DPass]: ../docs/gallery/Convolution2DPass.gif -[DepthTest]: ../docs/gallery/DepthTest.jpg -[Texture]: ../docs/gallery/Texture.jpg -[ManyRenderers]: ../docs/gallery/ManyRenderers.gif -[ManyRenderWindows]: ../docs/gallery/ManyRenderWindows.jpg - -## Geometry Rendering - -
- -[![SphereMapper Example][SphereMapper]](./SphereMapper.html "GPU sphere mapper") -[![StickMapper Example][StickMapper]](./StickMapper.html "GPU stick/cylinder/column mapper") -[![Glyph3DMapper Example][Glyph3DMapper]](./Glyph3DMapper.html "Glyph mapper to render the same object multiple times") -[![SphereArrays Example][SphereArray]](./SphereArray.html "SphereArray") -[![GlyphRotation Example][GlyphRotation]](./GlyphRotation.html "Apply rotations on the glyph mapper") -[![TimeSeries Example][TimeSeries]](./TimeSeries.html "Time based dataset") -[![SurfaceLICMapper Example][SurfaceLICMapper]](./SurfaceLICMapper.html "Surface Line Integral Convolution (LIC) mapper") - -
- -[SurfaceLICMapper]: ../docs/gallery/SurfaceLICMapper.jpg -[Glyph3DMapper]: ../docs/gallery/Glyph3DMapper.jpg -[SphereMapper]: ../docs/gallery/SphereMapper.jpg -[StickMapper]: ../docs/gallery/StickMapper.jpg -[SphereArray]: ../docs/gallery/SphereArray.jpg -[GlyphRotation]: ../docs/gallery/GlyphRotation.jpg -[TimeSeries]: ../docs/gallery/TimeSeries.gif - -## Image Rendering - -
- -[![ImageLabelOutline Example][ImageLabelOutline]](./ImageLabelOutline.html "ImageLabelOutline") -[![ImageMapper Example][ImageMapper]](./ImageMapper.html "2D orthogonal axis image mapper") -[![ImageResliceMapper Example][ImageResliceMapper]](./ImageResliceMapper.html "GPU 2D reslice/oblique/MPR mapper") -[![ImageCPRMapper Example][ImageCPRMapper]](./ImageCPRMapper.html "Curved Planar Reformat GPU mapper, stretched and straightened") -[![VolumeOutline Example][VolumeOutline]](./VolumeOutline.html "VolumeOutline") - -
- -[ImageLabelOutline]: ../docs/gallery/ImageLabelOutline.jpg -[ImageCPRMapper]: ../docs/gallery/ImageCPRMapper.jpg -[ImageResliceMapper]: ../docs/gallery/ImageResliceMapper.gif -[ImageMapper]: ../docs/gallery/ImageMapper.jpg -[VolumeOutline]: ../docs/gallery/VolumeOutline.jpg - -## Volume Rendering - -
- -[![VolumeClipPlane Example][VolumeClipPlane]](./VolumeClipPlane.html "VolumeClipPlane") -[![VolumeContour Example][VolumeContourgif]](./VolumeContour.html "VolumeContour") -[![VolumeMapperBlendModes Example][VolumeMapperBlendModes]](./VolumeMapperBlendModes.html "VolumeMapperBlendModes") -[![VolumeMapperLightAndShadow Example][VolumeMapperLightAndShadow]](./VolumeMapperLightAndShadow.html "VolumeMapperLightAndShadow") -[![VolumeMapperParallelProjection Example][VolumeMapperParallelProjection]](./VolumeMapperParallelProjection.html "VolumeMapperParallelProjection") -[![VolumeRenderingWithPolyData Example][VolumeRenderingWithPolyData]](./VolumeRenderingWithPolyData.html "VolumeRenderingWithPolyData") -[![VolumeMapper Example][VolumeMapper]](./VolumeMapper.html "3D volume ray cast mapper witch volumetric scattering") -[![LabelmapEdgeProjection Example][LabelmapEdgeProjection]](./LabelmapEdgeProjection.html "Labelmap edge projection in the volume") - -
- -[VolumeClipPlane]: ../docs/gallery/VolumeClipPlane.jpg -[VolumeContourgif]: ../docs/gallery/VolumeContour.gif -[VolumeMapperBlendModes]: ../docs/gallery/VolumeMapperBlendModes.gif -[VolumeMapperLightAndShadow]: ../docs/gallery/VolumeMapperLightAndShadow.jpg -[VolumeMapperParallelProjection]: ../docs/gallery/VolumeMapperParallelProjection.jpg -[VolumeRenderingWithPolyData]: ../docs/gallery/VolumeRenderingWithPolyData.jpg -[VolumeMapper]: ../docs/gallery/VolumeMapper.jpg -[LabelmapEdgeProjection]: ../docs/gallery/LabelmapEdgeProjection.gif - - -# Interaction/Picking/Selecting - -
- -[![DeviceOrientationToCamera Example][DeviceOrientationToCamera]](./DeviceOrientationToCamera.html "DeviceOrientationToCamera") -[![InteractorStyleHMDXR Example][InteractorStyleHMDXR]](./InteractorStyleHMDXR.html "InteractorStyleHMDXR") -[![InteractorStyleManipulator Example][InteractorStyleManipulator]](./InteractorStyleManipulator.html "InteractorStyleManipulator") -[![InteractorStyleTrackballCamera Example][InteractorStyleTrackballCamera]](./InteractorStyleTrackballCamera.html "InteractorStyleTrackballCamera") -[![InteractorStyleUnicam Example][InteractorStyleUnicam]](./InteractorStyleUnicam.html "InteractorStyleUnicam") -[![KeyboardCameraManipulator Example][KeyboardCameraManipulator]](./KeyboardCameraManipulator.html "KeyboardCameraManipulator") -[![MouseRangeManipulator Example][MouseRangeManipulator]](./MouseRangeManipulator.html "MouseRangeManipulator") -[![PiecewiseGaussianWidget Example][PiecewiseGaussianWidget]](./PiecewiseGaussianWidget.html "PiecewiseGaussianWidget") -[![TimeStepBasedAnimationHandler Example][TimeStepBasedAnimationHandler]](./TimeStepBasedAnimationHandler.html "TimeStepBasedAnimationHandler") -[![CellPicker Example][CellPicker]](./CellPicker.html "CPU cell picker/selector") -[![PointPicker Example][PointPicker]](./PointPicker.html "CPU point picker/selector") -[![HardwareSelector Example][HardwareSelector]](./HardwareSelector.html "GPU point/cell picker/selector with properties") - -
- -[DeviceOrientationToCamera]: ../docs/gallery/DeviceOrientationToCamera.jpg -[InteractorStyleHMDXR]: ../docs/gallery/InteractorStyleHMDXR.jpg -[InteractorStyleManipulator]: ../docs/gallery/InteractorStyleManipulator.jpg -[InteractorStyleTrackballCamera]: ../docs/gallery/InteractorStyleTrackballCamera.jpg -[InteractorStyleUnicam]: ../docs/gallery/InteractorStyleUnicam.jpg -[KeyboardCameraManipulator]: ../docs/gallery/KeyboardCameraManipulator.jpg -[MouseRangeManipulator]: ../docs/gallery/MouseRangeManipulator.jpg -[PiecewiseGaussianWidget]: ../docs/gallery/PiecewiseGaussianWidget.jpg -[TimeStepBasedAnimationHandler]: ../docs/gallery/TimeStepBasedAnimationHandler.gif -[CellPicker]: ../docs/gallery/CellPicker.jpg -[PointPicker]: ../docs/gallery/PointPicker.jpg -[HardwareSelector]: ../docs/gallery/HardwareSelector.jpg - -# Widgets - -
- -[![AngleWidget Example][AngleWidget]](./AngleWidget.html "Angle (radian, degree) widget example") -[![Box Example][Box]](./Box.html "Box") -[![ImageCroppingWidget Example][ImageCroppingWidget]](./ImageCroppingWidget.html "Crop/Clip volume rendering with a bounding box/cube/orthogonal planes") -[![ImplicitPlaneWidget Example][ImplicitPlaneWidget]](./ImplicitPlaneWidget.html "Translate and orient an implicit plane with normal and origin") -[![InteractiveOrientationWidget Example][InteractiveOrientationWidget]](./InteractiveOrientationWidget.html "Corner coordinate system orientation widget") -[![LabelWidget Example][LabelWidget]](./LabelWidget.html "Place, edit text size and color of label widget") -[![LineWidget Example][LineWidget]](./LineWidget.html "Place and edit line/distance widget with handles") -[![PaintWidget Example][PaintWidget]](./PaintWidget.html "Draw strokes, create rectangle, square, ellipse and disk 2D widgets") -[![PolyLineWidget Example][PolyLineWidget]](./PolyLineWidget.html "Place multiple connected handles with text") -[![ResliceCursorWidget Example][ResliceCursorWidget]](./ResliceCursorWidget.html "Axial Coronal and Sagittal MPR/Oblique/Reformatted/Resliced/Slab/MIP views") -[![ShapeWidget Example][ShapeWidget]](./ShapeWidget.html "2D shape widgets with text information") -[![SphereWidget Example][SphereWidget]](./SphereWidget.html "2D sphere widget controlled with radius") -[![SplineWidget Example][SplineWidget]](./PaintWidget.html "Widget to draw open or closed (triangularized) sharp/smooth polygon widget") - -
- -[AngleWidget]: ../docs/gallery/AngleWidget.png -[ImageCroppingWidget]: ../docs/gallery/ImageCroppingWidget.jpg -[ImplicitPlaneWidget]: ../docs/gallery/ImplicitPlaneWidget.png -[InteractiveOrientationWidget]: ../docs/gallery/InteractiveOrientationWidget.png -[LabelWidget]: ../docs/gallery/LabelWidget.png -[LineWidget]: ../docs/gallery/LineWidget.png -[PaintWidget]: ../docs/gallery/PaintWidget.gif -[PolyLineWidget]: ../docs/gallery/PolyLineWidget.png -[ResliceCursorWidget]: ../docs/gallery/ResliceCursorWidget.gif -[ShapeWidget]: ../docs/gallery/ShapeWidget.png -[SphereWidget]: ../docs/gallery/SphereWidget.jpg -[SplineWidget]: ../docs/gallery/SplineWidget.gif -[Box]: ../docs/gallery/Box.jpg - -# Connectivity - -
- -[![AR Example][ARWithLogo]](./AR.html "AR with WebXR") -[![VR Example][VRWithLogo]](./VR.html "VR with WebXR") -[![LookingGlass Example][LookingGlassWithLogo]](./LookingGlass.html "Render scene into a LookingGlass device") -[![ItkWasmVolume Example][ItkWasmVolumeWithLogo]](./ItkWasmVolume.html "ItkWasmVolume") -[![RemoteView Example][RemoteViewWithLogos]](./RemoteView.html "Connect a VTK or ParaView Python backend server via WebSockets") -[![ImageStream Example][ImageStreamWithLogos]](./ImageStream.html "Stream a ParaView Python backend server via WebSockets under a VTK.js rendering") - -
- -[ARWithLogo]: ../docs/gallery/ArConeWithLogo.jpg -[VRWithLogo]: ../docs/gallery/VrConeWithLogo.jpg -[LookingGlassWithLogo]: ../docs/gallery/LookingGlassConeWithLogo.jpg -[ItkWasmVolumeWithLogo]: ../docs/gallery/ItkWasmVolumeWithLogo.jpg -[RemoteViewWithLogos]: ../docs/gallery/RemoteViewWithLogos.jpg -[ImageStreamWithLogos]: ../docs/gallery/ImageStreamWithLogos.jpg +title: Examples +--- + + + +This will allow you to see the some live code running in your browser. Just pick a class on the left menu or in the category grouping below. The [Simple Cone](SimpleCone.html) is a good example to start with if you are new to VTK. + +
+ +[![VolumeContour Example][VolumeContour]](./VolumeContour.html) +[![MultiSliceImageMapper Example][MultiSliceImageMapper]](./MultiSliceImageMapper.html) +[![PiecewiseGaussianWidget Example][PiecewiseGaussianWidget]](./PiecewiseGaussianWidget.html) + +
+ +[MultiSliceImageMapper]: ../docs/gallery/MultiSliceImageMapper.jpg +[PiecewiseGaussianWidget]: ../docs/gallery/PiecewiseGaussianWidget.jpg +[VolumeContour]: ../docs/gallery/VolumeContour.jpg + +# Applications + +
+ +[![GeometryViewer Example][GeometryViewerBrainBloodVessels]](./GeometryViewer.html "Load and visualize meshes") +[![OBJViewerFerrari Example][OBJViewerFerrari]](./OBJViewer.html "Load OBJ files with textures") +[![SceneExplorer Example][SceneExplorerVesselWithStreamlines]](./SceneExplorer.html "Load exported ParaView scenes") +[![SkyboxViewer Example][SkyboxViewer]](./SkyboxViewer.html "Skybox with VR support") +[![VolumeViewer Example][VolumeViewer]](./VolumeViewer.html "Load and visualize volumes") +[![QuadView Example][QuadView]](./QuadView.html "QuadView") + +
+ +[GeometryViewerBrainBloodVessels]: ../docs/gallery/GeometryViewerBrainBloodVessels2.jpg +[OBJViewerFerrari]: ../docs/gallery/OBJViewerFerrari.jpg +[SceneExplorerVesselWithStreamlines]: ../docs/gallery/SceneExplorerVesselWithStreamlines.jpg +[SkyboxViewer]: ../docs/gallery/SkyboxViewer.jpg +[VolumeViewer]: ../docs/gallery/VolumeViewer.jpg +[QuadView]: ../docs/gallery/QuadView.jpg + +# Geometry + +
+ +[![ImplicitBoolean Example][ImplicitBoolean]](./ImplicitBoolean.html "ImplicitBoolean") + +
+ +[ImplicitBoolean]: ../docs/gallery/ImplicitBoolean.jpg + +# Volume + +
+ +[![MultiSliceImageMapper Example][MultiSliceImageMappergif]](./MultiSliceImageMapper.html "MultiSliceImageMapper") +[![TestVolumeTypes Example][TestVolumeTypes]](./TestVolumeTypes.html "TestVolumeTypes") + +
+ +[MultiSliceImageMappergif]: ../docs/gallery/MultiSliceImageMapper.gif +[TestVolumeTypes]: ../docs/gallery/TestVolumeTypes.jpg + +# Filters + +
+ +[![Calculator Example][Calculator2]](./Calculator.html "Calculator") +[![ClipClosedSurface Example][ClipClosedSurface]](./ClipClosedSurface.html "ClipClosedSurface") +[![ContourLoopExtraction Example][ContourLoopExtraction]](./ContourLoopExtraction.html "ContourLoopExtraction") +[![ContourTriangulator Example][ContourTriangulator]](./ContourTriangulator.html "ContourTriangulator") +[![ImageCropFilter Example][ImageCropFilter]](./ImageCropFilter.html "ImageCropFilter") +[![ImageMarchingCubes Example][ImageMarchingCubes]](./ImageMarchingCubes.html "ImageMarchingCubes") +[![ImageMarchingSquares Example][ImageMarchingSquares]](./ImageMarchingSquares.html "ImageMarchingSquares") +[![ImageStreamline Example][ImageStreamline]](./ImageStreamline.html "ImageStreamline") +[![OBBTree Example][OBBTree]](./OBBTree.html "OBBTree") +[![OutlineFilter Example][OutlineFilter]](./OutlineFilter.html "OutlineFilter") +[![ScalarToRGBA Example][ScalarToRGBA]](./ScalarToRGBA.html "ScalarToRGBA") +[![TriangleFilter Example][TriangleFilter]](./TriangleFilter.html "TriangleFilter") +[![TubeFilter Example][TubeFilter]](./TubeFilter.html "TubeFilter") +[![Cutter Example][Cutter]](./Cutter.html "Cutter") +[![PolyDataNormals Example][PolyDataNormals]](./PolyDataNormals.html "PolyDataNormals") + +
+ +[Calculator2]: ../docs/gallery/Calculator2.jpg +[ClipClosedSurface]: ../docs/gallery/ClipClosedSurface.jpg +[ContourLoopExtraction]: ../docs/gallery/ContourLoopExtraction.jpg +[ContourTriangulator]: ../docs/gallery/ContourTriangulator.jpg +[ImageCropFilter]: ../docs/gallery/ImageCropFilter.jpg +[ImageMarchingCubes]: ../docs/gallery/ImageMarchingCubes.jpg +[ImageMarchingSquares]: ../docs/gallery/ImageMarchingSquares.jpg +[ImageStreamline]: ../docs/gallery/ImageStreamline.jpg +[OBBTree]: ../docs/gallery/OBBTree.jpg +[OutlineFilter]: ../docs/gallery/OutlineFilter.jpg +[ScalarToRGBA]: ../docs/gallery/ScalarToRGBA.jpg +[TriangleFilter]: ../docs/gallery/TriangleFilter.jpg +[TubeFilter]: ../docs/gallery/TubeFilter.jpg +[Cutter]: ../docs/gallery/Cutter.jpg +[PolyDataNormals]: ../docs/gallery/PolyDataNormals.jpg + +# Sources + +
+ +[![ArrowSource Example][ArrowSource]](./ArrowSource.html "ArrowSource") +[![CircleSource Example][CircleSource]](./CircleSource.html "CircleSource") +[![ConcentricCylinderSource Example][ConcentricCylinderSource]](./ConcentricCylinderSource.html "ConcentricCylinderSource") +[![ConeSource Example][ConeSource]](./ConeSource.html "ConeSource") +[![Cone Example][Cone]](./Cone.html "Cone source") +[![CubeSource Example][CubeSource]](./CubeSource.html "CubeSource") +[![Cursor3D Example][Cursor3D]](./Cursor3D.html "Cursor3D") +[![CylinderSource Example][CylinderSource]](./CylinderSource.html "CylinderSource") +[![LineSource Example][LineSource]](./LineSource.html "LineSource") +[![PlaneSource Example][PlaneSource]](./PlaneSource.html "PlaneSource") +[![PointSource Example][PointSource]](./PointSource.html "PointSource") +[![SLICSource Example][SLICSource]](./SLICSource.html "SLICSource") +[![SphereSource Example][SphereSource]](./SphereSource.html "SphereSource") +[![WarpScalar Example][WarpScalargif]](./WarpScalar.html "WarpScalar") +[![WindowedSincPolyDataFilter Example][WindowedSincPolyDataFilter]](./WindowedSincPolyDataFilter.html "WindowedSincPolyDataFilter") + +
+ +[ArrowSource]: ../docs/gallery/ArrowSource.jpg +[CircleSource]: ../docs/gallery/CircleSource.jpg +[ConcentricCylinderSource]: ../docs/gallery/ConcentricCylinderSource.jpg +[ConeSource]: ../docs/gallery/ConeSource.jpg +[Cone]: ../docs/gallery/Cone.jpg +[CubeSource]: ../docs/gallery/CubeSource.jpg +[Cursor3D]: ../docs/gallery/Cursor3D.gif +[CylinderSource]: ../docs/gallery/CylinderSource.jpg +[LineSource]: ../docs/gallery/LineSource.jpg +[PlaneSource]: ../docs/gallery/PlaneSource.jpg +[PointSource]: ../docs/gallery/PointSource.jpg +[SLICSource]: ../docs/gallery/SLICSource.jpg +[SphereSource]: ../docs/gallery/SphereSource.gif +[WarpScalargif]: ../docs/gallery/WarpScalar.gif +[WindowedSincPolyDataFilter]: ../docs/gallery/WindowedSincPolyDataFilter.gif + +# IO + +
+ +[![DracoReader Example][DracoReaderWithIcon]](./DracoReader.html "Draco reader(drc)") +[![PLYReader Example][PLYReaderWithIcon]](./PLYReader.html "PLY reader(ply)") +[![PLYWriter Example][PLYWriterWithIcon]](./PLYWriter.html "PLY writer(ply)") +[![STLReader Example][STLReaderWithIcon]](./STLReader.html "STL reader(stl)") +[![STLWriter Example][STLWriterWithIcon]](./STLWriter.html "STL writer(stl)") +[![GLTFImporter Example][GLTFImporter]](./GLTFImporter.html "GLTF importer(gltf, glb)") +[![PolyDataReader Example][PolyDataReaderWithIcon]](./PolyDataReader.html "VTK legacy reader(VTK)") +[![ElevationReader Example][ElevationReaderWithIcon]](./ElevationReader.html "Elevation reader(CSV, JPG)") +[![OBJReader Example][OBJReaderWithIcon]](./OBJReader.html "OBJ reader(OBJ, MTL, JPG)") +[![PDBReader Example][PDBReaderWithIcon]](./PDBReader.html "PDB reader(OBJ, MTL, JPG)") +[![XMLImageDataWriter Example][XMLImageDataWriterWithIcon]](./XMLImageDataWriter.html "ImageData XML writer(VTI)") +[![XMLPolyDataDataWriter Example][XMLPolyDataWriterWithIcon]](./XMLPolyDataWriter.html "PolyData XML writer(VTP)") +[![ZipHttpReader Example][ZipHttpReaderWithIcon]](./ZipHttpReader.html "ZIP http reader(ZIP)") +[![HttpDataSetReader Example][HttpDataSetReaderWithIcon]](./HttpDataSetReader.html "Import a VTK dataset") +[![HttpDataSetSeriesReader Example][HttpDataSetSeriesReaderWithIcon]](./HttpDataSetSeriesReader.html "Import a VTK dataset with time support.") +[![HttpSceneLoader Example][HttpSceneLoaderWithIcon]](./HttpSceneLoader.html "Import a VTK scene (data + representation)") +[![OfflineLocalView Example][OfflineLocalViewWithIcon]](./OfflineLocalView.html "Load a serialized scene (VTKSZ)") + +
+ +[DracoReaderWithIcon]: ../docs/gallery/DracoReaderWithIcon.jpg +[PLYReaderWithIcon]: ../docs/gallery/PLYReaderWithIcon.jpg +[PLYWriterWithIcon]: ../docs/gallery/PLYWriterWithIcon.jpg +[STLReaderWithIcon]: ../docs/gallery/STLReaderWithIcon.jpg +[STLWriterWithIcon]: ../docs/gallery/STLWriterWithIcon.jpg +[GLTFImporter]: ../docs/gallery/GLTFImporter.jpg +[PolyDataReaderWithIcon]: ../docs/gallery/VTKReaderWithIcon.jpg +[ElevationReaderWithIcon]: ../docs/gallery/ElevationReaderWithIcon.jpg +[OBJReaderWithIcon]: ../docs/gallery/OBJReaderWithIcon.jpg +[PDBReaderWithIcon]: ../docs/gallery/PDBReaderWithIcon.jpg +[XMLImageDataWriterWithIcon]: ../docs/gallery/XMLImageDataWriterWithIcon.jpg +[XMLPolyDataWriterWithIcon]: ../docs/gallery/XMLPolyDataWriterWithIcon.jpg +[ZipHttpReaderWithIcon]: ../docs/gallery/ZipHttpReaderWithIcon.jpg +[HttpDataSetReaderWithIcon]: ../docs/gallery/HttpDataSetReaderWithIcon.jpg +[HttpDataSetSeriesReaderWithIcon]: ../docs/gallery/HttpDataSetSeriesReaderWithIcon.gif +[HttpSceneLoaderWithIcon]: ../docs/gallery/HttpSceneLoaderWithIcon.jpg +[OfflineLocalViewWithIcon]: ../docs/gallery/OfflineLocalViewWithIcon.jpg + +# Actors + +
+ +[![ScalarBarActor Example][ScalarBarActor]](./ScalarBarActor.html "Scalar bar/color legend/LUT actor") +[![Actor2D Example][Actor2D]](./Actor2D.html "Actor2D") +[![CubeAxes Example][CubeAxes]](./CubeAxes.html "Cube axes around an actor") + +
+ +[ScalarBarActor]: ../docs/gallery/ScalarBarActor.jpg +[Actor2D]: ../docs/gallery/Actor2D.jpg +[CubeAxes]: ../docs/gallery/CubeAxes.jpg + +# Rendering + +
+ +[![DepthTest Example][DepthTest]](./DepthTest.html "Capture and render the depth buffer of the scene") +[![Texture Example][Texture]](./Texture.html "Apply a texture on a sphere") +[![Convolution2DPass Example][Convolution2DPass]](./Convolution2DPass.html "Convolution2DPass") +[![ManyRenderers Example][ManyRenderers]](./ManyRenderers.html "ManyRenderers") +[![ManyRenderWindows Example][ManyRenderWindows]](./ManyRenderWindows.html "ManyRenderWindows") + +
+ +[Convolution2DPass]: ../docs/gallery/Convolution2DPass.gif +[DepthTest]: ../docs/gallery/DepthTest.jpg +[Texture]: ../docs/gallery/Texture.jpg +[ManyRenderers]: ../docs/gallery/ManyRenderers.gif +[ManyRenderWindows]: ../docs/gallery/ManyRenderWindows.jpg + +## Geometry Rendering + +
+ +[![SphereMapper Example][SphereMapper]](./SphereMapper.html "GPU sphere mapper") +[![StickMapper Example][StickMapper]](./StickMapper.html "GPU stick/cylinder/column mapper") +[![Glyph3DMapper Example][Glyph3DMapper]](./Glyph3DMapper.html "Glyph mapper to render the same object multiple times") +[![SphereArrays Example][SphereArray]](./SphereArray.html "SphereArray") +[![GlyphRotation Example][GlyphRotation]](./GlyphRotation.html "Apply rotations on the glyph mapper") +[![TimeSeries Example][TimeSeries]](./TimeSeries.html "Time based dataset") +[![SurfaceLICMapper Example][SurfaceLICMapper]](./SurfaceLICMapper.html "Surface Line Integral Convolution (LIC) mapper") + +
+ +[SurfaceLICMapper]: ../docs/gallery/SurfaceLICMapper.jpg +[Glyph3DMapper]: ../docs/gallery/Glyph3DMapper.jpg +[SphereMapper]: ../docs/gallery/SphereMapper.jpg +[StickMapper]: ../docs/gallery/StickMapper.jpg +[SphereArray]: ../docs/gallery/SphereArray.jpg +[GlyphRotation]: ../docs/gallery/GlyphRotation.jpg +[TimeSeries]: ../docs/gallery/TimeSeries.gif + +## Image Rendering + +
+ +[![ImageLabelOutline Example][ImageLabelOutline]](./ImageLabelOutline.html "ImageLabelOutline") +[![ImageMapper Example][ImageMapper]](./ImageMapper.html "2D orthogonal axis image mapper") +[![ImageResliceMapper Example][ImageResliceMapper]](./ImageResliceMapper.html "GPU 2D reslice/oblique/MPR mapper") +[![ImageCPRMapper Example][ImageCPRMapper]](./ImageCPRMapper.html "Curved Planar Reformat GPU mapper, stretched and straightened") +[![VolumeOutline Example][VolumeOutline]](./VolumeOutline.html "VolumeOutline") + +
+ +[ImageLabelOutline]: ../docs/gallery/ImageLabelOutline.jpg +[ImageCPRMapper]: ../docs/gallery/ImageCPRMapper.jpg +[ImageResliceMapper]: ../docs/gallery/ImageResliceMapper.gif +[ImageMapper]: ../docs/gallery/ImageMapper.jpg +[VolumeOutline]: ../docs/gallery/VolumeOutline.jpg + +## Volume Rendering + +
+ +[![VolumeClipPlane Example][VolumeClipPlane]](./VolumeClipPlane.html "VolumeClipPlane") +[![VolumeContour Example][VolumeContourgif]](./VolumeContour.html "VolumeContour") +[![VolumeMapperBlendModes Example][VolumeMapperBlendModes]](./VolumeMapperBlendModes.html "VolumeMapperBlendModes") +[![VolumeMapperLightAndShadow Example][VolumeMapperLightAndShadow]](./VolumeMapperLightAndShadow.html "VolumeMapperLightAndShadow") +[![VolumeMapperParallelProjection Example][VolumeMapperParallelProjection]](./VolumeMapperParallelProjection.html "VolumeMapperParallelProjection") +[![VolumeRenderingWithPolyData Example][VolumeRenderingWithPolyData]](./VolumeRenderingWithPolyData.html "VolumeRenderingWithPolyData") +[![VolumeMapper Example][VolumeMapper]](./VolumeMapper.html "3D volume ray cast mapper witch volumetric scattering") +[![LabelmapEdgeProjection Example][LabelmapEdgeProjection]](./LabelmapEdgeProjection.html "Labelmap edge projection in the volume") + +
+ +[VolumeClipPlane]: ../docs/gallery/VolumeClipPlane.jpg +[VolumeContourgif]: ../docs/gallery/VolumeContour.gif +[VolumeMapperBlendModes]: ../docs/gallery/VolumeMapperBlendModes.gif +[VolumeMapperLightAndShadow]: ../docs/gallery/VolumeMapperLightAndShadow.jpg +[VolumeMapperParallelProjection]: ../docs/gallery/VolumeMapperParallelProjection.jpg +[VolumeRenderingWithPolyData]: ../docs/gallery/VolumeRenderingWithPolyData.jpg +[VolumeMapper]: ../docs/gallery/VolumeMapper.jpg +[LabelmapEdgeProjection]: ../docs/gallery/LabelmapEdgeProjection.gif + + +# Interaction/Picking/Selecting + +
+ +[![DeviceOrientationToCamera Example][DeviceOrientationToCamera]](./DeviceOrientationToCamera.html "DeviceOrientationToCamera") +[![InteractorStyleHMDXR Example][InteractorStyleHMDXR]](./InteractorStyleHMDXR.html "InteractorStyleHMDXR") +[![InteractorStyleManipulator Example][InteractorStyleManipulator]](./InteractorStyleManipulator.html "InteractorStyleManipulator") +[![InteractorStyleTrackballCamera Example][InteractorStyleTrackballCamera]](./InteractorStyleTrackballCamera.html "InteractorStyleTrackballCamera") +[![InteractorStyleUnicam Example][InteractorStyleUnicam]](./InteractorStyleUnicam.html "InteractorStyleUnicam") +[![KeyboardCameraManipulator Example][KeyboardCameraManipulator]](./KeyboardCameraManipulator.html "KeyboardCameraManipulator") +[![MouseRangeManipulator Example][MouseRangeManipulator]](./MouseRangeManipulator.html "MouseRangeManipulator") +[![PiecewiseGaussianWidget Example][PiecewiseGaussianWidget]](./PiecewiseGaussianWidget.html "PiecewiseGaussianWidget") +[![TimeStepBasedAnimationHandler Example][TimeStepBasedAnimationHandler]](./TimeStepBasedAnimationHandler.html "TimeStepBasedAnimationHandler") +[![CellPicker Example][CellPicker]](./CellPicker.html "CPU cell picker/selector") +[![PointPicker Example][PointPicker]](./PointPicker.html "CPU point picker/selector") +[![HardwareSelector Example][HardwareSelector]](./HardwareSelector.html "GPU point/cell picker/selector with properties") + +
+ +[DeviceOrientationToCamera]: ../docs/gallery/DeviceOrientationToCamera.jpg +[InteractorStyleHMDXR]: ../docs/gallery/InteractorStyleHMDXR.jpg +[InteractorStyleManipulator]: ../docs/gallery/InteractorStyleManipulator.jpg +[InteractorStyleTrackballCamera]: ../docs/gallery/InteractorStyleTrackballCamera.jpg +[InteractorStyleUnicam]: ../docs/gallery/InteractorStyleUnicam.jpg +[KeyboardCameraManipulator]: ../docs/gallery/KeyboardCameraManipulator.jpg +[MouseRangeManipulator]: ../docs/gallery/MouseRangeManipulator.jpg +[PiecewiseGaussianWidget]: ../docs/gallery/PiecewiseGaussianWidget.jpg +[TimeStepBasedAnimationHandler]: ../docs/gallery/TimeStepBasedAnimationHandler.gif +[CellPicker]: ../docs/gallery/CellPicker.jpg +[PointPicker]: ../docs/gallery/PointPicker.jpg +[HardwareSelector]: ../docs/gallery/HardwareSelector.jpg + +# Widgets + +
+ +[![AngleWidget Example][AngleWidget]](./AngleWidget.html "Angle (radian, degree) widget example") +[![Box Example][Box]](./Box.html "Box") +[![ImageCroppingWidget Example][ImageCroppingWidget]](./ImageCroppingWidget.html "Crop/Clip volume rendering with a bounding box/cube/orthogonal planes") +[![ImplicitPlaneWidget Example][ImplicitPlaneWidget]](./ImplicitPlaneWidget.html "Translate and orient an implicit plane with normal and origin") +[![InteractiveOrientationWidget Example][InteractiveOrientationWidget]](./InteractiveOrientationWidget.html "Corner coordinate system orientation widget") +[![LabelWidget Example][LabelWidget]](./LabelWidget.html "Place, edit text size and color of label widget") +[![LineWidget Example][LineWidget]](./LineWidget.html "Place and edit line/distance widget with handles") +[![PaintWidget Example][PaintWidget]](./PaintWidget.html "Draw strokes, create rectangle, square, ellipse and disk 2D widgets") +[![PolyLineWidget Example][PolyLineWidget]](./PolyLineWidget.html "Place multiple connected handles with text") +[![ResliceCursorWidget Example][ResliceCursorWidget]](./ResliceCursorWidget.html "Axial Coronal and Sagittal MPR/Oblique/Reformatted/Resliced/Slab/MIP views") +[![ShapeWidget Example][ShapeWidget]](./ShapeWidget.html "2D shape widgets with text information") +[![SphereWidget Example][SphereWidget]](./SphereWidget.html "2D sphere widget controlled with radius") +[![SplineWidget Example][SplineWidget]](./PaintWidget.html "Widget to draw open or closed (triangularized) sharp/smooth polygon widget") + +
+ +[AngleWidget]: ../docs/gallery/AngleWidget.png +[ImageCroppingWidget]: ../docs/gallery/ImageCroppingWidget.jpg +[ImplicitPlaneWidget]: ../docs/gallery/ImplicitPlaneWidget.png +[InteractiveOrientationWidget]: ../docs/gallery/InteractiveOrientationWidget.png +[LabelWidget]: ../docs/gallery/LabelWidget.png +[LineWidget]: ../docs/gallery/LineWidget.png +[PaintWidget]: ../docs/gallery/PaintWidget.gif +[PolyLineWidget]: ../docs/gallery/PolyLineWidget.png +[ResliceCursorWidget]: ../docs/gallery/ResliceCursorWidget.gif +[ShapeWidget]: ../docs/gallery/ShapeWidget.png +[SphereWidget]: ../docs/gallery/SphereWidget.jpg +[SplineWidget]: ../docs/gallery/SplineWidget.gif +[Box]: ../docs/gallery/Box.jpg + +# Connectivity + +
+ +[![AR Example][ARWithLogo]](./AR.html "AR with WebXR") +[![VR Example][VRWithLogo]](./VR.html "VR with WebXR") +[![LookingGlass Example][LookingGlassWithLogo]](./LookingGlass.html "Render scene into a LookingGlass device") +[![ItkWasmVolume Example][ItkWasmVolumeWithLogo]](./ItkWasmVolume.html "ItkWasmVolume") +[![RemoteView Example][RemoteViewWithLogos]](./RemoteView.html "Connect a VTK or ParaView Python backend server via WebSockets") +[![ImageStream Example][ImageStreamWithLogos]](./ImageStream.html "Stream a ParaView Python backend server via WebSockets under a VTK.js rendering") + +
+ +[ARWithLogo]: ../docs/gallery/ArConeWithLogo.jpg +[VRWithLogo]: ../docs/gallery/VrConeWithLogo.jpg +[LookingGlassWithLogo]: ../docs/gallery/LookingGlassConeWithLogo.jpg +[ItkWasmVolumeWithLogo]: ../docs/gallery/ItkWasmVolumeWithLogo.jpg +[RemoteViewWithLogos]: ../docs/gallery/RemoteViewWithLogos.jpg +[ImageStreamWithLogos]: ../docs/gallery/ImageStreamWithLogos.jpg diff --git a/Sources/IO/Geometry/GLTFImporter/Animations.js b/Sources/IO/Geometry/GLTFImporter/Animations.js new file mode 100644 index 00000000000..8c044a9db63 --- /dev/null +++ b/Sources/IO/Geometry/GLTFImporter/Animations.js @@ -0,0 +1,256 @@ +import macro from 'vtk.js/Sources/macros'; +import * as vtkMath from 'vtk.js/Sources/Common/Core/Math'; +import { quat, vec3 } from 'gl-matrix'; + +const { vtkDebugMacro, vtkWarningMacro } = macro; + +/** + * Create an animation channel + * @param {glTFChannel} glTFChannel + * @param {glTFChannel[]} glTFSamplers + * @returns + */ +function createAnimationChannel(glTFChannel, glTFSamplers) { + const path = glTFChannel.target.path; + const node = glTFChannel.target.node; + + function applyAnimation(value) { + let axisAngle; + let w; + let nq; + switch (path) { + case 'translation': + node.setPosition(value[0], value[1], value[2]); + break; + case 'rotation': + // Convert quaternion to axis-angle representation + nq = quat.normalize(quat.create(), value); + axisAngle = new Float64Array(3); + w = quat.getAxisAngle(axisAngle, nq); + // Apply rotation using rotateWXYZ + node.rotateWXYZ( + vtkMath.degreesFromRadians(w), + axisAngle[0], + axisAngle[1], + axisAngle[2] + ); + break; + case 'scale': + node.setScale(value[0], value[1], value[2]); + break; + default: + vtkWarningMacro(`Unsupported animation path: ${path}`); + } + } + + function animate(currentTime) { + const sampler = glTFSamplers[glTFChannel.sampler]; + const value = sampler.evaluate(currentTime, path); + applyAnimation(value); + } + + return { ...glTFChannel, animate }; +} + +/** + * Create an animation sampler + * @param {glTFSampler} glTFSampler + * @returns + */ +function createAnimationSampler(glTFSampler) { + let lastKeyframeIndex = 0; + + function findKeyframes(time) { + let i1 = lastKeyframeIndex; + while (i1 < glTFSampler.input.length - 1 && glTFSampler.input[i1] <= time) { + i1++; + } + const i0 = Math.max(0, i1 - 1); + lastKeyframeIndex = i0; + return [glTFSampler.input[i0], glTFSampler.input[i1], i0, i1]; + } + + function stepInterpolate(path, i0) { + const startIndex = i0 * 3; + const v0 = new Array(3); + for (let i = 0; i < 3; ++i) { + v0[i] = glTFSampler.output[startIndex + i]; + } + + return v0; + } + + function linearInterpolate(path, t0, t1, i0, i1, t) { + const ratio = (t - t0) / (t1 - t0); + const startIndex = i0 * 4; + const endIndex = i1 * 4; + + const v0 = new Array(4); + const v1 = new Array(4); + for (let i = 0; i < 4; ++i) { + v0[i] = glTFSampler.output[startIndex + i]; + v1[i] = glTFSampler.output[endIndex + i]; + } + + switch (path) { + case 'translation': + case 'scale': + return vec3.lerp(vec3.create(), v0, v1, ratio); + case 'rotation': + return quat.slerp(quat.create(), v0, v1, ratio); + default: + vtkWarningMacro(`Unsupported animation path: ${path}`); + return null; + } + } + + function cubicSplineInterpolate(path, t0, t1, i0, i1, time) { + const dt = t1 - t0; + const t = (time - t0) / dt; + const t2 = t * t; + const t3 = t2 * t; + + const p0 = glTFSampler.output[i0 * 3 + 1]; + const m0 = dt * glTFSampler.output[i0 * 3 + 2]; + const p1 = glTFSampler.output[i1 * 3 + 1]; + const m1 = dt * glTFSampler.output[i1 * 3]; + + if (Array.isArray(p0)) { + return p0.map((v, j) => { + const a = 2 * t3 - 3 * t2 + 1; + const b = t3 - 2 * t2 + t; + const c = -2 * t3 + 3 * t2; + const d = t3 - t2; + return a * v + b * m0[j] + c * p1[j] + d * m1[j]; + }); + } + + const a = 2 * t3 - 3 * t2 + 1; + const b = t3 - 2 * t2 + t; + const c = -2 * t3 + 3 * t2; + const d = t3 - t2; + return a * p0 + b * m0 + c * p1 + d * m1; + } + + function evaluate(time, path) { + const [t0, t1, i0, i1] = findKeyframes(time); + + let result; + + switch (glTFSampler.interpolation) { + case 'STEP': + result = stepInterpolate(path, i0); + break; + case 'LINEAR': + result = linearInterpolate(path, t0, t1, i0, i1, time); + break; + case 'CUBICSPLINE': + result = cubicSplineInterpolate(path, t0, t1, i0, i1, time); + break; + default: + throw new Error( + `Unknown interpolation method: ${glTFSampler.interpolation}` + ); + } + return result; + } + + return { ...glTFSampler, evaluate }; +} + +/** + * Create an animation + * @param {glTFAnimation} glTFAnimation + * @param {Map} nodes + * @returns + */ +function createAnimation(glTFAnimation, nodes) { + glTFAnimation.samplers = glTFAnimation.samplers.map((sampler) => + createAnimationSampler(sampler) + ); + + glTFAnimation.channels = glTFAnimation.channels.map((channel) => { + channel.target.node = nodes.get(`node-${channel.target.node}`); + return createAnimationChannel(channel, glTFAnimation.samplers); + }); + + function update(currentTime) { + glTFAnimation.channels.forEach((channel) => channel.animate(currentTime)); + } + + return { ...glTFAnimation, update }; +} + +/** + * Create an animation mixer + * @param {Map} nodes + * @param {*} accessors + * @returns + */ +function createAnimationMixer(nodes, accessors) { + const animations = new Map(); + const activeAnimations = new Map(); + + function addAnimation(glTFAnimation) { + const annimation = createAnimation(glTFAnimation, nodes, accessors); + animations.set(glTFAnimation.id, annimation); + vtkDebugMacro(`Animation "${glTFAnimation.id}" added to mixer`); + } + + function play(name, weight = 1) { + if (!animations.has(name)) { + vtkWarningMacro(`Animation "${name}" not found in mixer`); + return; + } + activeAnimations.set(name, { + animation: animations.get(name), + weight, + time: 0, + }); + vtkDebugMacro(`Playing animation "${name}" with weight ${weight}`); + } + + function stop(name) { + if (activeAnimations.delete(name)) { + vtkWarningMacro(`Stopped animation "${name}"`); + } else { + vtkWarningMacro(`Animation "${name}" was not playing`); + } + } + + function stopAll() { + activeAnimations.clear(); + vtkWarningMacro('Stopped all animations'); + } + + function update(deltaTime) { + // Normalize weights + const totalWeight = Array.from(activeAnimations.values()).reduce( + (sum, { weight }) => sum + weight, + 0 + ); + + activeAnimations.forEach(({ animation, weight, time }, name) => { + const normalizedWeight = totalWeight > 0 ? weight / totalWeight : 0; + const newTime = time + deltaTime; + activeAnimations.set(name, { animation, weight, time: newTime }); + + vtkDebugMacro( + `Updating animation "${name}" at time ${newTime.toFixed( + 3 + )} with normalized weight ${normalizedWeight.toFixed(3)}` + ); + + animation.update(newTime, normalizedWeight); + }); + } + + return { addAnimation, play, stop, stopAll, update }; +} + +export { + createAnimation, + createAnimationChannel, + createAnimationMixer, + createAnimationSampler, +}; diff --git a/Sources/IO/Geometry/GLTFImporter/Constants.js b/Sources/IO/Geometry/GLTFImporter/Constants.js new file mode 100644 index 00000000000..e86353e40f2 --- /dev/null +++ b/Sources/IO/Geometry/GLTFImporter/Constants.js @@ -0,0 +1,85 @@ +export const BINARY_HEADER_MAGIC = 'glTF'; +export const BINARY_HEADER_LENGTH = 12; +export const BINARY_CHUNK_TYPES = { JSON: 0x4e4f534a, BIN: 0x004e4942 }; +export const BINARY_HEADER_INTS = 3; +export const BINARY_CHUNK_HEADER_INTS = 2; + +export const MIN_LIGHT_ATTENUATION = 0.01; + +export const COMPONENTS = { + SCALAR: 1, + VEC2: 2, + VEC3: 3, + VEC4: 4, + MAT2: 4, + MAT3: 9, + MAT4: 16, +}; + +export const BYTES = { + 5120: 1, // BYTE + 5121: 1, // UNSIGNED_BYTE + 5122: 2, // SHORT + 5123: 2, // UNSIGNED_SHORT + 5125: 4, // UNSIGNED_INT + 5126: 4, // FLOAT +}; + +export const MODES = { + GL_POINTS: 0, + GL_LINES: 1, + GL_LINE_LOOP: 2, + GL_LINE_STRIP: 3, + GL_TRIANGLES: 4, + GL_TRIANGLE_STRIP: 5, + GL_TRIANGLE_FAN: 6, +}; + +export const ARRAY_TYPES = { + 5120: Int8Array, + 5121: Uint8Array, + 5122: Int16Array, + 5123: Uint16Array, + 5125: Uint32Array, + 5126: Float32Array, +}; + +export const GL_SAMPLER = { + NEAREST: 9728, + LINEAR: 9729, + NEAREST_MIPMAP_NEAREST: 9984, + LINEAR_MIPMAP_NEAREST: 9985, + NEAREST_MIPMAP_LINEAR: 9986, + LINEAR_MIPMAP_LINEAR: 9987, + REPEAT: 10497, + CLAMP_TO_EDGE: 33071, + MIRRORED_REPEAT: 33648, + TEXTURE_MAG_FILTER: 10240, + TEXTURE_MIN_FILTER: 10241, + TEXTURE_WRAP_S: 10242, + TEXTURE_WRAP_T: 10243, +}; + +export const DEFAULT_SAMPLER = { + magFilter: GL_SAMPLER.NEAREST, + minFilter: GL_SAMPLER.LINEAR_MIPMAP_LINEAR, + wrapS: GL_SAMPLER.REPEAT, + wrapT: GL_SAMPLER.REPEAT, +}; + +export const SEMANTIC_ATTRIBUTE_MAP = { + NORMAL: 'normal', + POSITION: 'position', + TEXCOORD_0: 'texcoord0', + TEXCOORD_1: 'texcoord1', + WEIGHTS_0: 'weight', + JOINTS_0: 'joint', + COLOR_0: 'color', + TANGENT: 'tangent', +}; + +export const ALPHA_MODE = { + OPAQUE: 'OPAQUE', + MASK: 'MASK', + BLEND: 'BLEND', +}; diff --git a/Sources/IO/Geometry/GLTFImporter/Decoder.js b/Sources/IO/Geometry/GLTFImporter/Decoder.js new file mode 100644 index 00000000000..7a4011f1899 --- /dev/null +++ b/Sources/IO/Geometry/GLTFImporter/Decoder.js @@ -0,0 +1,78 @@ +import BinaryHelper from 'vtk.js/Sources/IO/Core/BinaryHelper'; +import { + BINARY_CHUNK_TYPES, + BINARY_CHUNK_HEADER_INTS, + BINARY_HEADER_INTS, + BINARY_HEADER_LENGTH, + BINARY_HEADER_MAGIC, +} from 'vtk.js/Sources/IO/Geometry/GLTFImporter/Constants'; + +function getChunkInfo(headerStart, data) { + const header = new Uint32Array(data, headerStart, BINARY_CHUNK_HEADER_INTS); + const chunkStart = headerStart + BINARY_CHUNK_HEADER_INTS * 4; + const chunkLength = header[0]; + const chunkType = header[1]; + return { start: chunkStart, length: chunkLength, type: chunkType }; +} + +function getAllChunkInfos(data) { + const infos = []; + let chunkStart = BINARY_HEADER_INTS * 4; + while (chunkStart < data.byteLength) { + const chunkInfo = getChunkInfo(chunkStart, data); + infos.push(chunkInfo); + chunkStart += chunkInfo.length + BINARY_CHUNK_HEADER_INTS * 4; + } + return infos; +} + +function getJsonFromChunk(chunkInfo, data) { + const chunkLength = chunkInfo.length; + const jsonStart = (BINARY_HEADER_INTS + BINARY_CHUNK_HEADER_INTS) * 4; + const jsonSlice = new Uint8Array(data, jsonStart, chunkLength); + const stringBuffer = BinaryHelper.arrayBufferToString(jsonSlice); + return JSON.parse(stringBuffer); +} + +function getBufferFromChunk(chunkInfo, data) { + return data.slice(chunkInfo.start, chunkInfo.start + chunkInfo.length); +} + +function parseGLB(data) { + let json; + const buffers = []; + + const headerView = new DataView(data, 0, BINARY_HEADER_LENGTH); + + const header = { + magic: BinaryHelper.arrayBufferToString(new Uint8Array(data, 0, 4)), + version: headerView.getUint32(4, true), + length: headerView.getUint32(8, true), + }; + + if (header.magic !== BINARY_HEADER_MAGIC) { + throw new Error('Unsupported glTF-Binary header.'); + } else if (header.version < 2.0) { + throw new Error('Unsupported legacy binary file detected.'); + } + + const chunkInfos = getAllChunkInfos(data); + + chunkInfos.forEach((chunkInfo) => { + if (chunkInfo.type === BINARY_CHUNK_TYPES.JSON && !json) { + json = getJsonFromChunk(chunkInfo, data); + } else if (chunkInfo.type === BINARY_CHUNK_TYPES.BIN) { + buffers.push(getBufferFromChunk(chunkInfo, data)); + } + }); + + if (!json) { + throw new Error('glTF-Binary: JSON content not found.'); + } + if (!buffers) { + throw new Error('glTF-Binary: Binary chunk not found.'); + } + return { json, buffers }; +} + +export default parseGLB; diff --git a/Sources/IO/Geometry/GLTFImporter/Extensions.js b/Sources/IO/Geometry/GLTFImporter/Extensions.js new file mode 100644 index 00000000000..3075fcc8187 --- /dev/null +++ b/Sources/IO/Geometry/GLTFImporter/Extensions.js @@ -0,0 +1,103 @@ +import macro from 'vtk.js/Sources/macros'; +import * as vtkMath from 'vtk.js/Sources/Common/Core/Math'; +import vtkDracoReader from 'vtk.js/Sources/IO/Geometry/DracoReader'; +import vtkLight from 'vtk.js/Sources/Rendering/Core/Light'; + +import { MIN_LIGHT_ATTENUATION } from 'vtk.js/Sources/IO/Geometry/GLTFImporter/Constants'; + +const { vtkWarningMacro } = macro; + +/** + * Handles the KHR_materials_unlit extension. + * + * @param {object} extension - The KHR_materials_unlit extension object. + * @param {vtkProperty} property - The vtkProperty instance to update. + */ +export function handleKHRMaterialsUnlit(extension, property) { + property.setLighting(true); +} + +/** + * Handles the KHR_materials_ior extension. + * + * @param {object} extension - The KHR_materials_unlit extension object. + * @param {vtkProperty} property - The vtkProperty instance to update. + */ +export function handleKHRMaterialsIor(extension, property) { + property.setBaseIOR(extension.ior); +} + +/** + * Handles the KHR_materials_specular extension. + * @param {object} extension - The KHR_materials_specular extension object. + * @param {vtkProperty} property - The vtkProperty instance to update. + */ +export function handleKHRMaterialsSpecular(extension, property) { + property.setSpecular(extension.specularFactor); + property.setSpecularColor(extension.specularColorFactor); +} + +/** + * Handles the KHR_lights_punctual extension. + * + * @param {object} extension - The KHR_lights_punctual extension object. + * @param {vtkRenderer} renderer - The vtkRenderer instance to add the light to. + */ +export function handleKHRLightsPunctual(extension, transformMatrix, model) { + const { light } = extension; + + const { color, intensity, range, spot, type } = light; + + const l = vtkLight.newInstance({ + color: color || [1, 1, 1], + intensity: intensity || 1.0, + }); + + // Apply the global transform to the light + l.setTransformMatrix(transformMatrix); + + // Handle range + if (range > 0) { + // Set quadratic values to get attenuation(range) ~= MIN_LIGHT_ATTENUATION + l.setAttenuationValues(1, 0, 1.0 / (range * range * MIN_LIGHT_ATTENUATION)); + } + + switch (type) { + case 'directional': + l.setPositional(false); + break; + case 'point': + l.setPositional(true); + l.setConeAngle(90); + break; + case 'spot': + l.setPositional(true); + l.setConeAngle(vtkMath.radiansFromDegrees(spot.outerConeAngle)); + break; + default: + vtkWarningMacro(`Unsupported light type: ${type}`); + } + + model.lights.set(light.name, l); +} + +/** + * Handles the KHR_draco_mesh_compression extension. + * + * @param {object} extension - The KHR_draco_mesh_compression extension object. + */ +export async function handleKHRDracoMeshCompression(extension) { + const reader = vtkDracoReader.newInstance(); + reader.parse(extension.bufferView); + return reader.getOutputData(); +} + +/** + * Handles the KHR_materials_variants extension. + * + * @param {object} extension - The KHR_materials_variants extension object. + * @param {object} model - The model object to update with variant information. + */ +export function handleKHRMaterialsVariants(extension, model) { + model.variants = extension.variants.map((v) => v.name); +} diff --git a/Sources/IO/Geometry/GLTFImporter/ORMTexture.worker.js b/Sources/IO/Geometry/GLTFImporter/ORMTexture.worker.js new file mode 100644 index 00000000000..7c48f871149 --- /dev/null +++ b/Sources/IO/Geometry/GLTFImporter/ORMTexture.worker.js @@ -0,0 +1,35 @@ +import registerWebworker from 'webworker-promise/lib/register'; + +/** + * + * @param {ArrayBuffer} imageBuffer + * @param {string} mimeType + * @param {string} channel + * @returns {Promise} + */ +registerWebworker(async ({ imageBuffer, mimeType, channel }) => { + const channelsMap = { + r: 0, + g: 1, + b: 2, + }; + + const blob = new Blob([imageBuffer], { type: mimeType }); + const img = await createImageBitmap(blob); + const canvas = new OffscreenCanvas(img.width, img.height); + const ctx = canvas.getContext('2d'); + + ctx.drawImage(img, 0, 0, img.width, img.height); + const bitmap = ctx.getImageData(0, 0, img.width, img.height); + + if (channel) { + const idx = channelsMap[channel]; + for (let i = 0; i < bitmap.data.length; i += 4) { + const channelValue = bitmap.data[i + idx]; + bitmap.data[i] = channelValue; // red channel + bitmap.data[i + 1] = channelValue; // green channel + bitmap.data[i + 2] = channelValue; // blue channel + } + } + return { bitmap }; +}); diff --git a/Sources/IO/Geometry/GLTFImporter/Parser.js b/Sources/IO/Geometry/GLTFImporter/Parser.js new file mode 100644 index 00000000000..3aa87b00702 --- /dev/null +++ b/Sources/IO/Geometry/GLTFImporter/Parser.js @@ -0,0 +1,505 @@ +/* eslint-disable guard-for-in */ +/* eslint-disable no-restricted-syntax */ +/* eslint-disable class-methods-use-this */ +import macro from 'vtk.js/Sources/macros'; + +import { + ALPHA_MODE, + BYTES, + COMPONENTS, + DEFAULT_SAMPLER, + GL_SAMPLER, + MODES, + SEMANTIC_ATTRIBUTE_MAP, +} from 'vtk.js/Sources/IO/Geometry/GLTFImporter/Constants'; + +import { + getAccessorArrayTypeAndLength, + getGLEnumFromSamplerParameter, + resolveUrl, +} from 'vtk.js/Sources/IO/Geometry/GLTFImporter/Utils'; + +const { vtkDebugMacro, vtkWarningMacro } = macro; + +class GLTFParser { + constructor(glTF, options = {}) { + const { json, baseUri = '' } = glTF; + + this.glTF = glTF; + this.options = options; + this.baseUri = baseUri; + this.json = json; + this.extensions = json.extensions || {}; + this.extensionsUsed = json.extensionsUsed || []; + } + + async parse() { + const buffers = this.json.buffers || []; + this.buffers = new Array(buffers.length).fill(null); + + const images = this.json.images || []; + this.images = new Array(images.length).fill({}); + await this.loadBuffers(); + await this.loadImages(); + this.resolveTree(); + + return this.glTF.json; + } + + resolveTree() { + this.json.scenes = this.json.scenes?.map((scene, idx) => + this.resolveScene(scene, idx) + ); + + this.json.cameras = this.json.cameras?.map((camera, idx) => + this.resolveCamera(camera, idx) + ); + + this.json.bufferViews = this.json.bufferViews?.map((bufView, idx) => + this.resolveBufferView(bufView, idx) + ); + + this.json.images = this.json.images?.map((image, idx) => + this.resolveImage(image, idx) + ); + + this.json.samplers = this.json.samplers?.map((sampler, idx) => + this.resolveSampler(sampler, idx) + ); + + this.json.textures = this.json.textures?.map((texture, idx) => + this.resolveTexture(texture, idx) + ); + + this.json.accessors = this.json.accessors?.map((accessor, idx) => + this.resolveAccessor(accessor, idx) + ); + + this.json.materials = this.json.materials?.map((material, idx) => + this.resolveMaterial(material, idx) + ); + + this.json.meshes = this.json.meshes?.map((mesh, idx) => + this.resolveMesh(mesh, idx) + ); + + this.json.nodes = this.json.nodes?.map((node, idx) => + this.resolveNode(node, idx) + ); + + this.json.skins = this.json.skins?.map((skin, idx) => + this.resolveSkin(skin, idx) + ); + + this.json.animations = this.json.animations?.map((animation, idx) => + this.resolveAnimation(animation, idx) + ); + } + + get(array, index) { + // check if already resolved + if (typeof index === 'object') { + return index; + } + const object = this.json[array] && this.json[array][index]; + if (!object) { + vtkWarningMacro(`glTF file error: Could not find ${array}[${index}]`); + } + return object; + } + + resolveScene(scene, index) { + scene.id = scene.id || `scene-${index}`; + scene.nodes = (scene.nodes || []).map((node) => this.get('nodes', node)); + return scene; + } + + resolveNode(node, index) { + node.id = node.id || `node-${index}`; + if (node.children) { + node.children = node.children.map((child) => this.get('nodes', child)); + } + if (node.mesh !== undefined) { + node.mesh = this.get('meshes', node.mesh); + } else if (node.meshes !== undefined && node.meshes.length) { + node.mesh = node.meshes.reduce( + (accum, meshIndex) => { + const mesh = this.get('meshes', meshIndex); + accum.id = mesh.id; + accum.primitives = accum.primitives.concat(mesh.primitives); + return accum; + }, + { primitives: [] } + ); + } + if (node.camera !== undefined) { + node.camera = this.get('cameras', node.camera); + } + if (node.skin !== undefined) { + node.skin = this.get('skins', node.skin); + } + + // Fill punctual lights objects + if (node.extensions?.KHR_lights_punctual) { + node.extensions.KHR_lights_punctual.light = + this.extensions?.KHR_lights_punctual.lights[ + node.extensions.KHR_lights_punctual.light + ]; + } + return node; + } + + resolveSkin(skin, index) { + skin.id = skin.id || `skin-${index}`; + skin.inverseBindMatrices = this.get('accessors', skin.inverseBindMatrices); + return skin; + } + + resolveMesh(mesh, index) { + mesh.id = mesh.id || `mesh-${index}`; + if (mesh.primitives) { + mesh.primitives = mesh.primitives.map((primitive, idx) => { + const attributes = primitive.attributes; + primitive.name = `submesh-${idx}`; + primitive.attributes = {}; + for (const attribute in attributes) { + const attr = SEMANTIC_ATTRIBUTE_MAP[attribute]; + primitive.attributes[attr] = this.get( + 'accessors', + attributes[attribute] + ); + } + if (primitive.indices !== undefined) { + primitive.indices = this.get('accessors', primitive.indices); + } + if (primitive.material !== undefined) { + primitive.material = this.get('materials', primitive.material); + } + if (primitive.mode === undefined) { + primitive.mode = MODES.GL_TRIANGLES; // Default one + } + + if (primitive.extensions?.KHR_draco_mesh_compression) { + vtkDebugMacro('Using Draco mesh compression'); + const bufferView = this.get( + 'bufferViews', + primitive.extensions.KHR_draco_mesh_compression.bufferView + ); + primitive.extensions.KHR_draco_mesh_compression.bufferView = + bufferView.data; + } + + return primitive; + }); + } + return mesh; + } + + resolveMaterial(material, index) { + material.id = material.id || `material-${index}`; + + if (material.alphaMode === undefined) + material.alphaMode = ALPHA_MODE.OPAQUE; + if (material.doubleSided === undefined) material.doubleSided = false; + if (material.alphaCutoff === undefined) material.alphaCutoff = 0.5; + + if (material.normalTexture) { + material.normalTexture = { ...material.normalTexture }; + material.normalTexture.texture = this.get( + 'textures', + material.normalTexture.index + ); + } + if (material.occlusionTexture) { + material.occlusionTexture = { ...material.occlusionTexture }; + material.occlusionTexture.texture = this.get( + 'textures', + material.occlusionTexture.index + ); + } + if (material.emissiveTexture) { + material.emissiveTexture = { ...material.emissiveTexture }; + material.emissiveTexture.texture = this.get( + 'textures', + material.emissiveTexture.index + ); + } + if (!material.emissiveFactor) { + material.emissiveFactor = material.emissiveTexture ? 1 : 0; + } else material.emissiveFactor = material.emissiveFactor[0]; + + if (material.pbrMetallicRoughness) { + material.pbrMetallicRoughness = { ...material.pbrMetallicRoughness }; + const mr = material.pbrMetallicRoughness; + if (mr.baseColorTexture) { + mr.baseColorTexture = { ...mr.baseColorTexture }; + mr.baseColorTexture.texture = this.get( + 'textures', + mr.baseColorTexture.index + ); + } + if (mr.metallicRoughnessTexture) { + mr.metallicRoughnessTexture = { ...mr.metallicRoughnessTexture }; + mr.metallicRoughnessTexture.texture = this.get( + 'textures', + mr.metallicRoughnessTexture.index + ); + } + } else { + material.pbrMetallicRoughness = { + baseColorFactor: [1, 1, 1, 1], + metallicFactor: 1.0, + roughnessFactor: 1.0, + }; + } + return material; + } + + /** + * Take values of particular accessor from interleaved buffer various parts of + * the buffer + */ + getValueFromInterleavedBuffer( + buffer, + byteOffset, + byteStride, + bytesPerElement, + count + ) { + const result = new Uint8Array(count * bytesPerElement); + for (let i = 0; i < count; i++) { + const elementOffset = byteOffset + i * byteStride; + result.set( + new Uint8Array( + buffer.arrayBuffer.slice( + elementOffset, + elementOffset + bytesPerElement + ) + ), + i * bytesPerElement + ); + } + return result.buffer; + } + + resolveAccessor(accessor, index) { + accessor.id = accessor.id || `accessor-${index}`; + if (accessor.bufferView !== undefined) { + // Draco encoded meshes don't have bufferView + accessor.bufferView = this.get('bufferViews', accessor.bufferView); + } + + // Look up enums + accessor.bytesPerComponent = BYTES[accessor.componentType]; + accessor.components = COMPONENTS[accessor.type]; + accessor.bytesPerElement = accessor.bytesPerComponent * accessor.components; + + // Create TypedArray for the accessor + // Note: The canonical way to instantiate is to ignore this array and create + // WebGLBuffer's using the bufferViews. + if (accessor.bufferView) { + const buffer = accessor.bufferView.buffer; + const { ArrayType, byteLength } = getAccessorArrayTypeAndLength( + accessor, + accessor.bufferView + ); + const byteOffset = + (accessor.bufferView.byteOffset || 0) + + (accessor.byteOffset || 0) + + buffer.byteOffset; + + let slicedBufffer = buffer.arrayBuffer.slice( + byteOffset, + byteOffset + byteLength + ); + + if (accessor.bufferView.byteStride) { + slicedBufffer = this.getValueFromInterleavedBuffer( + buffer, + byteOffset, + accessor.bufferView.byteStride, + accessor.bytesPerElement, + accessor.count + ); + } + accessor.value = new ArrayType(slicedBufffer); + } + + return accessor; + } + + resolveTexture(texture, index) { + texture.id = texture.id || `texture-${index}`; + texture.sampler = + 'sampler' in texture + ? this.get('samplers', texture.sampler) + : DEFAULT_SAMPLER; + + texture.source = this.get('images', texture.source); + + // Handle texture extensions sources + if (texture.extensions !== undefined) { + const extensionsNames = Object.keys(texture.extensions); + extensionsNames.forEach((extensionName) => { + const extension = texture.extensions[extensionName]; + switch (extensionName) { + case 'KHR_texture_basisu': + case 'EXT_texture_webp': + case 'EXT_texture_avif': + texture.source = this.get('images', extension.source); + break; + default: + vtkWarningMacro(`Unhandled extension: ${extensionName}`); + } + }); + } + return texture; + } + + resolveSampler(sampler, index) { + sampler.id = sampler.id || `sampler-${index}`; + + if (!Object.hasOwn(sampler, 'wrapS')) sampler.wrapS = GL_SAMPLER.REPEAT; + if (!Object.hasOwn(sampler, 'wrapT')) sampler.wrapT = GL_SAMPLER.REPEAT; + + if (!Object.hasOwn(sampler, 'minFilter')) + sampler.minFilter = GL_SAMPLER.LINEAR_MIPMAP_LINEAR; + if (!Object.hasOwn(sampler, 'magFilter')) + sampler.magFilter = GL_SAMPLER.NEAREST; + + // Map textual parameters to GL parameter values + sampler.parameters = {}; + for (const key in sampler) { + const glEnum = getGLEnumFromSamplerParameter(key); + if (glEnum !== undefined) { + sampler.parameters[glEnum] = sampler[key]; + } + } + return sampler; + } + + resolveImage(image, index) { + image.id = image.id || `image-${index}`; + if (image.bufferView !== undefined) { + image.bufferView = this.get('bufferViews', image.bufferView); + } + return image; + } + + resolveBufferView(bufferView, index) { + bufferView.id = bufferView.id || `bufferView-${index}`; + const bufferIndex = bufferView.buffer; + bufferView.buffer = this.buffers[bufferIndex]; + + const arrayBuffer = this.buffers[bufferIndex].arrayBuffer; + let byteOffset = this.buffers[bufferIndex].byteOffset || 0; + + if ('byteOffset' in bufferView) { + byteOffset += bufferView.byteOffset; + } + + bufferView.data = new Uint8Array( + arrayBuffer, + byteOffset, + bufferView.byteLength + ); + return bufferView; + } + + resolveCamera(camera, index) { + camera.id = camera.id || `camera-${index}`; + return camera; + } + + resolveAnimation(animation, index) { + animation.id = animation.id || `animation-${index}`; + animation.samplers.map((sampler) => { + sampler.input = this.get('accessors', sampler.input).value; + sampler.output = this.get('accessors', sampler.output).value; + return sampler; + }); + return animation; + } + + loadBuffers() { + const promises = this.json.buffers.map((buffer, idx) => + this.loadBuffer(buffer, idx).then(() => { + delete buffer.uri; + }) + ); + return Promise.all(promises); + } + + async loadBuffer(buffer, index) { + let arrayBuffer = buffer; + + if (buffer.uri) { + vtkDebugMacro('Loading uri', buffer.uri); + const uri = resolveUrl(buffer.uri, this.options.baseUri); + const response = await fetch(uri); + arrayBuffer = await response.arrayBuffer(); + } else if (this.glTF.glbBuffers) { + arrayBuffer = this.glTF.glbBuffers[index]; + } + + this.buffers[index] = { + arrayBuffer, + byteOffset: 0, + byteLength: arrayBuffer.byteLength, + }; + } + + loadImages() { + const images = this.json.images || []; + const promises = []; + + return new Promise((resolve, reject) => { + for (let i = 0; i < images.length; ++i) { + promises.push( + Promise.resolve( + this.loadImage(images[i], i).then(() => { + vtkDebugMacro('Texture loaded ', images[i]); + }) + ) + ); + } + + Promise.all(promises).then(() => resolve(this.images)); + }); + } + + async loadImage(image, index) { + let arrayBuffer; + let buffer; + + if (image.uri) { + vtkDebugMacro('Loading texture', image.uri); + const uri = resolveUrl(image.uri, this.options.baseUri); + const response = await fetch(uri); + + arrayBuffer = await response.arrayBuffer(); + image.uri = uri; + image.bufferView = { + data: arrayBuffer, + }; + } else if (image.bufferView) { + const bufferView = this.get('bufferViews', image.bufferView); + buffer = this.get('buffers', bufferView.buffer); + + // GLB buffer + if (this.glTF.glbBuffers) { + buffer = this.glTF.glbBuffers[bufferView.buffer]; + arrayBuffer = buffer.slice( + bufferView.byteOffset, + bufferView.byteOffset + bufferView.byteLength + ); + } + + image.bufferView = { + data: arrayBuffer, + }; + } + } +} + +export default GLTFParser; diff --git a/Sources/IO/Geometry/GLTFImporter/Reader.js b/Sources/IO/Geometry/GLTFImporter/Reader.js new file mode 100644 index 00000000000..bcea47de781 --- /dev/null +++ b/Sources/IO/Geometry/GLTFImporter/Reader.js @@ -0,0 +1,613 @@ +import macro from 'vtk.js/Sources/macros'; +import * as vtkMath from 'vtk.js/Sources/Common/Core/Math'; + +import vtkActor from 'vtk.js/Sources/Rendering/Core/Actor'; +import vtkCamera from 'vtk.js/Sources/Rendering/Core/Camera'; +import vtkDataArray from 'vtk.js/Sources/Common/Core/DataArray'; +import vtkPolyData from 'vtk.js/Sources/Common/DataModel/PolyData'; +import vtkMapper from 'vtk.js/Sources/Rendering/Core/Mapper'; +import vtkCellArray from 'vtk.js/Sources/Common/Core/CellArray'; +import vtkTransform from 'vtk.js/Sources/Common/Transform/Transform'; +import GLTFParser from 'vtk.js/Sources/IO/Geometry/GLTFImporter/Parser'; +import { + ALPHA_MODE, + MODES, + SEMANTIC_ATTRIBUTE_MAP, +} from 'vtk.js/Sources/IO/Geometry/GLTFImporter/Constants'; +import { + createVTKTextureFromGLTFTexture, + loadImage, +} from 'vtk.js/Sources/IO/Geometry/GLTFImporter/Utils'; +import { + handleKHRDracoMeshCompression, + handleKHRLightsPunctual, + handleKHRMaterialsIor, + handleKHRMaterialsSpecular, + handleKHRMaterialsUnlit, + handleKHRMaterialsVariants, +} from 'vtk.js/Sources/IO/Geometry/GLTFImporter/Extensions'; + +import { mat4, quat, vec3 } from 'gl-matrix'; + +const { vtkWarningMacro, vtkDebugMacro } = macro; + +/** + * Parses a GLTF objects + * @param {Object} gltf - The GLTF object to parse + * @returns {glTF} The parsed GLTF object + */ +async function parseGLTF(gltf, options) { + const parser = new GLTFParser(gltf, options); + const tree = await parser.parse(); + return tree; +} + +/** + * Creates VTK polydata from a GLTF mesh + * @param {GLTFMesh} mesh - The GLTF mesh + * @returns {vtkPolyData} The created VTK polydata + */ +async function createPolyDataFromGLTFMesh(mesh) { + const primitive = mesh.primitives[0]; // For simplicity, we'll just use the first primitive + + if (!primitive || !primitive.attributes) { + vtkWarningMacro('Mesh has no position data, skipping'); + return null; + } + + const mode = primitive.mode; + + if (primitive.extensions?.KHR_draco_mesh_compression) { + return handleKHRDracoMeshCompression( + primitive.extensions.KHR_draco_mesh_compression + ); + } + + const polyData = vtkPolyData.newInstance(); + const cells = vtkCellArray.newInstance(); + const pointData = polyData.getPointData(); + + const attrs = Object.entries(primitive.attributes); + attrs.forEach(async ([attributeName, accessor]) => { + switch (attributeName) { + case SEMANTIC_ATTRIBUTE_MAP.POSITION: { + const position = primitive.attributes.position.value; + polyData + .getPoints() + .setData(position, primitive.attributes.position.component); + break; + } + case SEMANTIC_ATTRIBUTE_MAP.NORMAL: { + const normals = primitive.attributes.normal.value; + pointData.setNormals( + vtkDataArray.newInstance({ + name: 'Normals', + values: normals, + numberOfComponents: primitive.attributes.normal.components, + }) + ); + break; + } + case SEMANTIC_ATTRIBUTE_MAP.COLOR_0: { + const color = primitive.attributes.color.value; + pointData.setScalars( + vtkDataArray.newInstance({ + name: 'Scalars', + values: color, + numberOfComponents: primitive.attributes.color.components, + }) + ); + break; + } + case SEMANTIC_ATTRIBUTE_MAP.TEXCOORD_0: { + const tcoords0 = primitive.attributes.texcoord0.value; + const da = vtkDataArray.newInstance({ + name: 'TEXCOORD_0', + values: tcoords0, + numberOfComponents: primitive.attributes.texcoord0.components, + }); + pointData.addArray(da); + pointData.setActiveTCoords(da.getName()); + break; + } + case SEMANTIC_ATTRIBUTE_MAP.TEXCOORD_1: { + const tcoords = primitive.attributes.texcoord1.value; + const dac = vtkDataArray.newInstance({ + name: 'TEXCOORD_1', + values: tcoords, + numberOfComponents: primitive.attributes.texcoord1.components, + }); + pointData.addArray(dac); + break; + } + case SEMANTIC_ATTRIBUTE_MAP.TANGENT: { + const tangent = primitive.attributes.tangent.value; + const dat = vtkDataArray.newInstance({ + name: 'Tangents', + values: tangent, + numberOfComponents: primitive.attributes.tangent.components, + }); + pointData.addArray(dat); + break; + } + default: + vtkWarningMacro(`Unhandled attribute: ${attributeName}`); + } + }); + + // Handle indices if available + if (primitive.indices !== undefined) { + const indices = primitive.indices.value; + const nCells = indices.length - 2; + switch (mode) { + case MODES.GL_LINE_STRIP: + case MODES.GL_TRIANGLE_STRIP: + case MODES.GL_LINE_LOOP: + vtkWarningMacro('GL_LINE_LOOP not implemented'); + break; + default: + cells.resize((4 * indices.length) / 3); + for (let cellId = 0; cellId < nCells; cellId += 3) { + const cell = indices.slice(cellId, cellId + 3); + cells.insertNextCell(cell); + } + } + } + + switch (mode) { + case MODES.GL_TRIANGLES: + case MODES.GL_TRIANGLE_FAN: + polyData.setPolys(cells); + break; + case MODES.GL_LINES: + case MODES.GL_LINE_STRIP: + case MODES.GL_LINE_LOOP: + polyData.setLines(cells); + break; + case MODES.GL_POINTS: + polyData.setVerts(cells); + break; + case MODES.GL_TRIANGLE_STRIP: + polyData.setStrips(cells); + break; + default: + vtkWarningMacro('Invalid primitive draw mode. Ignoring connectivity.'); + } + + return polyData; +} + +/** + * Creates a VTK property from a GLTF material + * @param {*} model - The vtk model object + * @param {GLTFMaterial} material - The GLTF material + * @param {vtkActor} actor - The VTK actor + */ +async function createPropertyFromGLTFMaterial(model, material, actor) { + let metallicFactor = 1.0; + let roughnessFactor = 1.0; + const emissiveFactor = material.emissiveFactor; + + const property = actor.getProperty(); + const pbr = material.pbrMetallicRoughness; + + if (pbr !== undefined) { + if ( + !pbr?.metallicFactor || + pbr?.metallicFactor <= 0 || + pbr?.metallicFactor >= 1 + ) { + vtkWarningMacro( + 'Invalid material.pbrMetallicRoughness.metallicFactor value. Using default value instead.' + ); + } else metallicFactor = pbr.metallicFactor; + if ( + !pbr?.roughnessFactor || + pbr?.roughnessFactor <= 0 || + pbr?.roughnessFactor >= 1 + ) { + vtkWarningMacro( + 'Invalid material.pbrMetallicRoughness.roughnessFactor value. Using default value instead.' + ); + } else roughnessFactor = pbr.roughnessFactor; + + const color = pbr.baseColorFactor; + + if (color !== undefined) { + property.setDiffuseColor(color[0], color[1], color[2]); + property.setOpacity(color[3]); + } + + property.setMetallic(metallicFactor); + property.setRoughness(roughnessFactor); + property.setEmission(emissiveFactor); + + if (pbr.baseColorTexture) { + const extensions = pbr.baseColorTexture.extensions; + const tex = pbr.baseColorTexture.texture; + + if (tex.extensions !== undefined) { + const extensionsNames = Object.keys(tex.extensions); + extensionsNames.forEach((extensionName) => { + // TODO: Handle KHR_texture_basisu extension + // const extension = tex.extensions[extensionName]; + switch (extensionName) { + default: + vtkWarningMacro(`Unhandled extension: ${extensionName}`); + } + }); + } + + const sampler = tex.sampler; + const image = await loadImage(tex.source); + const diffuseTex = createVTKTextureFromGLTFTexture( + image, + sampler, + extensions + ); + + // FIXME: Workaround for textures not showing up in WebGL + const viewAPI = model.renderer.getRenderWindow(); + const isWebGL = viewAPI.getViews()[0].isA('vtkOpenGLRenderWindow'); + if (isWebGL) { + actor.addTexture(diffuseTex); + } else { + property.setDiffuseTexture(diffuseTex); + } + } + + if (pbr.metallicRoughnessTexture) { + const extensions = pbr.metallicRoughnessTexture.extensions; + const tex = pbr.metallicRoughnessTexture.texture; + const sampler = tex.sampler; + const metallicImage = await loadImage(tex.source, 'b'); + const metallicTex = createVTKTextureFromGLTFTexture( + metallicImage, + sampler, + extensions + ); + property.setMetallicTexture(metallicTex); + + const roughnessImage = await loadImage(tex.source, 'g'); + const roughnessTex = createVTKTextureFromGLTFTexture( + roughnessImage, + sampler, + extensions + ); + property.setRoughnessTexture(roughnessTex); + } + + // Handle ambient occlusion texture (occlusionTexture) + if (material.occlusionTexture) { + const extensions = material.occlusionTexture.extensions; + const tex = material.occlusionTexture.texture; + const sampler = tex.sampler; + const aoImage = await loadImage(tex.source, 'r'); + const aoTex = createVTKTextureFromGLTFTexture( + aoImage, + sampler, + extensions + ); + property.setAmbientOcclusionTexture(aoTex); + } + + // Handle emissive texture (emissiveTexture) + if (material.emissiveTexture) { + const extensions = material.emissiveTexture.extensions; + const tex = material.emissiveTexture.texture; + const sampler = tex.sampler; + const emissiveImage = await loadImage(tex.source); + const emissiveTex = createVTKTextureFromGLTFTexture( + emissiveImage, + sampler, + extensions + ); + property.setEmissionTexture(emissiveTex); + + // Handle mutiple Uvs + if (material.emissiveTexture.texCoord !== undefined) { + const pd = actor.getMapper().getInputData().getPointData(); + pd.setActiveTCoords(`TEXCOORD_${material.emissiveTexture.texCoord}`); + } + } + + // Handle normal texture (normalTexture) + if (material.normalTexture) { + const extensions = material.normalTexture.extensions; + const tex = material.normalTexture.texture; + const sampler = tex.sampler; + const normalImage = await loadImage(tex.source); + const normalTex = createVTKTextureFromGLTFTexture( + normalImage, + sampler, + extensions + ); + property.setNormalTexture(normalTex); + + if (material.normalTexture.scale !== undefined) { + property.setNormalStrength(material.normalTexture.scale); + } + } + } + + // Material extensions + if (material.extensions !== undefined) { + const extensionsNames = Object.keys(material.extensions); + extensionsNames.forEach((extensionName) => { + const extension = material.extensions[extensionName]; + switch (extensionName) { + case 'KHR_materials_unlit': + handleKHRMaterialsUnlit(extension, property); + break; + case 'KHR_materials_ior': + handleKHRMaterialsIor(extension, property); + break; + case 'KHR_materials_specular': + handleKHRMaterialsSpecular(extension, property); + break; + default: + vtkWarningMacro(`Unhandled extension: ${extensionName}`); + } + }); + } + + if (material.alphaMode !== ALPHA_MODE.OPAQUE) { + actor.setForceTranslucent(true); + } + + property.setBackfaceCulling(!material.doubleSided); +} + +/** + * Handles primitive extensions + * @param {*} extensions The extensions object + * @param {*} model The vtk model object + * @param {GLTFNode} node The GLTF node + */ +function handlePrimitiveExtensions(extensions, model, node) { + const extensionsNames = Object.keys(extensions); + extensionsNames.forEach((extensionName) => { + const extension = extensions[extensionName]; + switch (extensionName) { + case 'KHR_materials_variants': + model.variantMappings.set(node.id, extension.mappings); + break; + default: + vtkWarningMacro(`Unhandled extension: ${extensionName}`); + } + }); +} + +/** + * Creates a VTK actor from a GLTF mesh + * @param {GLTFMesh} mesh - The GLTF mesh + * @returns {vtkActor} The created VTK actor + */ +async function createActorFromGTLFNode(model, node, worldMatrix) { + const actor = vtkActor.newInstance(); + const mapper = vtkMapper.newInstance(); + mapper.setColorModeToDirectScalars(); + actor.setMapper(mapper); + actor.setUserMatrix(worldMatrix); + + if (node.mesh !== undefined) { + const polyData = await createPolyDataFromGLTFMesh(node.mesh); + mapper.setInputData(polyData); + + const primitive = node.mesh.primitives[0]; // the first one for now + + // Support for materials + if (primitive.material !== undefined) { + await createPropertyFromGLTFMaterial(model, primitive.material, actor); + } + + if (primitive.extensions !== undefined) { + handlePrimitiveExtensions(primitive.extensions, model, node); + } + } else { + const polyData = vtkPolyData.newInstance(); + mapper.setInputData(polyData); + } + + return actor; +} + +/** + * + * @param {GLTFAnimation} animation + * @returns + */ +function createGLTFAnimation(animation) { + vtkDebugMacro('Creating animation:', animation); + return { + name: animation.name, + channels: animation.channels, + samplers: animation.samplers, + getChannelByTargetNode(nodeIndex) { + return this.channels.filter( + (channel) => channel.target.node === nodeIndex + ); + }, + }; +} + +/** + * Gets the transformation matrix for a GLTF node + * @param {GLTFNode} node - The GLTF node + * @returns {mat4} The transformation matrix + */ +function getTransformationMatrix(node) { + // TRS + const translation = node.translation ?? vec3.create(); + const rotation = node.rotation ?? quat.create(); + const scale = node.scale ?? vec3.fromValues(1.0, 1.0, 1.0); + + const matrix = + node.matrix !== undefined + ? mat4.clone(node.matrix) + : mat4.fromRotationTranslationScale( + mat4.create(), + rotation, + translation, + scale + ); + return matrix; +} + +/** + * Processes a GLTF node + * @param {GLTFnode} node - The GLTF node + * @param {object} model The model object + * @param {vtkActor} parentActor The parent actor + * @param {mat4} parentMatrix The parent matrix + */ +async function processNode( + node, + model, + parentActor = null, + parentMatrix = mat4.create() +) { + node.transform = getTransformationMatrix(node); + const worldMatrix = mat4.multiply( + mat4.create(), + parentMatrix, + node.transform + ); + + // Create actor for the current node + const actor = await createActorFromGTLFNode(model, node, worldMatrix); + if (actor) { + actor.setUserMatrix(worldMatrix); + if (parentActor) { + actor.setParentProp(parentActor); + } + model.actors.set(node.id, actor); + } + + // Handle KHRLightsPunctual extension + if (node.extensions?.KHR_lights_punctual) { + handleKHRLightsPunctual( + node.extensions.KHR_lights_punctual, + node.transform, + model + ); + } + + if ( + node.children && + Array.isArray(node.children) && + node.children.length > 0 + ) { + await Promise.all( + node.children.map(async (child) => { + const parent = model.actors.get(node.id); + await processNode(child, model, parent, worldMatrix); + }) + ); + } +} + +/** + * Creates VTK actors from a GLTF object + * @param {glTF} glTF - The GLTF object + * @param {number} sceneId - The scene index to create actors for + * @returns {vtkActor[]} The created VTK actors + */ +async function createVTKObjects(model) { + model.animations = model.glTFTree.animations?.map(createGLTFAnimation); + + const extensionsNames = Object.keys(model.glTFTree?.extensions || []); + extensionsNames.forEach((extensionName) => { + const extension = model.glTFTree.extensions[extensionName]; + switch (extensionName) { + case 'KHR_materials_variants': + handleKHRMaterialsVariants(extension, model); + break; + case 'KHR_draco_mesh_compression': + break; + default: + vtkWarningMacro(`Unhandled extension: ${extensionName}`); + } + }); + + // Get the sceneId to process + const sceneId = model.sceneId ?? model.glTFTree.scene; + if (model.glTFTree.scenes?.length && model.glTFTree.scenes[sceneId]?.nodes) { + await Promise.all( + model.glTFTree.scenes[sceneId].nodes.map(async (node) => { + if (node) { + await processNode(node, model); + } else { + vtkWarningMacro(`Node not found in glTF.nodes`); + } + }) + ); + } else { + vtkWarningMacro('No valid scenes found in the glTF data'); + } +} + +/** + * Sets up the camera for a vtk renderer based on the bounds of the given actors. + * + * @param {GLTCamera} camera - The GLTF camera object + */ +function GLTFCameraToVTKCamera(glTFCamera) { + const camera = vtkCamera.newInstance(); + if (glTFCamera.type === 'perspective') { + const { yfov, znear, zfar } = glTFCamera.perspective; + camera.setClippingRange(znear, zfar); + camera.setParallelProjection(false); + camera.setViewAngle(vtkMath.degreesFromRadians(yfov)); + } else if (glTFCamera.type === 'orthographic') { + const { ymag, znear, zfar } = glTFCamera.orthographic; + camera.setClippingRange(znear, zfar); + camera.setParallelProjection(true); + camera.setParallelScale(ymag); + } else { + throw new Error('Unsupported camera type'); + } + + return camera; +} + +/** + * + * @param {vtkCamera} camera + * @param {*} transformMatrix + */ +function applyTransformToCamera(camera, transformMatrix) { + if (!camera || !transformMatrix) { + return; + } + + // At identity, camera position is origin, +y up, -z view direction + const position = [0, 0, 0]; + const viewUp = [0, 1, 0]; + const focus = [0, 0, -1]; + + const t = vtkTransform.newInstance(); + t.setMatrix(transformMatrix); + + // Transform position + t.transformPoint(position, position); + t.transformPoints(viewUp, viewUp); + t.transformPoints(focus, focus); + + focus[0] += position[0]; + focus[1] += position[1]; + focus[2] += position[2]; + + // Apply the transformed values to the camera + camera.setPosition(position); + camera.setFocalPoint(focus); + camera.setViewUp(viewUp); +} + +export { + applyTransformToCamera, + createPropertyFromGLTFMaterial, + parseGLTF, + createVTKObjects, + GLTFCameraToVTKCamera, +}; diff --git a/Sources/IO/Geometry/GLTFImporter/Utils.js b/Sources/IO/Geometry/GLTFImporter/Utils.js new file mode 100644 index 00000000000..5f98fdc91be --- /dev/null +++ b/Sources/IO/Geometry/GLTFImporter/Utils.js @@ -0,0 +1,195 @@ +import WebworkerPromise from 'webworker-promise'; +import macro from 'vtk.js/Sources/macros'; +import vtkTexture from 'vtk.js/Sources/Rendering/Core/Texture'; +import Worker from 'vtk.js/Sources/IO/Geometry/GLTFImporter/ORMTexture.worker'; +import { + BYTES, + COMPONENTS, + ARRAY_TYPES, + GL_SAMPLER, +} from 'vtk.js/Sources/IO/Geometry/GLTFImporter/Constants'; + +const { vtkWarningMacro, vtkErrorMacro } = macro; + +/** + * Get GL enum from sampler parameter + * @param {*} parameter The sampler parameter + * @returns The GL enum + */ +export function getGLEnumFromSamplerParameter(parameter) { + const GL_TEXTURE_MAG_FILTER = 0x2800; + const GL_TEXTURE_MIN_FILTER = 0x2801; + const GL_TEXTURE_WRAP_S = 0x2802; + const GL_TEXTURE_WRAP_T = 0x2803; + + const Mapping = { + magFilter: GL_TEXTURE_MAG_FILTER, + minFilter: GL_TEXTURE_MIN_FILTER, + wrapS: GL_TEXTURE_WRAP_S, + wrapT: GL_TEXTURE_WRAP_T, + }; + + return Mapping[parameter]; +} + +export function getAccessorArrayTypeAndLength(accessor, bufferView) { + const ArrayType = ARRAY_TYPES[accessor.componentType]; + const components = COMPONENTS[accessor.type]; + const bytesPerComponent = BYTES[accessor.componentType]; + const length = accessor.count * components; + const byteLength = accessor.count * components * bytesPerComponent; + return { ArrayType, length, byteLength }; +} + +/** + * Resolves a URL based on the original path + * @param {*} url The URL to resolve + * @param {*} originalPath The original path to resolve the URL against + * @returns The resolved URL or an empty string if the URL is invalid + */ +export function resolveUrl(url, originalPath) { + // Invalid URL + if (typeof url !== 'string' || url === '') return ''; + + try { + // Data URI + if (url.startsWith('data:')) return url; + + // Blob URL + if (url.startsWith('blob:')) return url; + + // Create URL object from the original path + const baseUrl = new URL(originalPath); + if (!baseUrl.pathname.includes('.') && !baseUrl.pathname.endsWith('/')) { + baseUrl.pathname += '/'; + } + + // Absolute URL (http://, https://, //) + if ( + url.startsWith('http:') || + url.startsWith('https:') || + url.startsWith('//') + ) { + return new URL(url, baseUrl).href; + } + + // Host Relative URL + if (url.startsWith('/')) { + return new URL(url, baseUrl).href; + } + + // Relative URL + return new URL(url, baseUrl).href; + } catch (error) { + vtkErrorMacro('Error resolving URL:', error); + return ''; + } +} + +/** + * Loads image from buffer or URI + * @param {*} image + * @param {*} channel + * @returns + */ +export async function loadImage(image, channel, forceReLoad = false) { + // Initialize cache if it doesn't exist + if (!image.cache) { + image.cache = {}; + } + + // Return cached result for the channel if available and not forced to reload + if (!forceReLoad && image.cache[channel]) { + return image.cache[channel]; + } + + const worker = new WebworkerPromise(new Worker()); + + if (image.bufferView) { + return worker + .postMessage({ + imageBuffer: image.bufferView.data, + mimeType: image.mimeType, + channel, + }) + .then((result) => { + // Cache the bitmap based on the channel + image.cache[channel] = result.bitmap; + return result.bitmap; + }) + .finally(() => { + worker.terminate(); + }); + } + + if (image.uri) { + vtkWarningMacro('Falling back to image uri', image.uri); + return new Promise((resolve, reject) => { + const img = new Image(); + img.crossOrigin = 'Anonymous'; + img.onload = () => { + image.cache[channel] = img; // Cache the loaded image based on the channel + resolve(img); + }; + img.onerror = reject; + img.src = image.uri; + }); + } + + return null; +} + +/** + * + * @param {*} image + * @param {*} sampler + * @param {*} extensions + * @returns + */ +export function createVTKTextureFromGLTFTexture(image, sampler, extensions) { + const texture = vtkTexture.newInstance(); + // Apply sampler settings + if (sampler) { + if ( + ('wrapS' in sampler && 'wrapT' in sampler) || + ('minFilter' in sampler && 'magFilter' in sampler) + ) { + if ( + sampler.wrapS === GL_SAMPLER.CLAMP_TO_EDGE || + sampler.wrapT === GL_SAMPLER.CLAMP_TO_EDGE + ) { + texture.setRepeat(false); + texture.setEdgeClamp(true); + } else if ( + sampler.wrapS === GL_SAMPLER.REPEAT || + sampler.wrapT === GL_SAMPLER.REPEAT + ) { + texture.setRepeat(true); + texture.setEdgeClamp(false); + } else { + vtkWarningMacro('Mirrored texture wrapping is not supported!'); + } + + const linearFilters = [ + GL_SAMPLER.LINEAR, + GL_SAMPLER.LINEAR_MIPMAP_NEAREST, + GL_SAMPLER.NEAREST_MIPMAP_LINEAR, + GL_SAMPLER.LINEAR_MIPMAP_LINEAR, + ]; + + if ( + linearFilters.includes(sampler.minFilter) || + linearFilters.includes(sampler.magFilter) + ) { + texture.setInterpolate(true); + } + } else { + texture.MipmapOn(); + texture.setInterpolate(true); + texture.setEdgeClamp(true); + } + } + + texture.setJsImageData(image); + return texture; +} diff --git a/Sources/IO/Geometry/GLTFImporter/example/controller.html b/Sources/IO/Geometry/GLTFImporter/example/controller.html new file mode 100644 index 00000000000..0470eff0f47 --- /dev/null +++ b/Sources/IO/Geometry/GLTFImporter/example/controller.html @@ -0,0 +1,89 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+

Options

+
+ Renderer + + + + + +
Models + +
Flavor + +
Scenes + +
Cameras + +
+ + + + + + + + + + + + + + +
+

Environment Properties

+
+ + +
+ + + 1.00 +
+ + + 1.00 +
+ + + 30 +
diff --git a/Sources/IO/Geometry/GLTFImporter/example/index.js b/Sources/IO/Geometry/GLTFImporter/example/index.js new file mode 100644 index 00000000000..365628c5ff4 --- /dev/null +++ b/Sources/IO/Geometry/GLTFImporter/example/index.js @@ -0,0 +1,347 @@ +import '@kitware/vtk.js/Rendering/Profiles/Geometry'; + +// Enable data soure for DataAccessHelper +import '@kitware/vtk.js/IO/Core/DataAccessHelper/LiteHttpDataAccessHelper'; // Just need HTTP +// import '@kitware/vtk.js/IO/Core/DataAccessHelper/HttpDataAccessHelper'; // HTTP + zip +// import '@kitware/vtk.js/IO/Core/DataAccessHelper/HtmlDataAccessHelper'; // html + base64 + zip +// import '@kitware/vtk.js/IO/Core/DataAccessHelper/JSZipDataAccessHelper'; // zip + +import vtkFullScreenRenderWindow from '@kitware/vtk.js/Rendering/Misc/FullScreenRenderWindow'; +import vtkTexture from '@kitware/vtk.js/Rendering/Core/Texture'; +import vtkURLExtract from '@kitware/vtk.js/Common/Core/URLExtract'; +import vtkResourceLoader from '@kitware/vtk.js/IO/Core/ResourceLoader'; + +import vtkGLTFImporter from '@kitware/vtk.js/IO/Geometry/GLTFImporter'; + +import controlPanel from './controller.html'; + +// ---------------------------------------------------------------------------- +// Example code +// ---------------------------------------------------------------------------- +let mixer; +let selectedModel; +let selectedFlavor; +const userParms = vtkURLExtract.extractURLParameters(); +const selectedScene = userParms.scene || 0; +const viewAPI = userParms.viewAPI || 'WebGL'; + +const baseUrl = + 'https://raw.githubusercontent.com/KhronosGroup/glTF-Sample-Assets/main'; +const modelsFolder = 'Models'; +const modelsDictionary = {}; + +function createTextureWithMipmap(src, level) { + const img = new Image(); + img.crossOrigin = 'Anonymous'; + img.src = src; + const tex = vtkTexture.newInstance(); + tex.setMipLevel(level); + img.onload = () => { + tex.setInterpolate(true); + tex.setEdgeClamp(true); + tex.setImage(img); + }; + return tex; +} + +const fullScreenRenderer = vtkFullScreenRenderWindow.newInstance(); +fullScreenRenderer.addController(controlPanel); + +const renderer = fullScreenRenderer.getRenderer(); +const renderWindow = fullScreenRenderer.getRenderWindow(); + +// Workaround for the variant switch +const variantsModels = [ + 'MaterialsVariantsShoe', + 'GlamVelvetSofa', + 'SheenChair', +]; + +const environmentTex = createTextureWithMipmap( + '/Data/pbr/kiara_dawn_4k.jpg', + 8 +); +renderer.setUseEnvironmentTextureAsBackground(false); + +if (variantsModels.includes(userParms.model)) { + renderer.setEnvironmentTextureDiffuseStrength(0); + renderer.setEnvironmentTextureSpecularStrength(0); +} else { + renderer.setEnvironmentTexture(environmentTex); + renderer.setEnvironmentTextureDiffuseStrength(1); + renderer.setEnvironmentTextureSpecularStrength(1); +} + +const reader = vtkGLTFImporter.newInstance({ + renderer, +}); + +const rootContainer = document.querySelector('body'); +const modelSelector = document.querySelector('.models'); +const flavorSelector = document.querySelector('.flavor'); +const scenesSelector = document.querySelector('.scenes'); +const camerasSelector = document.querySelector('.cameras'); +const animationsSelector = document.querySelector('.animations'); +const variantsSelector = document.querySelector('.variants'); + +const eSpecularChange = document.querySelector('.e-specular'); +const eDiffuseChange = document.querySelector('.e-diffuse'); +const angleChange = document.querySelector('.angle'); +const useTextureBackgroundChange = document.querySelector('.use-background'); + +// add a loading svg to the container and remove once the reader is ready +const loading = document.createElement('div'); +loading.innerHTML = ` + + + + + +`; +// loading message should center in the window +loading.style.position = 'absolute'; +loading.style.left = '50%'; +loading.style.top = '50%'; +loading.style.transform = 'translate(-50%, -50%)'; + +// ---------------------------------------------------------------------------- +function animateScene(lastTime = 0) { + const currentTime = performance.now(); + const dt = (currentTime - lastTime) / 1000; + + mixer.update(dt); + + renderWindow.render(); + requestAnimationFrame(() => animateScene(currentTime)); +} + +function ready() { + console.log('Ready'); + // remove loading message + loading.remove(); + + reader.importActors(); + reader.importCameras(); + reader.importLights(); + reader.importAnimations(); + + renderer.resetCamera(); + renderWindow.render(); + + // Play animations + const animations = reader.getAnimations(); + if (animations.length > 0) { + animations.forEach((animation, name) => { + const option = document.createElement('option'); + option.value = animation.id; + option.textContent = animation.id; + animationsSelector.appendChild(option); + }); + + // Play the first animation by default + const defaultAnimation = animations[0]; + mixer = reader.getAnimationMixer(); + mixer.play(defaultAnimation.id); + animateScene(); + document.querySelector('.animations-container').style.display = 'table-row'; + } + + const cameras = reader.getCameras(); + cameras.forEach((camera, name) => { + const option = document.createElement('option'); + option.value = name; + option.textContent = name; + camerasSelector.appendChild(option); + }); + + const scenes = reader.getScenes(); + if (scenes.length > 1) { + scenesSelector.innerHTML = ''; + scenes.forEach((scene, index) => { + const option = document.createElement('option'); + option.value = index; + option.textContent = `Scene ${index}`; + if (index === selectedScene) { + option.selected = true; + } + scenesSelector.appendChild(option); + }); + } + + const variants = reader.getVariants(); + if (variants.length > 1) { + variantsSelector.innerHTML = ''; + variants.forEach((variant, index) => { + console.log('Adding variant', variant); + const option = document.createElement('option'); + option.value = index; + option.textContent = variant; + variantsSelector.appendChild(option); + }); + document.querySelector('.variants-container').style.display = 'table-row'; + } +} + +// Convert the await fetch to a promise chain +fetch(`${baseUrl}/${modelsFolder}/model-index.json`) + .then((response) => response.json()) + .then((modelsJson) => { + modelsJson.forEach((entry) => { + if (entry.variants !== undefined && entry.name !== undefined) { + const variants = []; + + Object.keys(entry.variants).forEach((variant) => { + const fileName = entry.variants[variant]; + variants[ + variant + ] = `${modelsFolder}/${entry.name}/${variant}/${fileName}`; + }); + + modelsDictionary[entry.name] = variants; + } + }); + + const modelsNames = Object.keys(modelsDictionary); + modelsNames.forEach((modelName) => { + const option = document.createElement('option'); + option.value = modelName; + option.textContent = modelName; + if (userParms.model === modelName) { + option.selected = true; + } + modelSelector.appendChild(option); + }); + + selectedModel = userParms.model || modelsNames[0]; + const variants = Object.keys(modelsDictionary[selectedModel]); + + selectedFlavor = userParms.flavor || variants[0]; + variants.forEach((variant) => { + const option = document.createElement('option'); + option.value = variant; + option.textContent = variant; + if (variant === selectedFlavor) { + option.selected = true; + } + flavorSelector.appendChild(option); + }); + + const path = modelsDictionary[selectedModel][selectedFlavor]; + const url = `${baseUrl}/${path}`; + + if (selectedFlavor === 'glTF-Draco') { + vtkResourceLoader + .loadScript('https://unpkg.com/draco3d@1.3.4/draco_decoder_nodejs.js') + .then(() => { + // Set decoder function to the vtk reader + reader.setDracoDecoder(window.CreateDracoModule); + reader + .setUrl(url, { binary: true, sceneId: selectedScene }) + .then(reader.onReady(ready)); + }); + } else { + reader + .setUrl(url, { binary: true, sceneId: selectedScene }) + .then(reader.onReady(ready)); + } + }) + .catch((error) => { + console.error('Error fetching the model index:', error); + }); + +// ---------------------------------------------------------------------------- +// Use a file reader to load a local file +// ---------------------------------------------------------------------------- + +// Get the value of the radio button named 'renderer' and set the view API accordingly +document.querySelectorAll("input[name='viewAPI']").forEach((input) => { + if (input.value === viewAPI) { + input.checked = true; + } + input.addEventListener('change', (evt) => { + window.location = `?model=${selectedModel}&viewAPI=${evt.target.value}`; + }); +}); + +modelSelector.onchange = (evt) => { + window.location = `?model=${evt.target.value}&viewAPI=${viewAPI}`; +}; + +flavorSelector.onchange = (evt) => { + window.location = `?model=${selectedModel}&flavor=${evt.target.value}&scene=${selectedScene}&viewAPI=${viewAPI}`; +}; + +scenesSelector.onchange = (evt) => { + window.location = `?model=${selectedModel}&flavor=${selectedFlavor}&scene=${evt.target.value}&viewAPI=${viewAPI}`; +}; + +camerasSelector.onchange = (evt) => { + reader.setCamera(evt.target.value); + renderWindow.render(); +}; + +variantsSelector.onchange = async (evt) => { + console.log('Switching to variant', evt.target.value); + await reader.switchToVariant(Number(evt.target.value)); + renderWindow.render(); +}; + +useTextureBackgroundChange.addEventListener('input', (e) => { + const useTexturedBackground = Boolean(e.target.checked); + renderer.setUseEnvironmentTextureAsBackground(useTexturedBackground); + renderWindow.render(); +}); + +angleChange.addEventListener('input', (e) => { + const angle = Number(e.target.value); + renderer.getActiveCamera().setViewAngle(angle); + renderWindow.render(); +}); + +eSpecularChange.addEventListener('input', (e) => { + const specular = Number(e.target.value); + renderer.setEnvironmentTextureSpecularStrength(specular); + renderWindow.render(); +}); + +eDiffuseChange.addEventListener('input', (e) => { + const diffuse = Number(e.target.value); + renderer.setEnvironmentTextureDiffuseStrength(diffuse); + renderWindow.render(); +}); + +rootContainer.appendChild(loading); diff --git a/Sources/IO/Geometry/GLTFImporter/index.d.ts b/Sources/IO/Geometry/GLTFImporter/index.d.ts new file mode 100644 index 00000000000..8009302b4be --- /dev/null +++ b/Sources/IO/Geometry/GLTFImporter/index.d.ts @@ -0,0 +1,266 @@ +import { vtkAlgorithm, vtkObject } from '../../../interfaces'; +import HtmlDataAccessHelper from '../../Core/DataAccessHelper/HtmlDataAccessHelper'; +import HttpDataAccessHelper from '../../Core/DataAccessHelper/HttpDataAccessHelper'; +import JSZipDataAccessHelper from '../../Core/DataAccessHelper/JSZipDataAccessHelper'; +import LiteHttpDataAccessHelper from '../../Core/DataAccessHelper/LiteHttpDataAccessHelper'; + +import vtkActor from '../../../Rendering/Core/Actor'; +import vtkRenderer from '../../../Rendering/Core/Renderer'; +import vtkCamera from '../../../Rendering/Core/Camera'; + +interface IGLTFImporterOptions { + binary?: boolean; + compression?: string; + progressCallback?: any; +} + +export interface IGLTFAnimation { + id: string; + name: string; + channels: any[]; + samplers: any[]; +} + +export interface IGLTFAnimationMixer { + addAnimation: (glTFAnimation: object) => void; + play: (name: string, weight?: number) => void; + stop: (name: string) => void; + stopAll: () => void; + update: (deltaTime: number) => void; +} + +export interface IGLTFMaterialVariant { + material: number; + variants: number[]; +} + +/** + * + */ +export interface IGLTFImporterInitialValues {} + +type vtkGLTFImporterBase = vtkObject & + Omit< + vtkAlgorithm, + | 'getInputData' + | 'setInputData' + | 'setInputConnection' + | 'getInputConnection' + | 'addInputConnection' + | 'addInputData' + >; + +export interface vtkGLTFImporter extends vtkGLTFImporterBase { + /** + * Get the actors. + */ + getActors(): Map; + + /** + * Get the animation mixer. + */ + getAnimationMixer(): IGLTFAnimationMixer; + + /** + * Get the animations. + */ + getAnimations(): IGLTFAnimation[]; + + /** + * Get the base url. + */ + getBaseURL(): string; + + /** + * Get the cameras. + */ + getCameras(): Map; + + /** + * + */ + getDataAccessHelper(): + | HtmlDataAccessHelper + | HttpDataAccessHelper + | JSZipDataAccessHelper + | LiteHttpDataAccessHelper; + + /** + * Get the url of the object to load. + */ + getUrl(): string; + + /** + * Get the variant array. + */ + getVariants(): string[]; + + /** + * Get the variant mappings. + */ + getVariantMappings(): Map; + + /** + * Import the actors. + */ + importActors(): void; + + /** + * Import the animations. + */ + importAnimations(): void; + + /** + * Import the cameras. + */ + importCameras(): void; + + /** + * Import the lights. + */ + importLights(): void; + + /** + * Invoke the ready event. + */ + invokeReady(): void; + + /** + * Load the object data. + * @param {IGLTFImporterOptions} [options] + */ + loadData(options?: IGLTFImporterOptions): Promise; + + /** + * + * @param callback + */ + onReady(callback: () => void): void; + + /** + * Parse data. + * @param {String | ArrayBuffer} content The content to parse. + */ + parse(content: string | ArrayBuffer): void; + + /** + * Parse data as ArrayBuffer. + * @param {ArrayBuffer} content The content to parse. + */ + parseAsArrayBuffer(content: ArrayBuffer): void; + + /** + * Parse data as text. + * @param {String} content The content to parse. + */ + parseAsText(content: string): void; + + /** + * + * @param inData + * @param outData + */ + requestData(inData: any, outData: any): void; + + /** + * + * @param dataAccessHelper + */ + setDataAccessHelper( + dataAccessHelper: + | HtmlDataAccessHelper + | HttpDataAccessHelper + | JSZipDataAccessHelper + | LiteHttpDataAccessHelper + ): boolean; + + /** + * Set the url of the object to load. + * @param {String} url the url of the object to load. + * @param {IGLTFImporterOptions} [option] The Draco reader options. + */ + setUrl(url: string, option?: IGLTFImporterOptions): Promise; + + /** + * Set the camera id. + * @param cameraId + */ + setCamera(cameraId: string): void; + + /** + * Set the Draco decoder. + * @param mappings + */ + setDracoDecoder(decoder: any): void; + + /** + * Set the vtk Renderer. + * @param renderer + */ + setRenderer(renderer: vtkRenderer): void; + + /** + * Switch to a variant. + * @param variantIndex + */ + switchToVariant(variantIndex: number): void; +} + +/** + * Method used to decorate a given object (publicAPI+model) with vtkGLTFImporter characteristics. + * + * @param publicAPI object on which methods will be bounds (public) + * @param model object on which data structure will be bounds (protected) + * @param {IGLTFImporterInitialValues} [initialValues] (default: {}) + */ +export function extend( + publicAPI: object, + model: object, + initialValues?: IGLTFImporterInitialValues +): void; + +/** + * Method used to create a new instance of vtkGLTFImporter + * @param {IGLTFImporterInitialValues} [initialValues] for pre-setting some of its content + */ +export function newInstance( + initialValues?: IGLTFImporterInitialValues +): vtkGLTFImporter; + +/** + * Load the WASM decoder from url and set the decoderModule + * @param url + * @param binaryName + */ +export function setWasmBinary( + url: string, + binaryName: string +): Promise; + +/** + * vtkGLTFImporter can import glTF 2.0 files. + * + * The GL Transmission Format (glTF) is an API-neutral runtime asset delivery + * format. A glTF asset is represented by: + * * A JSON-formatted file (.gltf) containing a full scene description: node + * hierarchy, materials, cameras, as well as descriptor information for + * meshes, animations, and other constructs + * * Binary files (.bin) containing geometry and animation data, and other + * buffer-based data + * * Image files (.jpg, .png) for textures + * + * Supported extensions: + * * KHR_draco_mesh_compression + * * KHR_lights_punctual + * * KHR_materials_unlit + * * KHR_materials_ior + * * KHR_materials_specular + * * KHR_materials_variants + * * EXT_texture_webp + * * EXT_texture_avif + */ +export declare const vtkGLTFImporter: { + newInstance: typeof newInstance; + extend: typeof extend; +}; +export default vtkGLTFImporter; diff --git a/Sources/IO/Geometry/GLTFImporter/index.js b/Sources/IO/Geometry/GLTFImporter/index.js new file mode 100644 index 00000000000..553e60f680a --- /dev/null +++ b/Sources/IO/Geometry/GLTFImporter/index.js @@ -0,0 +1,277 @@ +import macro from 'vtk.js/Sources/macros'; + +import BinaryHelper from 'vtk.js/Sources/IO/Core/BinaryHelper'; +import DataAccessHelper from 'vtk.js/Sources/IO/Core/DataAccessHelper'; +import vtkDracoReader from 'vtk.js/Sources/IO/Geometry/DracoReader'; +import { + createVTKObjects, + parseGLTF, + GLTFCameraToVTKCamera, + applyTransformToCamera, + createPropertyFromGLTFMaterial, +} from 'vtk.js/Sources/IO/Geometry/GLTFImporter/Reader'; +import parseGLB from 'vtk.js/Sources/IO/Geometry/GLTFImporter/Decoder'; +import { createAnimationMixer } from 'vtk.js/Sources/IO/Geometry/GLTFImporter/Animations'; +import { BINARY_HEADER_MAGIC } from 'vtk.js/Sources/IO/Geometry/GLTFImporter/Constants'; + +const { vtkDebugMacro, vtkErrorMacro } = macro; + +// ---------------------------------------------------------------------------- +// vtkGLTFImporter methods +// ---------------------------------------------------------------------------- + +function vtkGLTFImporter(publicAPI, model) { + // Set our className + model.classHierarchy.push('vtkGLTFImporter'); + + // Create default dataAccessHelper if not available + if (!model.dataAccessHelper) { + model.dataAccessHelper = DataAccessHelper.get('http'); + } + + // Internal method to fetch Array + function fetchData(url, option = {}) { + const { compression, progressCallback } = model; + if (option.binary) { + return model.dataAccessHelper.fetchBinary(url, { + compression, + progressCallback, + }); + } + return model.dataAccessHelper.fetchText(publicAPI, url, { + compression, + progressCallback, + }); + } + + // Set DataSet url + publicAPI.setUrl = (url, option = { binary: true }) => { + model.url = url; + + // Remove the file in the URL + const path = url.split('/'); + path.pop(); + model.baseURL = path.join('/'); + + model.compression = option.compression; + model.sceneId = option.sceneId ? option.sceneId : 0; + + // Fetch metadata + return publicAPI.loadData({ + progressCallback: option.progressCallback, + binary: !!option.binary, + }); + }; + + // Fetch the actual data arrays + publicAPI.loadData = (option = {}) => { + const promise = fetchData(model.url, option); + promise.then(publicAPI.parse); + return promise; + }; + + publicAPI.parse = (content) => { + if (typeof content === 'string') { + publicAPI.parseAsText(content); + } else { + publicAPI.parseAsBinary(content); + } + }; + + publicAPI.parseAsBinary = async (content) => { + if (!content) { + return; + } + if (content !== model.parseData) { + publicAPI.modified(); + } else { + return; + } + + const glTF = {}; + const options = { + baseUri: model.baseURL, + }; + + const magic = BinaryHelper.arrayBufferToString( + new Uint8Array(content, 0, 4) + ); + + if (magic === BINARY_HEADER_MAGIC) { + const { json, buffers } = parseGLB(content); + vtkDebugMacro('Loaded GLB', json, buffers); + glTF.glbBuffers = buffers; + glTF.json = json; + } else { + glTF.json = JSON.parse(BinaryHelper.arrayBufferToString(content)); + } + + if (glTF.json.asset === undefined || glTF.json.asset.version[0] < 2) { + vtkErrorMacro('Unsupported asset. glTF versions >=2.0 are supported.'); + return; + } + + model.glTFTree = await parseGLTF(glTF, options); + + model.actors = new Map(); + model.cameras = new Map(); + model.lights = new Map(); + model.animations = []; + model.variants = []; + model.variantMappings = new Map(); + + await createVTKObjects(model); + + model.scenes = model.glTFTree.scenes; + + publicAPI.invokeReady(); + }; + + publicAPI.parseAsText = (content) => { + if (!content) { + return; + } + if (content !== model.parseData) { + publicAPI.modified(); + } else { + return; + } + + model.parseData = content; + }; + + publicAPI.requestData = (inData, outData) => { + publicAPI.parse(model.parseData); + }; + + publicAPI.setDracoDecoder = (decoder) => { + vtkDracoReader.setDracoDecoder(decoder); + }; + + publicAPI.importActors = () => { + // Add actors to renderer + model.actors.forEach((actor) => model.renderer.addActor(actor)); + }; + + publicAPI.importCameras = () => { + // Set up camera + model.glTFTree.cameras?.forEach((glTFcamera) => { + const camera = GLTFCameraToVTKCamera(glTFcamera); + model.cameras.set(glTFcamera.id, camera); + }); + + model.scenes.forEach((scene) => { + scene.nodes.forEach((node) => { + const camera = model.cameras.get(node.camera?.id); + if (camera) { + applyTransformToCamera(camera, node.transform); + } + }); + }); + }; + + publicAPI.importAnimations = () => { + // Set up animations + if (model.glTFTree.animations?.length > 0) { + model.animationMixer = createAnimationMixer( + model.actors, + model.glTFTree.accessors + ); + model.glTFTree.animations.forEach((animation) => { + model.animationMixer.addAnimation(animation); + }); + } + model.animations = model.glTFTree.animations || []; + }; + + publicAPI.importLights = () => { + // Set up lights + model.lights?.forEach((light) => { + vtkDebugMacro('Adding light', light); + model.renderer.addLight(light); + }); + }; + + publicAPI.setCamera = (cameraId) => { + const camera = model.cameras.get(cameraId); + + if (!camera) { + vtkErrorMacro(`Camera ${cameraId} not found`); + return; + } + vtkDebugMacro('Setting camera', camera); + model.renderer.setActiveCamera(camera); + }; + + publicAPI.switchToVariant = async (variantIndex) => { + const promises = Array.from(model.actors).map(async ([nodeId, actor]) => { + vtkDebugMacro('Switching to variant', variantIndex, 'for node', nodeId); + const variantMappings = model.variantMappings.get(nodeId); + + if (variantMappings) { + const mapping = variantMappings.find((m) => + m.variants.includes(variantIndex) + ); + if (mapping) { + const variantMaterial = model.glTFTree.materials[mapping.material]; + await createPropertyFromGLTFMaterial(model, variantMaterial, actor); + } + } + }); + + await Promise.all(promises); + }; +} + +// ---------------------------------------------------------------------------- +// Object factory +// ---------------------------------------------------------------------------- + +const DEFAULT_VALUES = { + // baseURL: null, + // dataAccessHelper: null, + // url: null, +}; + +// ---------------------------------------------------------------------------- + +export function extend(publicAPI, model, initialValues = {}) { + Object.assign(model, DEFAULT_VALUES, initialValues); + + // Build VTK API + macro.obj(publicAPI, model); + macro.get(publicAPI, model, [ + 'url', + 'baseURL', + 'actors', + 'scenes', + 'cameras', + 'animations', + 'animationMixer', + 'variants', + 'variantMappings', + ]); + macro.set(publicAPI, model, ['renderer', 'dracoDecoder']); + macro.event(publicAPI, model, 'ready'); + + // vtkGLTFImporter methods + vtkGLTFImporter(publicAPI, model); + + // To support destructuring + if (!model.compression) { + model.compression = null; + } + if (!model.progressCallback) { + model.progressCallback = null; + } +} +// ---------------------------------------------------------------------------- + +export const newInstance = macro.newInstance(extend, 'vtkGLTFImporter'); + +// ---------------------------------------------------------------------------- + +export default { + extend, + newInstance, +}; diff --git a/Sources/IO/Geometry/index.js b/Sources/IO/Geometry/index.js index 084317488c5..d83543eb7ed 100644 --- a/Sources/IO/Geometry/index.js +++ b/Sources/IO/Geometry/index.js @@ -3,6 +3,7 @@ import vtkPLYReader from './PLYReader'; import vtkDracoReader from './DracoReader'; import vtkSTLWriter from './STLWriter'; import vtkPLYWriter from './PLYWriter'; +import vtkGLTFImporter from './GLTFImporter'; export default { vtkSTLReader, @@ -10,4 +11,5 @@ export default { vtkDracoReader, vtkSTLWriter, vtkPLYWriter, + vtkGLTFImporter, };