{"_id":"@bertt/3dtilesrenderer-outline-plugin","_rev":"3-75d1935ccdf58522df586b1de26af69c","name":"@bertt/3dtilesrenderer-outline-plugin","dist-tags":{"latest":"1.0.2"},"versions":{"1.0.0":{"name":"@bertt/3dtilesrenderer-outline-plugin","version":"1.0.0","keywords":["3d-tiles","3d-tiles-renderer","gltf","cesium","outline","webgl","three","threejs","maplibre","pg2b3dm"],"author":"","license":"MIT","_id":"@bertt/3dtilesrenderer-outline-plugin@1.0.0","maintainers":[{"name":"bertt","email":"btemme@hotmail.com"}],"homepage":"https://github.com/bertt/3dtilesrenderer-outline-plugin#readme","bugs":{"url":"https://github.com/bertt/3dtilesrenderer-outline-plugin/issues"},"dist":{"shasum":"b8fc1418aed84c4496e2fe791d5bd234aa6a4a8a","tarball":"https://registry.npmjs.org/@bertt/3dtilesrenderer-outline-plugin/-/3dtilesrenderer-outline-plugin-1.0.0.tgz","fileCount":4,"integrity":"sha512-1ifrpZrJT+bGEx99S+QaFZbOj6W0as05kwWTRN2ylqp0HVkRXFp9s2zXVg3Cf50TMCRIxZR6ITCvPktDmHqZnQ==","signatures":[{"sig":"MEUCID/FUhwhAi4Rru74kFXubPimJE5IVGZEtv8ORhyxDHHhAiEA46NVSrlqrOnawmUS/I70h35AA60cn+gJEDsmxS10zqc=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":16295},"main":"./src/GLTFCesiumPrimitiveOutlineExtension.js","type":"module","module":"./src/GLTFCesiumPrimitiveOutlineExtension.js","exports":{".":{"import":"./src/GLTFCesiumPrimitiveOutlineExtension.js","default":"./src/GLTFCesiumPrimitiveOutlineExtension.js"}},"gitHead":"e3592a609aecbe15ee3bbcbd76972d6311692e58","_npmUser":{"name":"bertt","email":"btemme@hotmail.com"},"repository":{"url":"git+https://github.com/bertt/3dtilesrenderer-outline-plugin.git","type":"git"},"_npmVersion":"11.10.0","description":"Three.js GLTFLoader plugin for rendering CESIUM_primitive_outline edges on 3D Tiles models","directories":{},"_nodeVersion":"24.14.1","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"three":"^0.183.0"},"peerDependencies":{"three":">=0.154.0"},"_npmOperationalInternal":{"tmp":"tmp/3dtilesrenderer-outline-plugin_1.0.0_1774603065372_0.3170764082552038","host":"s3://npm-registry-packages-npm-production"}},"1.0.1":{"name":"@bertt/3dtilesrenderer-outline-plugin","version":"1.0.1","keywords":["3d-tiles","3d-tiles-renderer","gltf","cesium","outline","webgl","three","threejs","maplibre","pg2b3dm"],"author":"","license":"MIT","_id":"@bertt/3dtilesrenderer-outline-plugin@1.0.1","maintainers":[{"name":"bertt","email":"btemme@hotmail.com"}],"homepage":"https://github.com/bertt/3dtilesrenderer-outline-plugin#readme","bugs":{"url":"https://github.com/bertt/3dtilesrenderer-outline-plugin/issues"},"dist":{"shasum":"c88a7d4fe84222dad2b871e3e9c5dd2b60872d56","tarball":"https://registry.npmjs.org/@bertt/3dtilesrenderer-outline-plugin/-/3dtilesrenderer-outline-plugin-1.0.1.tgz","fileCount":4,"integrity":"sha512-zIw5f4zLt1ZVKXNMLezDXzIkgcXb//u/H+o5XFAcZnsWGy5FRaISFYBQA5guoAtmMLtlxmgy8DsWgPOvFNBtNg==","signatures":[{"sig":"MEUCIQCGSbT4AdaPaFQypAtZbfvkYZeSlIn3jsej/Ws+PmEUXAIgDnKtUuRy5RpZoG6nLi0LU093kp+Tlbivht+vOJYW1xs=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":16295},"main":"./src/GLTFCesiumPrimitiveOutlineExtension.js","type":"module","module":"./src/GLTFCesiumPrimitiveOutlineExtension.js","exports":{".":{"import":"./src/GLTFCesiumPrimitiveOutlineExtension.js","default":"./src/GLTFCesiumPrimitiveOutlineExtension.js"}},"gitHead":"e3592a609aecbe15ee3bbcbd76972d6311692e58","_npmUser":{"name":"bertt","email":"btemme@hotmail.com"},"repository":{"url":"git+https://github.com/bertt/3dtilesrenderer-outline-plugin.git","type":"git"},"_npmVersion":"11.10.0","description":"Three.js GLTFLoader plugin for rendering CESIUM_primitive_outline edges on 3D Tiles models","directories":{},"_nodeVersion":"24.14.1","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"three":"^0.183.0"},"peerDependencies":{"three":">=0.154.0"},"_npmOperationalInternal":{"tmp":"tmp/3dtilesrenderer-outline-plugin_1.0.1_1774603103000_0.38059656209623594","host":"s3://npm-registry-packages-npm-production"}},"1.0.2":{"name":"@bertt/3dtilesrenderer-outline-plugin","version":"1.0.2","publishConfig":{"access":"public"},"description":"Three.js GLTFLoader plugin for rendering CESIUM_primitive_outline edges on 3D Tiles models","type":"module","main":"./src/GLTFCesiumPrimitiveOutlineExtension.js","module":"./src/GLTFCesiumPrimitiveOutlineExtension.js","exports":{".":{"import":"./src/GLTFCesiumPrimitiveOutlineExtension.js","default":"./src/GLTFCesiumPrimitiveOutlineExtension.js"}},"keywords":["3d-tiles","3d-tiles-renderer","gltf","cesium","outline","webgl","three","threejs","maplibre","pg2b3dm"],"author":"","license":"MIT","peerDependencies":{"three":">=0.154.0"},"devDependencies":{"three":"^0.183.0"},"repository":{"type":"git","url":"git+https://github.com/bertt/3dtilesrenderer-outline-plugin.git"},"homepage":"https://github.com/bertt/3dtilesrenderer-outline-plugin#readme","gitHead":"3efbed5b797840aee9873fcfc2646b1c26ccd09a","_id":"@bertt/3dtilesrenderer-outline-plugin@1.0.2","bugs":{"url":"https://github.com/bertt/3dtilesrenderer-outline-plugin/issues"},"_nodeVersion":"24.14.1","_npmVersion":"11.11.0","dist":{"integrity":"sha512-wt5FxoxNSD/BIRO7ihFwWpS7O1lsT+EPPCEk3ClQGIoeaoaFfdeJ154Bs8ZHNahEyB0fFyfIqs3TyL5sPIslEA==","shasum":"d8789921a207c420b6ae218086fbd0ded203d579","tarball":"https://registry.npmjs.org/@bertt/3dtilesrenderer-outline-plugin/-/3dtilesrenderer-outline-plugin-1.0.2.tgz","fileCount":4,"unpackedSize":16218,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEYCIQCnWlgAneyhYE3DMoPGCUqJmq4oIA0P2VLRiFR+3hXRYwIhAIYw05ua8gjadogQS/nEdFw2bG78rtsW6gJ70k6C9L/X"}]},"_npmUser":{"name":"bertt","email":"btemme@hotmail.com"},"directories":{},"maintainers":[{"name":"bertt","email":"btemme@hotmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/3dtilesrenderer-outline-plugin_1.0.2_1779096426040_0.3572453657342227"},"_hasShrinkwrap":false}},"time":{"created":"2026-03-27T09:17:45.312Z","modified":"2026-05-18T09:27:06.318Z","1.0.0":"2026-03-27T09:17:45.531Z","1.0.1":"2026-03-27T09:18:23.148Z","1.0.2":"2026-05-18T09:27:06.179Z"},"bugs":{"url":"https://github.com/bertt/3dtilesrenderer-outline-plugin/issues"},"license":"MIT","homepage":"https://github.com/bertt/3dtilesrenderer-outline-plugin#readme","keywords":["3d-tiles","3d-tiles-renderer","gltf","cesium","outline","webgl","three","threejs","maplibre","pg2b3dm"],"repository":{"type":"git","url":"git+https://github.com/bertt/3dtilesrenderer-outline-plugin.git"},"description":"Three.js GLTFLoader plugin for rendering CESIUM_primitive_outline edges on 3D Tiles models","maintainers":[{"name":"bertt","email":"btemme@hotmail.com"}],"readme":"# 3dtilesrenderer-outline-plugin\n\nA Three.js GLTFLoader plugin that renders building outlines encoded with the\n[CESIUM_primitive_outline](https://github.com/KhronosGroup/glTF/blob/main/extensions/2.0/Vendor/CESIUM_primitive_outline/README.md)\nextension, designed for use with\n[3DTilesRendererJS](https://github.com/NASA-AMMOS/3DTilesRendererJS).\n\nThe plugin reads the edge-index accessor embedded in each glTF primitive and\ndraws a `THREE.LineSegments` child mesh for every outlined face.  A small\nperspective-correct depth bias in the vertex shader prevents z-fighting against\nthe solid triangle geometry.\n\nDemo see https://bertt.github.io/3dtilesrenderer-outline-plugin/sample/sibbe/\n\n<img width=\"1906\" height=\"1050\" alt=\"image\" src=\"https://github.com/user-attachments/assets/e2c3b549-53ed-46b9-b713-125c2e1d5d1a\" />\n\n## Requirements\n\n- Three.js r154 or later (requires `GLTFParser.associations`)\n- 3DTilesRendererJS 0.4 or later (optional but the primary target)\n- 3D Tiles content produced with `--add_outlines true` in\n  [pg2b3dm](https://github.com/Geodan/pg2b3dm)\n\n## Installation\n\n```\nnpm install @bertt/3dtilesrenderer-outline-plugin\n```\n\nNpm package: https://www.npmjs.com/package/@bertt/3dtilesrenderer-outline-plugin\n\nOr copy `src/GLTFCesiumPrimitiveOutlineExtension.js` directly into your project.\n\n## Usage\n\nThe plugin is a standard Three.js GLTFLoader plugin.  Register it with the\nfactory pattern that Three.js requires so each parsed file gets its own parser\ninstance while options are shared via closure.\n\n### With 3DTilesRendererJS (manual loader setup)\n\nReplace the built-in `GLTFExtensionsPlugin` with a manually-configured\n`GLTFLoader` so you can register additional GLTF plugins alongside the standard\nones:\n\n```js\nimport { TilesRenderer } from '3d-tiles-renderer';\nimport { ImplicitTilingPlugin } from '3d-tiles-renderer/core/plugins';\nimport {\n  GLTFMeshFeaturesExtension,\n  GLTFStructuralMetadataExtension,\n  GLTFCesiumRTCExtension,\n} from '3d-tiles-renderer/three/plugins';\nimport { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';\nimport { DRACOLoader } from 'three/examples/jsm/loaders/DRACOLoader.js';\nimport { KTX2Loader } from 'three/examples/jsm/loaders/KTX2Loader.js';\nimport { GLTFCesiumPrimitiveOutlineExtension } from '3dtilesrenderer-outline-plugin';\n\nconst tiles = new TilesRenderer( url );\ntiles.registerPlugin( new ImplicitTilingPlugin() );\n\nconst dracoLoader = new DRACOLoader();\ndracoLoader.setDecoderPath( '/path/to/draco/' );\n\nconst ktx2Loader = new KTX2Loader();\nktx2Loader.setTranscoderPath( '/path/to/basis/' );\nktx2Loader.detectSupport( renderer );\n\n// Options shared across all tile files loaded in this session.\nconst outlineOptions = {\n  showOutline: true,\n  outlineColor: 0x000000,\n};\n\nconst loader = new GLTFLoader( tiles.manager );\nloader.setDRACOLoader( dracoLoader );\nloader.setKTX2Loader( ktx2Loader );\nloader.register( () => new GLTFMeshFeaturesExtension() );\nloader.register( () => new GLTFStructuralMetadataExtension() );\nloader.register( () => new GLTFCesiumRTCExtension() );\nloader.register( parser => new GLTFCesiumPrimitiveOutlineExtension( parser, outlineOptions ) );\n\ntiles.manager.addHandler( /(gltf|glb)$/g, loader );\n```\n\n### With a plain GLTFLoader\n\n```js\nimport { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';\nimport { GLTFCesiumPrimitiveOutlineExtension } from '3dtilesrenderer-outline-plugin';\n\nconst loader = new GLTFLoader();\nloader.register( parser => new GLTFCesiumPrimitiveOutlineExtension( parser, {\n  showOutline: true,\n  outlineColor: 0x1a1a2e,\n} ) );\n\nloader.load( 'model.glb', gltf => {\n  scene.add( gltf.scene );\n} );\n```\n\n## Options\n\n| Option | Type | Default | Description |\n|---|---|---|---|\n| `showOutline` | `boolean` | `true` | Render outlines. Set to `false` to disable on construction. |\n| `outlineColor` | `THREE.Color \\| number \\| string` | `0x000000` | Outline color. Accepts any value that `new THREE.Color()` accepts. Ignored when `outlineMaterial` is set. |\n| `outlineMaterial` | `THREE.Material` | — | Fully custom Three.js material. Overrides `outlineColor`. Pass the same material instance across all tiles to keep draw-call state uniform. |\n\n## Toggling visibility at runtime\n\nThe plugin adds children named `<mesh-name>_outline` to each outlined mesh.\nAfter the tiles are loaded, traverse the tile group to show or hide all outlines:\n\n```js\nfunction setOutlinesVisible( tilesGroup, visible ) {\n  tilesGroup.traverse( obj => {\n    if ( obj.isLineSegments && obj.name.endsWith( '_outline' ) ) {\n      obj.visible = visible;\n    }\n  } );\n}\n\n// Hide outlines\nsetOutlinesVisible( tiles.group, false );\n\n// Show outlines again\nsetOutlinesVisible( tiles.group, true );\n```\n\n## Custom material\n\nTo control line width, opacity, or any other property, supply a custom material:\n\n```js\nimport * as THREE from 'three';\n\nconst mat = new THREE.ShaderMaterial( {\n  uniforms: {\n    diffuse: { value: new THREE.Color( 0x003366 ) },\n    opacity: { value: 0.6 },\n  },\n  vertexShader: `\n    void main() {\n      vec4 clip = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );\n      clip.z -= 0.0002 * clip.w;\n      gl_Position = clip;\n    }\n  `,\n  fragmentShader: `\n    uniform vec3 diffuse;\n    uniform float opacity;\n    void main() {\n      gl_FragColor = vec4( diffuse, opacity );\n    }\n  `,\n  transparent: true,\n  depthTest: true,\n  depthWrite: false,\n} );\n\nloader.register( parser => new GLTFCesiumPrimitiveOutlineExtension( parser, {\n  outlineMaterial: mat,\n} ) );\n```\n\n## Generating outlined 3D Tiles with pg2b3dm\n\nUse the `--add_outlines true` flag:\n\n```bash\npg2b3dm \\\n  -h localhost \\\n  -d postgres \\\n  -U postgres \\\n  -p 5432 \\\n  -c geom \\\n  -t public.sibbe \\\n  -a identificatie \\\n  --keep_projection false \\\n  --add_outlines true\n```\n\nThis embeds `CESIUM_primitive_outline` in every glTF primitive of the generated\n3D Tiles content.\n\n## How it works\n\n1. `afterRoot` is called by Three.js once a glTF file has been fully parsed.\n2. The plugin traverses the resulting scene and checks `parser.associations` to\n   map each `THREE.Mesh` back to its raw glTF JSON primitive definition.\n3. For every primitive that has a `CESIUM_primitive_outline` extension block, the\n   plugin calls `parser.loadAccessor` to load the edge-index buffer (pairs of\n   vertex indices marking which edges to draw).\n4. A `THREE.BufferGeometry` is created that shares the parent mesh position\n   attribute and uses the edge indices.\n5. A `THREE.LineSegments` mesh with a shader material is added as a child of the\n   original mesh.  The shader applies a perspective-correct depth bias\n   (`clip.z -= 0.0002 * clip.w`) that prevents the lines from z-fighting with\n   the solid faces.\n\n## Publishing to npm\n\n1. Set your package name in `package.json` — the default name\n   `3dtilesrenderer-outline-plugin` is available but you may want to scope it\n   (e.g. `@yourorg/3dtilesrenderer-outline-plugin`).\n2. Log in: `npm login`\n3. Publish: `npm publish --access public`\n\nThe package uses `\"type\": \"module\"` and native ES module exports.  Bundlers\n(Vite, webpack, Rollup) and Node.js 18+ import it directly without transpilation.\n\nTo publish a scoped package:\n```json\n{\n  \"name\": \"@bertt/3dtilesrenderer-outline-plugin\"\n}\n```\n\n```bash\nnpm publish --access public\n```\n\n## Compatibility with other plugins\n\nThe plugin follows the same registration pattern as the GLTF extension plugins\nshipped with 3DTilesRendererJS (`GLTFMeshFeaturesExtension`,\n`GLTFStructuralMetadataExtension`).  All plugins coexist on the same\n`GLTFLoader` instance without conflict.\n\n## Sample\n\nSee [`sample/sibbe/`](sample/sibbe/) for a complete MapLibre GL JS viewer that\ncombines OpenFreeMap vector tiles, Mapterhorn terrain, and 3D Tiles of the BAG\nbuilding dataset for Sibbe (Limburg, Netherlands) with black outlines.\n\n## License\n\nMIT\n","readmeFilename":"README.md"}