第二章 創(chuàng)建webGL設(shè)備和繪制緩沖區(qū)呈現(xiàn) Context Creation and Drawing Buffer Presentation
??? 在開(kāi)始使用webGL API之前您先要從現(xiàn)有的HTML Canvas控件中創(chuàng)建一個(gè)WebGLRenderingContext對(duì)象,有關(guān)HTML Canvas的知識(shí)將在后邊進(jìn)行介紹

WebGLRenderingContext實(shí)例對(duì)象管理OpenGL狀態(tài)并將繪圖的數(shù)據(jù)放到緩沖區(qū)里,緩沖區(qū)也需要在這時(shí)候創(chuàng)建

在創(chuàng)建緩沖區(qū)時(shí)您也可以提供配置參數(shù),否則將使用默認(rèn)參數(shù),有關(guān)默認(rèn)配置在該文檔的其它部分介紹

繪制緩沖區(qū)將在HTML混合操作開(kāi)始之前立即渲染到HTML混合器中,但只有當(dāng)自上次HTML混合操作之后緩沖區(qū)有修改時(shí)才會(huì)這樣

2.1 畫(huà)布元素 The canvas Element
??? 通過(guò)調(diào)用現(xiàn)有的HTMLCanvasElement實(shí)例的getContext("webgl")方法可以得到WebGLRenderingContext對(duì)象,參數(shù)需明確指定為"webgl",并且區(qū)分大小寫(xiě).(實(shí)際試驗(yàn)時(shí),在現(xiàn)階段chrome需要傳遞參數(shù)experimental-webgl才可以創(chuàng)建,待WEBGL規(guī)范正式頒發(fā)后應(yīng)該會(huì)改回webgl)

第一次調(diào)用這個(gè)方法時(shí),一個(gè)WebGLRenderingContext對(duì)象將被創(chuàng)建并返回,同時(shí)一個(gè)繪圖緩沖區(qū)也將同時(shí)創(chuàng)建,重復(fù)調(diào)用getContext方法并使用相關(guān)的參數(shù)'webgl',則返回上次創(chuàng)建的對(duì)象并不會(huì)創(chuàng)建新的實(shí)例

HTML Canvas規(guī)范中定義了試圖在同一個(gè)Canvas中創(chuàng)建兩個(gè)或以上不兼容設(shè)備時(shí)的行為

???? 如果調(diào)用時(shí)getContext方法時(shí)傳遞了第二個(gè)參數(shù),那么這個(gè)參數(shù)一定是WebGLContextAttributes類型的對(duì)象,它包含的配置將在創(chuàng)建緩沖區(qū)時(shí)使用,有關(guān)WebGLContextAttributes細(xì)節(jié)請(qǐng)點(diǎn)擊這里.

???? 混合(alpha),深度(depth),模板(stencil)和抗矩齒(antialias)特性都可以接收,但都不是必須的.webGL不保證它們一定遵守它們,但是會(huì)盡最大努力去工作.

即使特性的組合不受webGL支持時(shí),或者不受顯卡支持的時(shí)候,webGL在創(chuàng)建WebGLRenderingContext對(duì)象時(shí)也不會(huì)報(bào)錯(cuò).創(chuàng)建WebGLRenderingContext時(shí)使用的特性可以通過(guò)調(diào)用WebGLRenderingContext對(duì)象的getContextAttributes()方法獲得.透明像素(premultipliedAlpha)和緩沖區(qū)保護(hù)(preserveDrawingBuffer)功能必須實(shí)現(xiàn).

???? 重復(fù)使用參數(shù)'webgl'調(diào)用getContext方法時(shí),已經(jīng)存在的WebGLContextAttributes對(duì)象,如果有的話,將被忽略.

2.2 繪制緩沖區(qū) The Drawing Buffer

???? 在調(diào)用API方法后緩沖區(qū)將被立即渲染,所以在創(chuàng)建WebGLRenderingContext對(duì)象后,應(yīng)緊接著定義緩沖區(qū).下表展示了不同類型緩沖區(qū)組成的繪制緩沖區(qū),還有它們的大小,以及是否有默認(rèn)值.整個(gè)繪制緩沖區(qū)的大小取決于HTMLCanvasElement的寬和高.下表同時(shí)展示了這些緩沖區(qū)首次創(chuàng)建時(shí),或者當(dāng)尺寸變化后,或者創(chuàng)建保護(hù)緩沖區(qū)參數(shù)設(shè)置為false時(shí),這些緩沖區(qū)將使用的默認(rèn)值.

