WebGL——上下文创建和绘图缓冲区展现（翻译）

wxb880114

浏览: 681053 次
性别:
来自: 上海

最近访客更多访客>>

cjf2773

agustins

flatcsun

jojooo

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

Web前端_WebGL

webgl

https://www.khronos.org/registry/webgl/specs/1.0/ 原文地址

2 Context Creation and Drawing Buffer Presentation

    在使用WebGL API前，我们必须从给定的HTMLCanvasElement元素中获取WebGLRenderingContext对象，该对象是用于管理OpenGL的状态和绘画缓冲的呈现，它必须在上下文创建的时候创建。我们可以提供绘画缓冲区的配置选项参数。否则，在使用绘画缓冲区时会按照默认值。在HTML页面合成操作前应立即将绘画缓冲区提交到HTML页面合成器。这一操作仅仅适合在最后一次合成操作以后，绘画缓冲区参数被修改的时候。

2.1 The canvas Element

    创建一个WebGLRenderingContext对象应当通过精确的大小写敏感的字符串' webgl”调用一个给定的HTMLCanvasElement[CANVAS]对象的getContext()方法。当第一次调用时，创建和返回一个WebGLRenderingContext对象，在此同时，绘图缓冲区也被创建好。随后只要调用getContext()输入相同的字符串就会返回相同的结果。
    HTML Canvas规范[CANVAS]定义了当试图在相同的Canvas元素中获取两个或更多的不兼容的上下文的行为。
    除了字符串参数（‘webgl’）getContext()方法还有第二个参数，该参数包含WebGLContextAttributes对象中用于创建绘图缓冲区的配置参数。（后面会详细讲）
    第二个参数不是必须的。WebGL的实现并不保证他将会照做了,但应该尽最大的努力来按照参数创建。当组合属性不能支持WebGL的实现或图形硬件时，是不会导致创建WebGLRenderingContext的失败。WebGLRenderingContext中的getContextAttributes() 方法中获取的属性参数才是真正创建上下文中需要的。


2.2 The Drawing Buffer

    绘图缓冲区是在创建WebGLRenderingContext对象一同创建的。下表显示了所有的缓冲区,组成了绘画缓冲区,连同他们的最小尺寸和他们是否被定义或不是默认情况下。绘画缓冲区的大小,须由HTMLCanvasElement的属性宽度和高度决定的。也显示了当首次创建或大小被修改时需要清理
绘图缓冲区时的值。

    如果请求的宽度或高度不能满足,要么当绘画缓冲第一次被创建或这改变HTMLCanvasElement宽度和高度属性,不然绘图缓冲区就会创建与较小的尺寸。实际使用的维度都依赖于实现的,并且不能保证一个缓冲区径比相同的将被创建。
    实际绘图缓冲区大小可以从drawingBufferWidth和drawingBufferHeight属性获取。
    可选的WebGLContextAttributes对象可以用来修改参数不论是否定义了该缓冲区。它也可以被用来定义颜色缓冲区是否包含alpha通道。如果定义了,使用的是alpha通道HTML合成器来结合与其余的页面颜色缓冲区。WebGLContextAttributes的对象仅用在第一次调用getContext。没有提供修改绘图缓冲区创建后的工具。
    在HTML页面合成操作前应立即将绘画缓冲区提交到HTML页面合成器。这一操作仅仅适合在最后一次合成操作以后，绘画缓冲区参数被修改的时候。绘图缓冲区是用于合成实现时应确保所有的渲染操作已经被刷新到绘图缓冲区。默认情况下,合成后的绘画缓冲区应被还原到默认值。
    这种默认行为可以更改设置 WebGLContextAttributes对象的preserveDrawingBuffer属性。如果这个标志为true,绘图缓冲区予以保留，直到我们清除或者覆盖它们的时候为止。如果这个标志为false,尝试执行操作使用这个上下文作为源图像，函数返回后呈现可能导致未定义行为，这包括readPixels或toDataURL调用,或者使用这个上下文作为源图像的另一个上下文的texImage2D或drawImage调用。

2.3 The WebGL Viewport

    OpenGL将管理矩形视口作为本身状态的一部分，矩形视口是为绘图缓冲区的渲染结果提供展现的场地。在创建WebGL上下文时，视口初始化为一个矩形，起点(0,0)和宽度和高度相同的(canvas.width、canvas.height)。
     在调整canvas元素大小响应时，一个WebGL实现不得影响OpenGL的状态窗口。

例1：
   注意：如果一个WebGL程序不包含逻辑来设置窗口，在调整canvas大小时，它并不会得到妥善处理。下面的ECMAScript示例说明了如何使用一个WebGL程序可以通过编程调整canvas大小。
      var canvas = document.getElementById('canvas1');
     var gl = canvas.getContext('webgl');
     canvas.width = newWidth;
     canvas.height = newHeight;
     gl.viewport(0, 0, canvas.width, canvas.height);

   原理阐述：自动设置视口会干扰手动设置的应用程序。应用程序应该使用onresize方法依次处理canvas大小的响应和设置OpenGL视口。

2.4 Premultiplied Alpha, Canvas APIs and texImage2D

   OpneGL API允许应用程序在渲染时修改混合模式，由于这个原因在解析绘图缓冲区时允许控制alpha值。可以看看WebGLContextAttributes部分的premultipliedAlpha参数。
    HTML的canvas APIs toDataURL和drawImage必须遵寻premultipliedAlpha上下文创建参数。当针对一个已呈现WebGL内容的canvas调用toDataURL方法时，那么如果请求的图像格式没有指定premultiplied阿尔法和WebGL上下文有premultipliedAlpha参数设置为true，那么像素值必须是非乘积的。i.e.颜色通道除以alpha通道。注意,这个操作是有损的。、
   给CanvasRenderingContext2D的drawImage方法传递一个WebGL-rendered参数，在绘图操作时，根据CanvasRenderingContext2D实现的自左乘需求，不必修改呈现WebGL的内容。
   当给textImage2D传递WebGL-rendered canvas时，然后根据传递的canvas上下文创建参数premultipliedAlpha的设置和像素存储目标参数UNPACK_PREMULTIPLY_ALPHA_WEBGL ，像素数据可能需要修改或应用premultiplied形式。