ADN Open CIS
Сообщество программистов Autodesk в СНГ

21/11/2017

Использование PointCloud в Forge Viewer

Использование PointCloud в Forge Viewer возможно, однако не все подходы будут работать. После нескольких попыток, вышло получить комбинацию, которая отлично работает: объект Three.js для вставки в сцену называется THREE.PointCloud, который был переименован в THREE.Points в последних версиях, однако Forge Viewer использует более старую версию (r71). Вы можете использовать THREE.PointCloudMaterial для этого объекта, к сожалению, средству просмотра Viewer это не понравится, поэтому пришлось использовать THREE.ShaderMaterial и реализовать пользовательский шейдер. Также рендер не принимает THREE.BufferGeometry, который принимается только для экземпляров THREE.Mesh. Следовательно, будем использовать чистый объект THREE.Geometry.

Экземпляр PointCloud позволит вам отображать большое количество точек и потенциально анимировать их независимо, сохраняя при этом приличную частоту кадров, по сравнению с отображением точек с использованием отдельных сеток, потому что отображается только один экземпляр.

Чтобы сделать демонстрацию более захватывающей, я использовал один из моих предыдущих примеров, система частиц и использовали PointCloud сущность для визуализации и анимации всех частиц сразу. На видео ниже вы можете увидеть, что даже при увеличении количества частиц до 1 миллиона, вы можете поддерживать относительно высокий FPS, что обеспечивает равномерное моделирование. Я хотел дать каждой частице потенциально различный случайный цвет, поэтому я мог достичь этого, используя атрибуты шейдера. Атрибуты имеют взаимно однозначное сопоставление с вершинами сущности.

Ниже приведен метод, который генерирует PointCloud с пользовательским шейдером:

Код - JavaScript: [Выделить]
  1. /////////////////////////////////////////////////////////////
  2. // Создает 1M вершин PointCloud, поддерживаемый Forge Viewer
  3. //
  4. /////////////////////////////////////////////////////////////
  5. createPointCloud (maxPoints = 1000000) {
  6.  
  7.   // Код Vertex Shader
  8.   const vertexShader = &#96
  9.     attribute vec4 color;
  10.     varying vec4 vColor;
  11.     void main() {
  12.       vec4 vPosition = modelViewMatrix * vec4(position, 1.0);
  13.       gl_Position = projectionMatrix * vPosition;
  14.       gl_PointSize = 4.0;
  15.       vColor = color;
  16.     }
  17.   &#96
  18.  
  19.   // Фрагмент шейдерного кода
  20.   const fragmentShader = &#96
  21.     #ifdef GL_ES
  22.     precision highp float;
  23.     #endif
  24.     varying vec4 vColor;
  25.     void main() {
  26.       gl_FragColor = vColor;
  27.     }
  28.   &#96
  29.  
  30.   // Параметры материала шейдера
  31.   this.shader = {
  32.     side: THREE.DoubleSide,
  33.     depthWrite: false,
  34.     depthTest: false,
  35.     fragmentShader,
  36.     vertexShader,
  37.     attributes:{
  38.       color: {
  39.         type: 'v4',
  40.         value: []
  41.       }
  42.     }
  43.   }
  44.  
  45.   // Инициализация вершин геометрии
  46.   // и цвета атрибутов шейдера
  47.   this.geometry = new THREE.Geometry()
  48.  
  49.   for(var i = 0; i < maxPoints; ++i) {
  50.  
  51.     this.geometry.vertices.push(
  52.       new THREE.Vector3(-5000, -5000, -5000))
  53.  
  54.     this.shader.attributes.color.value.push(
  55.       new THREE.Vector4(
  56.         Math.random(),
  57.         Math.random(),
  58.         Math.random(),
  59.         1.0)
  60.     )
  61.   }
  62.  
  63.   // Код ниже создает материал шейдера
  64.   const shaderMaterial =
  65.     new THREE.ShaderMaterial(
  66.       this.shader)
  67.  
  68.   // Код ниже создает THREE.PointCloud
  69.   this.pointCloud = new THREE.PointCloud(
  70.     this.geometry, shaderMaterial)
  71.  
  72.   // Код ниже добавляет сцену зрителя
  73.   this.viewer.impl.scene.add(this.pointCloud)
  74.  
  75.   // триггеры обновления
  76.   this.viewer.impl.invalidate(true)
  77. }

С полной демонстрацией вы можете ознакомиться в Viewing.Extension.Particle, ссылка на живую демонстрацию и запись демо в действии при работе на полную мощность с миллионом очков в системе. Вам нужно выбрать излучатель частиц, чтобы отобразить его свойства на панели и увеличить значения.

Источник: https://forge.autodesk.com/blog/using-pointcloud-forge-viewer

Автор перевода: Дмитрий Емельянов

Обсуждение: http://adn-cis.org/forum/index.php?topic=

Опубликовано 21.11.2017