???? 如果width和height屬性沒(méi)有提供,則不論緩存沖是首次創(chuàng)建,還是HTMLCanvasElement對(duì)象的寬高發(fā)生變化,一個(gè)小面積的緩沖區(qū)都將被創(chuàng)建.這個(gè)緩沖區(qū)的建立取決于webAPI具體實(shí)現(xiàn).并且不保證它們總能符合預(yù)期的長(zhǎng)寬比例.實(shí)際使用的緩沖區(qū)的大小可以通過(guò)drawingBufferWidth 和drawingBufferHeight 屬性獲得.

By default, the buffers shall be the size shown below.可選參數(shù)WebGLContextAttributes可以用來(lái)修改無(wú)論是否已經(jīng)定義的緩沖.它也可以用來(lái)定義顏色緩沖區(qū)是否包含透明通道.如果有定義透明通道那么HTML混合器將使用透明通道與頁(yè)面其余部分合并.WebGLContextAttributes對(duì)象只能在首次調(diào)用getContext時(shí)使用,在繪制緩沖區(qū)建立之后將再?zèng)]有機(jī)會(huì)修改它.

???? 在HTML混合操作之前webGL將它的繪制緩沖區(qū)渲染到HTML中,但是只有自最后混合操作后緩沖區(qū)有修改時(shí)才這樣.在繪制緩沖區(qū)渲染之前,需要確保所有的渲染操作都flush到繪制緩沖區(qū).默認(rèn)情況下,混合操作之后,繪制緩沖區(qū)的將被清空成上表中的默認(rèn)值.

???? 這個(gè)默認(rèn)行為可以通過(guò)WebGLContextAttributes對(duì)象的preserveDrawingBuffer屬性進(jìn)行修改.如果這個(gè)標(biāo)識(shí)為true,緩沖區(qū)的內(nèi)容將被保留,直到用戶手動(dòng)清除或者覆蓋.如果該標(biāo)識(shí)為false,那么在渲染方法返回后,以此context為源圖像進(jìn)行一些操作時(shí)將會(huì)導(dǎo)致undefined錯(cuò)誤,這些操作包括readPixels方法或者toDataURL 方法.或者把它作為另外一個(gè)context的texImage2D或drawImage時(shí)(進(jìn)行上述操作也將導(dǎo)致undefined錯(cuò)誤).

雖然有時(shí)候保留緩沖區(qū)很方便,但是在某些平臺(tái)上運(yùn)行時(shí)將可能導(dǎo)致性能損失.只要有可能就應(yīng)當(dāng)把它(preserveDrawingBuffer)設(shè)置為false,包括使用同步技術(shù)獲取繪制緩沖區(qū)得到繪制緩沖區(qū)內(nèi)容.當(dāng)需要調(diào)用一系列的方法渲染同一個(gè)繪制緩沖區(qū)時(shí),您可以使用Framebuffer Object對(duì)象.

???? 當(dāng)開(kāi)發(fā)人員無(wú)法獲取緩沖區(qū)內(nèi)容的一些情況下,webGL都將保證去優(yōu)化您對(duì)緩沖區(qū)執(zhí)行的指定的清除操作(clear operation).例如,當(dāng)開(kāi)發(fā)人員明確指定了清除操作,但這并非必須時(shí)(Implementations may optimize away the required implicit clear operation of the Drawing Buffer as long as a guarantee can be made that the author cannot gain access to buffer contents from another process. For instance, if the author performs an explicit clear then the implicit clear is not needed.)

2.3 WebGL視圖 The WebGL Viewport

???? OpenGL管理一個(gè)矩形的視圖作為它狀態(tài)(state)的一部分.OpenGL狀態(tài)(state)在繪制緩沖區(qū)里定義了一塊存放渲染結(jié)果的區(qū)域.webGL Context創(chuàng)建后,視圖緊接著進(jìn)行了初始化,并且以(0,0)為源點(diǎn),Canvas的寬高作為視圖的寬和高(Canvas.width,Canvas.height).

???? Canvas大小變化時(shí),WebGL不應(yīng)該影響OpenGL Viewport的狀態(tài).

???? 如果webGL程序中沒(méi)有設(shè)置視圖的邏輯,那么它將不處理Canvas大小變化事件,下邊的EAMCScript代碼示例演示了如何通過(guò)代碼重置視圖大小.

