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形式。
- 大小: 8.8 KB
分享到:
相关推荐
webgl-to-canvas2d 将 webgl 上下文或 webgl 画布转换为 2d 画布。用法webglToCanvas2d(gl, [canvas2d]) gl可以是使用 webglrenderingcontext 或 webglrenderingcontext 的画布。 canvas2d可以是画布或 ...
webgl-上下文 获取一个 WebGLRenderingContext,如果它不存在则返回 null。 类似于 。 //get a webgl context, will be null if not foundvar gl = require ( 'webgl-context' ) ( )if ( gl ) { document . body . ...
WebGL学习变量、缓冲区、其他图形
帧缓冲区对象和渲染缓冲区对象 380 如何实现渲染到纹理 381 示例程序(FramebufferObject.js) 382 创建帧缓冲区对象(gl.createFramebuffer()) 385 创建纹理对象并设置其尺寸和参数 385 创建渲染缓冲区对象...
帧缓冲区对象和渲染缓冲区对象 380 如何实现渲染到纹理 381 示例程序(FramebufferObject.js) 382 创建帧缓冲区对象(gl.createFramebuffer()) 385 创建纹理对象并设置其尺寸和参数 385 创建渲染缓冲区对象...
帧缓冲区对象和渲染缓冲区对象 380 如何实现渲染到纹理 381 示例程序(FramebufferObject.js) 382 创建帧缓冲区对象(gl.createFramebuffer()) 385 创建纹理对象并设置其尺寸和参数 385 创建渲染缓冲区对象...
帧缓冲区对象和渲染缓冲区对象 380 如何实现渲染到纹理 381 示例程序(FramebufferObject.js) 382 创建帧缓冲区对象(gl.createFramebuffer()) 385 创建纹理对象并设置其尺寸和参数 385 创建渲染缓冲区对象...
GLStateCache.js WebGL渲染上下文的状态缓存
WebGL/ThreeJS创建立体文字TextGeometry
1.3.2 画布元素与绘制上下文 9 1.3.3 视口 10 1.3.4 Buffer、ArrayBuffer和类型化数组 10 1.3.5 矩阵 11 1.3.6 着色器 12 1.3.7 绘制图元 13 1.4 本章小结 14 第2章 你的第一个WebGL程序 15 2.1 ...
集成式2D jsI2dJs-SVG +画布+ WebGL Integrated-2D-是一个开放源代码Javascript框架,用于在SVG,Canvas和WebGL上下文中呈现2D图形。 I2D的简单语法和语义使您可以将矢量图形和位图的功能结合起来,轻松实现复杂的...
本文档简单的介绍了webgl的用途和相关技术
一个虚拟的webgl运行上下文,可以将webgl库的gl命令与第三种混合在一起,包括 , 等。 例子 安装 npm install kiwi . gl 或者 npm install --save-dev kiwi.gl 例子 获取htmlelement的webgl上下文 //get ...
1.5访问WebGL上下文环境 1.6WebGL状态机 1.7加载3D场景 1.8本章小结 第2章渲染几何体 2.1顶点和索引 2.2WebGL渲染管线概述 2.3在.WebGL中渲染几何体 2.4将属性关联至VBO 2.5渲染机制 2.6整合过程 2.7渲染模式 2.8...
《WebGL编程指南》的主要篇幅讲解了WebGL 原生API 和三维图形学的基础知识,包括渲染管线、着色器、矩阵变换、着色器编程语言(GLSL ES)等等,也讲解了使用WebGL 渲染三维场景的一般技巧,如光照、阴影、雾化等等。...
1.5访问WebGL上下文环境 1.6WebGL状态机 1.7加载3D场景 1.8本章小结 第2章渲染几何体 2.1顶点和索引 2.2WebGL渲染管线概述 2.3在.WebGL中渲染几何体 2.4将属性关联至VBO 2.5渲染机制 2.6整合过程 2.7渲染模式 2.8...
代码说明如何实现webgl帧缓存。里面包含了HTML,JS, GLSL的代码。
is-webgl-context 测试给定的对象是 WebGL 还是 WebGL2 上下文。 这对于处理边缘情况很有用,例如当以不同类型包装 WebGLRenderingContext 时。 在 Node 和浏览器中运行。 var isGL = require ( 'is-webgl-context' ...
initSerializer:初始化几何序列化器,以将GeoJSON特征解析为可以使用上下文模拟器呈现的缓冲区 initGLpaint 句法 可以如下初始化一个新的上下文模拟器: const context = tileGL . initGLpaint ( gl , ...