Используя холст, охватывающий весь вид, я хочу нарисовать вращающийся треугольник в области, отмеченной контейнером div.
Однако Firefox не всегда рисует треугольник в заполнителе div из-за прокрутки.См. изображение (игнорируйте повторяющийся фоновый рисунок) и демо .Chromium правильно отображает треугольник во время прокрутки.
Мой код неверен или реализация Firefox недостаточно быстра, чтобы отобразить треугольник в правильном положении при прокрутке?
Алгоритм:
Инициализация:
- создание большого холста, охватывающего весь вид, получение контекста WebGL
- выделение буферов для треугольника рендеринга
цикл рендеринга:
Если местозаполнитель div находится в текущем представлении, то:
- установите координаты рендеринга с помощью gl.viewport в соответствии с положением местозаполнителя div
- рендеринг треугольника(фактическая ориентация получена из Date ())
Код:
var triangle;
var gl;
function drawScenes() {
gl.clear(gl.COLOR_BUFFER_BIT);
if(isScrolledIntoView('#div0')) {
// set up viewport for rendering on top of the div placeholder
var docViewTop = $(window).scrollTop();
gl.viewport(0, $('#canvas').height() + docViewTop - 400, 200, 200);
triangle.render();
}
requestAnimFrame(drawScenes);
}
function start() {
createOverlayCanvas('canvas');
gl = initGL('canvas');
triangle = new Triangle(gl); //sets up the buffers
drawScenes();
}
Я использую Ubuntu 11.10 с проприетарными драйверами Nvidia.
Мотивация в том, что я хочу иметь несколько заполнителей и рендерить разные объекты в каждый из них.Почему я не использую несколько холстов?
- Инициализация одного холста происходит быстрее
- При рисовании одного конкретного объекта в нескольких заполнителях данные объектов становятся общими.В отличие от нескольких холстов, мы не можем разделить состояние.
Спасибо за вашу помощь.