基礎(chǔ)原理:自動(dòng)設(shè)置viewport將會(huì)干擾程序里的手動(dòng)設(shè)置,程序應(yīng)該處理Canvas大小發(fā)生變化時(shí)引發(fā)的resize事件,并且重新設(shè)置視圖

2.3 透明像素,畫(huà)布接口和texImage2D Premultiplied Alpha,Canvas APIs and texImage2D

??? OpenGL API允許程序修改在渲染時(shí)使用的混合模型(blending models),基于這個(gè)特性,控制繪制緩沖區(qū)的透明值如何被解釋將成為可能(and for this reason allows control over how alpha values in the drawing buffer are interpreted;),參見(jiàn)WebGLContextAttributes節(jié)點(diǎn)中的介紹

???? HTML Canvas在實(shí)現(xiàn)接口toDataURL 和drawImage 必須考慮創(chuàng)建context時(shí)指定的透明像素參數(shù).在對(duì)已經(jīng)渲染完畢的Canvas對(duì)象調(diào)用toDataURL方法時(shí),如果請(qǐng)求的圖像沒(méi)有透明像素而webGL Context的透明像素參數(shù)(premultipliedAlpha )指定為true,那么像素的值必須被撥離.顏色通道將被混合操作分離,請(qǐng)注意這個(gè)操作會(huì)讓原圖像失真.在繪制過(guò)程中,使用CanvasRenderingContext2D對(duì)象的drawImage方法可以得到被webGL渲染過(guò)的Canvas對(duì)象,可以在這里修改(也可以不修改)webGL的內(nèi)容,這取決于CanvasRenderingContext2D 的預(yù)乘(Premultiplication)操作的需要.

預(yù)乘（Premultiplication） 定義：一個(gè)圖像用它自己的RGB通道乘以它自己的ALPHA通道

???? 把webGL渲染過(guò)的Canvas對(duì)象傳遞給texImage2D方法時(shí),像素值可能需要根據(jù)透明像素格式進(jìn)行修改,或者,像素值可能需要修改成透明格式.

http://www.lighthouse3d.com/tutorials/glsl-tutorial/?lights

http://www.khronos.org/webgl/wiki/Tutorial

http://learningwebgl.com/blog/?p=28

http://learningwebgl.com/lessons/lesson01/index.html

http://www.lighthouse3d.com/tutorials/glsl-tutorial/?lights

---

2 Context Creation and Drawing Buffer Presentation

Before using the WebGL API, the author must obtain a WebGLRenderingContext object for a given HTMLCanvasElement as described below. This object is used to manage OpenGL state and render to the drawing buffer, which must also be created at the time of context creation. The author may supply configuration options for this drawing buffer, otherwise default values shall be used as specified elsewhere in this document. This drawing buffer is presented to the HTML page compositor immediately before an HTML page compositing operation, but only if the drawing buffer has been modified since the last compositing operation.

2.1 The canvas Element

A WebGLRenderingContext object shall be created by calling the getContext() method of a given HTMLCanvasElement [CANVAS] object with the exact string ‘webgl’. This string is case sensitive. When called for the first time, a WebGLRenderingContext object is created and returned. Also at this time a drawing buffer shall be created. Subsequent calls to getContext() with the same string shall return the same object.

The HTML Canvas specification [CANVAS] defines the behavior when attempting to fetch two or more incompatible contexts against the same canvas element.

A second parameter may be passed to the getContext() method. If passed, this parameter shall be a WebGLContextAttributes object containing configuration parameters to be used in creating the drawing buffer. See WebGLContextAttributes for more details.

The alpha, depth, stencil and antialias attributes are requests, not requirements. The WebGL implementation does not guarantee that they will be obeyed, but should make a best effort to honor them. Combinations of attributes not supported by the WebGL implementation or graphics hardware shall not cause a failure to create a WebGLRenderingContext. The attributes actually used to create the context may be queried by the getContextAttributes() method on the WebGLRenderingContext. The premultipliedAlpha and preserveDrawingBuffer attributes must be obeyed by the WebGL implementation.

On subsequent calls to getContext() with the ‘webgl’ string, the passed WebGLContextAttributes object, if any, shall be ignored.

2.2 The Drawing Buffer

The drawing buffer into which the API calls are rendered shall be defined upon creation of the WebGLRenderingContext object. The table below shows all the buffers which make up the drawing buffer, along with their minimum sizes and whether they are defined or not by default. The size of this drawing buffer shall be determined by the width and height attributes of the HTMLCanvasElement. The table below also shows the value to which these buffers shall be cleared when first created, when the size is changed, or after presentation when the preserveDrawingBuffer context creation attribute is false.

