如何推送/弹出上下文的2d / 3d转换,而不是完整的上下文?

时间:2016-02-20 14:05:01

标签: 3d html5-canvas webgl

到目前为止我只使用

var context = canvas.getContext('2d');

但是将来的某个时候我也会使用3d,所以我正在寻求更多的理解来做好准备。

OpenGL中的glPushMatrix()调用非常便宜,标准做法是将代码段与glPushMatrix() - glPopMatrix()括起来,但只会受到轻微的惩罚。

我把这个习惯带到了画布中的2d上下文,并使用context.save() - context.restore()对包装代码块,但这样做至少有一个问题{{3 }}。最简单的解决方案是避免这种做法,只需明确设置转换。

这在2d中不会太糟糕,但它会违反标准的3D编码。所以我想知道:

  • 是否可以推送/弹出上下文的2d转换?
  • 是否可以推送/弹出上下文的3d转换?

1 个答案:

答案 0 :(得分:0)

glPushMatrixglPopMatrix已有25年历史,已弃用很久

是的,你在许多OpenGL示例中看到它们,它们被认为是旧的不良做法。

WebGL基于现代OpenGL实践。因此,它只是一个栅格化API,不包括glPushMatrixglPopMatrix。相反,它只提供着色器,由您自己提供自己的数学库。

请参阅http://webglfundamentals.org

所以

  

是否可以推送/弹出上下文的2d转换?

是的,context.savecontext.restore执行此操作。他们还保存和恢复所有其他上下文状态,如当前fillStylestrokeStylelineWidthglobalCompositingOperation等等,...

如果您只想保存/恢复转换本身,答案是“不”它没有内置但是您可以自己实现它。 Here's some code that wraps the canvas to track the transformation提供更快的保存/恢复是非常重要的。它的重点仅在于提供当前变换,因为CanvasRenderingContext2D api不提供查询当前变换的方法,而某些应用程序需要进行冲突检测或其他事情。

使用类似的代码,您可以轻松提供只有push和pop的转换。是否会增加净速度尚不清楚,因为它必须在JavaScript中为所有转换命令进行矩阵数学运算(例如:translaterotatescale

  

是否可以推送/弹出上下文的3d转换?

WebGL中没有这样的东西。如果你想要写你自己的数学库并添加一个推送和弹出它或找到一个已经具有该功能。你是否认为答案是否定(在WebGL中没有这样的东西)或者是(你可以自己实现)取决于你。