Для петель беспокоит рендеринг

Question

У меня есть довольно простые 3D-объекты (в основном THREE.Sphere, который является родителем 1-30 других THREE.Sphere s, с цветом RGB и без текстуры) для отображения в несколько анимации в реальном времени.

Отрисовка выполняется в кратчайшие сроки, но у меня есть простой итеративный расчет (for-loops), которые нарушают мои возможности отображения. рендеринга само по себе не является проблемой, но вычисление для следующего кадра вершин, что вызывает боль

Значение, когда я просто запустить сценарий, я могу видеть, что for-loops занимает слишком много времени, чтобы вычислить , и именно тогда он переходит в секцию рендеринга, которая выполняется в кратчайшие сроки.

Я думал о решении этой проблемы в параллельной вычислительной манере - работает поток (рабочий, независимо от того, что он вызывается в JS), который будет вычислять for-loop, но я думал, что, учитывая мой недостаток опыта в компьютерных графиках, возможно, существует более «графический» способ сделать это. Это более элегантный/улучшенный/естественный способ решения такой фундаментальной проблемы проектирования компьютерной графики.

Answer 1

Это основная идея, которую я использую для выполнения длительных медленных вычислений, которые не попадают в таймер сторожевого таймера и не боятся браузера или скорости рендеринга. Основная идея заключается в том, что вы используете генератор javascript, который позволяет вам выполнить вычисление в середине вычисления и продолжить позже. Затем я запускаю насос генератора по тайм-ауту. Ключом к этому методу является оператор «yield», который сохраняет состояние функции и возвращается в ожидании будущего вызова функции .next(). (Кстати это демо-код, возможно, придется повторно arraged обрабатывать firefoxs опережающие ссылки)

//function Chain represents the slow code 
function *Chain() 
{ 
    for(i=0;i<1000000;i++) //this represents a long slow calculation 
    { 
     if(i%100==0)  //on occassion, yield 
      yield; 
    } 

} 
console.log("starting chain"); 
gChain=Chain(); //startup and get the next generator pointer 
timeout = setTimeout(function() { ChainStart(); }, 1); 
//function ChainStart is a pump that runs the generator using a timeout chain so other threads can run 
function ChainStart(){     
     if(gChain.next().done){ 
      clearTimeout(timeout); 
      console.log("endingchain");     
     } 
     else{      
      clearTimeout(timeout); 
      timeout = setTimeout(function() { ChainStart(); }, 1); 
     } 
}