If the requested width or height cannot be satisfied, either when the drawing buffer is first created or when the width and height attributes of theHTMLCanvasElement are changed, a drawing buffer with smaller dimensions shall be created. The dimensions actually used are implementation dependent and there is no guarantee that a buffer with the same aspect ratio will be created. The actual drawing buffer size can be obtained from the drawingBufferWidth anddrawingBufferHeight attributes.

By default, the buffers shall be the size shown below. The optional WebGLContextAttributes object may be used to change whether or not the buffers are defined. It can also be used to define whether the color buffer will include an alpha channel. If defined, the alpha channel is used by the HTML compositor to combine the color buffer with the rest of the page. The WebGLContextAttributes object is only used on the first call to getContext. No facility is provided to change the attributes of the drawing buffer after its creation.

WebGL presents its drawing buffer to the HTML page compositor immediately before a compositing operation, but only if the drawing buffer has been modified since the last compositing operation. Before the drawing buffer is presented for compositing the implementation shall ensure that all rendering operations have been flushed to the drawing buffer. By default, after compositing the contents of the drawing buffer shall be cleared to their default values, as shown in the table above.

This default behavior can be changed by setting the preserveDrawingBuffer attribute of the WebGLContextAttributes object. If this flag is true, the contents of the drawing buffer shall be preserved until the author either clears or overwrites them. If this flag is false, attempting to perform operations using this context as a source image after the rendering function has returned can lead to undefined behavior. This includes readPixels or toDataURL calls, or using this context as the source image of another context's texImage2D or drawImage call.

While it is sometimes desirable to preserve the drawing buffer, it can cause significant performance loss on some platforms. Whenever possible this flag should remain false and other techniques used. Techniques like synchronous drawing buffer access (e.g., calling readPixels or toDataURL in the same function that renders to the drawing buffer) can be used to get the contents of the drawing buffer. If the author needs to render to the same drawing buffer over a series of calls, a Framebuffer Object can be used.

Implementations may optimize away the required implicit clear operation of the Drawing Buffer as long as a guarantee can be made that the author cannot gain access to buffer contents from another process. For instance, if the author performs an explicit clear then the implicit clear is not needed.

2.3 The WebGL Viewport

OpenGL manages a rectangular viewport as part of its state which defines the placement of the rendering results in the drawing buffer. Upon creation of the WebGL context, the viewport is initialized to a rectangle with origin at (0, 0) and width and height equal to (canvas.width, canvas.height).

A WebGL implementation shall not affect the state of the OpenGL viewport in response to resizing of the canvas element.

Note that if a WebGL program does not contain logic to set the viewport, it will not properly handle the case where the canvas is resized. The following ECMAScript example illustrates how a WebGL program might resize the canvas programmatically.

Rationale: automatically setting the viewport will interfere with applications that set it manually. Applications are expected to use onresize handlers to respond to changes in size of the canvas and set the OpenGL viewport in turn.

2.4 Premultiplied Alpha, Canvas APIs and texImage2D

The OpenGL API allows the application to modify the blending modes used during rendering, and for this reason allows control over how alpha values in the drawing buffer are interpreted; see the premultipliedAlpha parameter in the WebGLContextAttributes section.

The HTML Canvas APIs toDataURL and drawImage must respect the premultipliedAlpha context creation parameter. When toDataURL is called against a Canvas into which WebGL content is being rendered, then if the requested image format does not specify premultiplied alpha and the WebGL context has thepremultipliedAlpha parameter set to true, then the pixel values must be de-multiplied; i.e., the color channels are divided by the alpha channel. Note that this operation is lossy.

Passing a WebGL-rendered Canvas to the drawImage method of CanvasRenderingContext2D may or may not need to modify the the rendered WebGL content during the drawing operation, depending on the premultiplication needs of the CanvasRenderingContext2D implementation.

When passing a WebGL-rendered Canvas to the texImage2D API, then depending on the setting of the premultipliedAlpha context creation parameter of the passed canvas and the UNPACK_PREMULTIPLY_ALPHA_WEBGL pixel store parameter of the destination WebGL context, the pixel data may need to be changed to or from premultiplied form.

總結(jié)

以上是生活随笔為你收集整理的第二章 创建webGL设备和绘制缓冲区呈现 Context Creation and Drawing Buffer Presentation的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。