Использование 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 с пользовательским шейдером:
- /////////////////////////////////////////////////////////////
- // Создает 1M вершин PointCloud, поддерживаемый Forge Viewer
- //
- /////////////////////////////////////////////////////////////
- createPointCloud (maxPoints = 1000000) {
- // Код Vertex Shader
- const vertexShader = `
- attribute vec4 color;
- varying vec4 vColor;
- void main() {
- vec4 vPosition = modelViewMatrix * vec4(position, 1.0);
- gl_Position = projectionMatrix * vPosition;
- gl_PointSize = 4.0;
- vColor = color;
- }
- `
- // Фрагмент шейдерного кода
- const fragmentShader = `
- #ifdef GL_ES
- precision highp float;
- #endif
- varying vec4 vColor;
- void main() {
- gl_FragColor = vColor;
- }
- `
- // Параметры материала шейдера
- this.shader = {
- side: THREE.DoubleSide,
- depthWrite: false,
- depthTest: false,
- fragmentShader,
- vertexShader,
- attributes:{
- color: {
- type: 'v4',
- value: []
- }
- }
- }
- // Инициализация вершин геометрии
- // и цвета атрибутов шейдера
- this.geometry = new THREE.Geometry()
- for(var i = 0; i < maxPoints; ++i) {
- this.geometry.vertices.push(
- new THREE.Vector3(-5000, -5000, -5000))
- this.shader.attributes.color.value.push(
- new THREE.Vector4(
- Math.random(),
- Math.random(),
- Math.random(),
- 1.0)
- )
- }
- // Код ниже создает материал шейдера
- const shaderMaterial =
- new THREE.ShaderMaterial(
- this.shader)
- // Код ниже создает THREE.PointCloud
- this.pointCloud = new THREE.PointCloud(
- this.geometry, shaderMaterial)
- // Код ниже добавляет сцену зрителя
- this.viewer.impl.scene.add(this.pointCloud)
- // триггеры обновления
- this.viewer.impl.invalidate(true)
- }
С полной демонстрацией вы можете ознакомиться в Viewing.Extension.Particle, ссылка на живую демонстрацию и запись демо в действии при работе на полную мощность с миллионом очков в системе. Вам нужно выбрать излучатель частиц, чтобы отобразить его свойства на панели и увеличить значения.
Источник: https://forge.autodesk.com/blog/using-pointcloud-forge-viewer
Обсуждение: http://adn-cis.org/forum/index.php?topic=
Опубликовано 21.11.2017