当前位置：文江博客话题详情

在 Firefox 中滚动时渲染到 DIV 标记的特定区域

发布于 2025-01-01 23:12:50 字数 1406 浏览 0 评论 0原文

使用覆盖整个视图的画布，我想在 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();
}

我正在使用带有 Nvidia 专有驱动程序的 Ubuntu 11.10。

其背后的动机是我想要有多个占位符并将不同的对象渲染到每个占位符中。为什么我不使用多个画布？

初始化一张画布更快
将一个特定对象绘制到多个占位符时，对象数据是共享的。与多个画布不同，我们无法共享状态。

感谢您的帮助。

原文

Using a canvas covering entire view I want to draw a rotating triangle to the area marked by a div container.

However Firefox does not always draw the triangle into the div placeholder because of scrolling. See the picture (ignore the repeating background picture) and the demo. Chromium renders the triangle correctly while scrolling.

Is my code wrong or the Firefox implementation is not fast enough to render the triangle at the correct position when scrolling?

Algorithm:

Initialization:

create large canvas covering entire view, get WebGL context
allocate buffers for rendering triangle

Rendering loop:

If the div placeholder is in the current view then:

set up rendering coordinates with gl.viewport to match the div placeholder's position
render the triangle (the actual orientation is derived from Date())

Code:

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();
}

I am using Ubuntu 11.10 with Nvidia proprietary drivers.

The motivation behind this is that I want to have multiple placeholders and render different objects into each one of them.
Why I am not using multiple canvases?

Initializing one canvas is faster
When drawing one specific object to multiple placeholders, the objects data are shared. Unlike the multiple canvases we can't share state.

Thank you for your help.

分享到QQ

分享到微博