Merge pull request #68 from pnext/develop

Release 0.2.1

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@pnext/three-loader",
   "private": false,
-  "version": "0.2.0",
+  "version": "0.2.1",
   "description": "Potree loader for ThreeJS, converted and adapted to Typescript.",
   "contributors": [
     "Hugo Campos <[email protected]>"
@@ -27,7 +27,7 @@
   },
   "dependencies": {},
   "peerDependencies": {
-    "three": "^0.116.1"
+    "three": "^0.117.1"
   },
   "devDependencies": {
     "@babel/core": "^7.9.0",
@@ -47,7 +47,7 @@
     "size-plugin": "^2.0.1",
     "standard-version": "7.1.0",
     "style-loader": "^1.0.2",
-    "three": "0.116.1",
+    "three": "0.117.1",
     "three-orbit-controls": "^82.1.0",
     "ts-loader": "^6.2.2",
     "tslint": "^6.1.1",

src/index.ts

@@ -3,6 +3,7 @@ export * from './point-attributes';
 export * from './point-cloud-octree-geometry-node';
 export * from './point-cloud-octree-geometry';
 export * from './point-cloud-octree-node';
+export * from './point-cloud-octree-picker';
 export * from './point-cloud-octree';
 export * from './point-cloud-tree';
 export * from './potree';

src/materials/blur-material.ts

@@ -5,8 +5,6 @@ import { IUniform } from './types';
 
 export interface IBlurMaterialUniforms {
   [name: string]: IUniform<any>;
-  near: IUniform<number>;
-  far: IUniform<number>;
   screenWidth: IUniform<number>;
   screenHeight: IUniform<number>;
   map: IUniform<Texture | null>;
@@ -16,8 +14,6 @@ export class BlurMaterial extends ShaderMaterial {
   vertexShader = require('./shaders/blur.vert');
   fragmentShader = require('./shaders/blur.frag');
   uniforms: IBlurMaterialUniforms = {
-    near: { type: 'f', value: 0 },
-    far: { type: 'f', value: 0 },
     screenWidth: { type: 'f', value: 0 },
     screenHeight: { type: 'f', value: 0 },
     map: { type: 't', value: null },

src/materials/point-cloud-material.ts

@@ -1,19 +1,31 @@
 import {
   AdditiveBlending,
+  BufferGeometry,
+  Camera,
   Color,
+  Geometry,
   LessEqualDepth,
+  Material,
   NearestFilter,
   NoBlending,
+  PerspectiveCamera,
   RawShaderMaterial,
-  Texture
+  Scene,
+  Texture,
+  Vector3,
+  WebGLRenderer,
 } from 'three';
 import {
   DEFAULT_MAX_POINT_SIZE,
   DEFAULT_MIN_POINT_SIZE,
   DEFAULT_RGB_BRIGHTNESS,
   DEFAULT_RGB_CONTRAST,
   DEFAULT_RGB_GAMMA,
+  PERSPECTIVE_CAMERA,
 } from '../constants';
+import { PointCloudOctree } from '../point-cloud-octree';
+import { PointCloudOctreeNode } from '../point-cloud-octree-node';
+import { byLevelAndIndex } from '../utils/utils';
 import { DEFAULT_CLASSIFICATION } from './classification';
 import { ClipMode, IClipBox } from './clipping';
 import { PointColorType, PointOpacityType, PointShape, PointSizeType, TreeType } from './enums';
@@ -41,7 +53,6 @@ export interface IPointCloudMaterialUniforms {
   clipBoxes: IUniform<Float32Array>;
   depthMap: IUniform<Texture | null>;
   diffuse: IUniform<[number, number, number]>;
-  far: IUniform<number>;
   fov: IUniform<number>;
   gradient: IUniform<Texture>;
   heightMax: IUniform<number>;
@@ -53,7 +64,6 @@ export interface IPointCloudMaterialUniforms {
   level: IUniform<number>;
   maxSize: IUniform<number>;
   minSize: IUniform<number>;
-  near: IUniform<number>;
   octreeSize: IUniform<number>;
   opacity: IUniform<number>;
   pcIndex: IUniform<number>;
@@ -126,11 +136,14 @@ const CLIP_MODE_DEFS = {
 };
 
 export class PointCloudMaterial extends RawShaderMaterial {
+  private static helperVec3 = new Vector3();
+
   lights = false;
   fog = false;
   numClipBoxes: number = 0;
   clipBoxes: IClipBox[] = [];
   visibleNodesTexture: Texture | undefined;
+  private visibleNodeTextureOffsets = new Map<string, number>();
 
   private _gradient = SPECTRAL;
   private gradientTexture: Texture | undefined = generateGradientTexture(this._gradient);
@@ -149,7 +162,6 @@ export class PointCloudMaterial extends RawShaderMaterial {
     clipBoxes: makeUniform('Matrix4fv', [] as any),
     depthMap: makeUniform('t', null),
     diffuse: makeUniform('fv', [1, 1, 1] as [number, number, number]),
-    far: makeUniform('f', 1.0),
     fov: makeUniform('f', 1.0),
     gradient: makeUniform('t', this.gradientTexture || new Texture()),
     heightMax: makeUniform('f', 1.0),
@@ -162,7 +174,6 @@ export class PointCloudMaterial extends RawShaderMaterial {
     level: makeUniform('f', 0.0),
     maxSize: makeUniform('f', DEFAULT_MAX_POINT_SIZE),
     minSize: makeUniform('f', DEFAULT_MIN_POINT_SIZE),
-    near: makeUniform('f', 0.1),
     octreeSize: makeUniform('f', 0),
     opacity: makeUniform('f', 1.0),
     pcIndex: makeUniform('f', 0),
@@ -190,7 +201,6 @@ export class PointCloudMaterial extends RawShaderMaterial {
 
   @uniform('bbSize') bbSize!: [number, number, number];
   @uniform('depthMap') depthMap!: Texture | undefined;
-  @uniform('far') far!: number;
   @uniform('fov') fov!: number;
   @uniform('heightMax') heightMax!: number;
   @uniform('heightMin') heightMin!: number;
@@ -200,7 +210,7 @@ export class PointCloudMaterial extends RawShaderMaterial {
   @uniform('intensityRange') intensityRange!: [number, number];
   @uniform('maxSize') maxSize!: number;
   @uniform('minSize') minSize!: number;
-  @uniform('near') near!: number;
+  @uniform('octreeSize') octreeSize!: number;
   @uniform('opacity', true) opacity!: number;
   @uniform('rgbBrightness', true) rgbBrightness!: number;
   @uniform('rgbContrast', true) rgbContrast!: number;
@@ -280,6 +290,8 @@ export class PointCloudMaterial extends RawShaderMaterial {
       this.visibleNodesTexture = undefined;
     }
 
+    this.clearVisibleNodeTextureOffsets();
+
     if (this.classificationTexture) {
       this.classificationTexture.dispose();
       this.classificationTexture = undefined;
@@ -291,6 +303,10 @@ export class PointCloudMaterial extends RawShaderMaterial {
     }
   }
 
+  clearVisibleNodeTextureOffsets(): void {
+    this.visibleNodeTextureOffsets.clear();
+  }
+
   updateShaderSource(): void {
     this.vertexShader = this.applyDefines(require('./shaders/pointcloud.vert').default);
     this.fragmentShader = this.applyDefines(require('./shaders/pointcloud.frag').default);
@@ -477,6 +493,107 @@ export class PointCloudMaterial extends RawShaderMaterial {
       uObj.value = value;
     }
   }
+
+  updateMaterial(
+    octree: PointCloudOctree,
+    visibleNodes: PointCloudOctreeNode[],
+    camera: Camera,
+    renderer: WebGLRenderer,
+  ): void {
+    const pixelRatio = renderer.getPixelRatio();
+
+    if (camera.type === PERSPECTIVE_CAMERA) {
+      this.fov = (camera as PerspectiveCamera).fov * (Math.PI / 180);
+    } else {
+      this.fov = Math.PI / 2; // will result in slope = 1 in the shader
+    }
+    this.screenWidth = renderer.domElement.clientWidth * pixelRatio;
+    this.screenHeight = renderer.domElement.clientHeight * pixelRatio;
+
+    const maxScale = Math.max(octree.scale.x, octree.scale.y, octree.scale.z);
+    this.spacing = octree.pcoGeometry.spacing * maxScale;
+    this.octreeSize = octree.pcoGeometry.boundingBox.getSize(PointCloudMaterial.helperVec3).x;
+
+    if (
+      this.pointSizeType === PointSizeType.ADAPTIVE ||
+      this.pointColorType === PointColorType.LOD
+    ) {
+      this.updateVisibilityTextureData(visibleNodes);
+    }
+  }
+
+  private updateVisibilityTextureData(nodes: PointCloudOctreeNode[]) {
+    nodes.sort(byLevelAndIndex);
+
+    const data = new Uint8Array(nodes.length * 4);
+    const offsetsToChild = new Array(nodes.length).fill(Infinity);
+
+    this.visibleNodeTextureOffsets.clear();
+
+    for (let i = 0; i < nodes.length; i++) {
+      const node = nodes[i];
+
+      this.visibleNodeTextureOffsets.set(node.name, i);
+
+      if (i > 0) {
+        const parentName = node.name.slice(0, -1);
+        const parentOffset = this.visibleNodeTextureOffsets.get(parentName)!;
+        const parentOffsetToChild = i - parentOffset;
+
+        offsetsToChild[parentOffset] = Math.min(offsetsToChild[parentOffset], parentOffsetToChild);
+
+        // tslint:disable:no-bitwise
+        const offset = parentOffset * 4;
+        data[offset] = data[offset] | (1 << node.index);
+        data[offset + 1] = offsetsToChild[parentOffset] >> 8;
+        data[offset + 2] = offsetsToChild[parentOffset] % 256;
+        // tslint:enable:no-bitwise
+      }
+
+      data[i * 4 + 3] = node.name.length;
+    }
+
+    const texture = this.visibleNodesTexture;
+    if (texture) {
+      texture.image.data.set(data);
+      texture.needsUpdate = true;
+    }
+  }
+
+  static makeOnBeforeRender(
+    octree: PointCloudOctree,
+    node: PointCloudOctreeNode,
+    pcIndex?: number,
+  ) {
+    return (
+      _renderer: WebGLRenderer,
+      _scene: Scene,
+      _camera: Camera,
+      _geometry: Geometry | BufferGeometry,
+      material: Material,
+    ) => {
+      const pointCloudMaterial = material as PointCloudMaterial;
+      const materialUniforms = pointCloudMaterial.uniforms;
+
+      materialUniforms.level.value = node.level;
+      materialUniforms.isLeafNode.value = node.isLeafNode;
+
+      const vnStart = pointCloudMaterial.visibleNodeTextureOffsets.get(node.name);
+      if (vnStart !== undefined) {
+        materialUniforms.vnStart.value = vnStart;
+      }
+
+      materialUniforms.pcIndex.value =
+        pcIndex !== undefined ? pcIndex : octree.visibleNodes.indexOf(node);
+
+      // Note: when changing uniforms in onBeforeRender, the flag uniformsNeedUpdate has to be
+      // set to true to instruct ThreeJS to upload them. See also
+      // https://github.com/mrdoob/three.js/issues/9870#issuecomment-368750182.
+
+      // Remove the cast to any after updating to Three.JS >= r113
+      (material as any) /*ShaderMaterial*/.uniformsNeedUpdate = true;
+    };
+  }
 }
 
 function makeUniform<T>(type: string, value: T): IUniform<T> {

src/materials/shaders/blur.frag

@@ -5,8 +5,6 @@ uniform mat4 projectionMatrix;
 
 uniform float screenWidth;
 uniform float screenHeight;
-uniform float near;
-uniform float far;
 
 uniform sampler2D map;
 

src/materials/shaders/pointcloud.frag

@@ -15,8 +15,6 @@ uniform float blendHardness;
 uniform float blendDepthSupplement;
 uniform float fov;
 uniform float spacing;
-uniform float near;
-uniform float far;
 uniform float pcIndex;
 uniform float screenWidth;
 uniform float screenHeight;

src/materials/shaders/pointcloud.vert

@@ -25,8 +25,6 @@ uniform float screenWidth;
 uniform float screenHeight;
 uniform float fov;
 uniform float spacing;
-uniform float near;
-uniform float far;
 
 #if defined use_clip_box
 	uniform mat4 clipBoxes[max_clip_boxes];