высокопроизводительный фреймворк WebGL - PullRequest
Новая
       24

высокопроизводительный фреймворк WebGL

1 голос
/ 05 марта 2012

У меня есть сетка с примерно 108000 треугольников, которые должны быть визуализированы с помощью WebGL.

На данный момент я не использую фреймворк, только чистый WebGL.Я уже реализовал распознавание объектов через отображение идентификаторов для выбора с помощью функции обратного вызова, а также базового манипулятора камеры.

Теперь я хочу переключиться на WebGL-фреймворк для решения вопросов обслуживания.

Я уже пробовал Three.js, но он замедлялся для больших сеток.Знаете ли вы подходящий WebGL-фреймворк для больших сеток?

РЕДАКТИРОВАТЬ:

Я пытаюсь отобразить древовидную карту с почти 10000 узлов-кубов и хочу сделать выбор на каждом (общая цель - 100000кубы).

Вот функция, которая строит сцену: 

BP2011.Treemap.prototype.buildScene = function() {
  // ... [create scene, camera and lights]
  var nodesParentNode = new THREE.Object3D();
  scene.add(nodesParentNode);
  var nodes = this._nodes;
  for(var i = 0; i < nodes.length; i++) {
    nodesParentNode.add(nodes[i].buildSceneObject());
  }
  this.threejs.nodesParentNode = nodesParentNode;
};

А вот функция, которая строит один куб: 

BP2011.Treemap.Node.prototype.buildSceneObject = function( buildGeometry, buildMaterial ) {
  // ...
  if (buildGeometry || (self.sceneObject && self.sceneObject.geometry === undefined)) {
    // ... [compute cube position and extension]
    geometry = new THREE.CubeGeometry( 
            maxX - minX, 
            maxY - minY, 
            maxZ - minZ);
  } else {
    geometry = this.sceneObject.geometry;
  }

  mesh = new THREE.Mesh( geometry, new THREE.MeshPhongMaterial({color: 0x4444DD}));

  mesh.position.x = (maxX + minX)/2;
  mesh.position.y = (maxY + minY)/2;
  mesh.position.z = (maxZ + minZ)/2;

  // testing for performance
  mesh.matrixAutoUpdate = false;
  mesh.updateMatrix();
  mesh.geometry.__dirtyVertices = true;
  mesh.geometry.__dirtyElements = true;

  // backwards reference for handling
  this.sceneObject = mesh;
  this.sceneObject.behaviorObject = this;

  return this.sceneObject;
};

Итак, яу меня есть родительский узел с почти 10000 дочерними узлами, потому что я не знал, как делать выборку с одним объектом.

Если у вас есть какие-либо предложения, как решить эту проблему, добро пожаловать.

Я также уже взглянул на scene.js: до 4000 кубов производительность действительно хорошая, но резко падает при определенном количестве кубов (около 4100).Поэтому я думаю, что передал некоторый размер массива.

Ответы [ 2 ]

3 голосов
/ 05 марта 2012

Прежде всего, я хотел бы сказать, что если вы действительно действительно заинтересованы в максимальной производительности, вам, вероятно, не нужна инфраструктура. Шансы на то, что ваш фреймворк будет оптимизирован для вашей конкретной ситуации, невелики, и, если у вас уже есть рендеринг вашего приложения с прямым WebGL, возможно, будет лучше просто попытаться очистить свой собственный код, чтобы сделать его более презентабельным .

Тем не менее, мне очень трудно поверить, что Three.js прервал рендеринг нескольких сотен тысяч треугольников. (Честно говоря, если у вас есть только одна модель, это не так уж и много). Мне было бы любопытно узнать, как вы строите свою сцену Three.js, так как я подозреваю, что могут быть некоторые простые оптимизации, которые помогут вам достичь необходимого уровня производительности.

Если вы все еще хотите попробовать другие фреймворки, я не уверен, как они складываются с точки зрения скорости, но, вероятно, стоит посмотреть:

0 голосов
/ 09 марта 2012

Я согласен с Тодзи, что вам, вероятно, не стоит обращаться к фреймворку, если вы хотите поддерживать скорость. Тем не менее, если вы хотите избавиться от всех особенностей WebGL, вы можете попробовать http://i -am-glow.com , который подойдет вам.

Рендеринг 10000 объектов - это не маленький подвиг - вы получите привязку к процессору и даже если вы просто измените, скажем, матрицу преобразования между каждым вызовом отрисовки. И я думаю, что 10000 изменений состояния действительно в верхнем пределе для компьютера обычного пользователя. Попробуйте найти способ нарисовать несколько блоков за один вызов, например, сохранить матрицы преобразования и их ID в текстуре с плавающей точкой, которую вы выбираете в вершинном шейдере. Или, если все блоки статичны и могут быть объединены в один большой кусок полигонов, используйте текстуру для визуализации их идентификатора.

...