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
分享到:
相关推荐
在HTML页面中,通过`<canvas>`元素来创建WebGL上下文。使用`canvas.getContext('webgl')`或`canvas.getContext('experimental-webgl')`方法获取WebGL渲染上下文。 2. **顶点着色器(Vertex Shader)**: 顶点着色...
- **环境创建**:通过HTML5中的`<canvas>`元素创建一个绘图区域,并通过JavaScript获取对该元素的访问权限,进而创建WebGL上下文。 - **绘图缓存**:WebGL中的绘图缓存用于保存临时的渲染结果,以便后续的处理或显示...
5. **绘图命令(Drawing Commands)**:WebGL提供了一系列方法,如`gl.drawArrays()`和`gl.drawElements()`,用于指定如何使用缓冲区中的数据来绘制几何形状。 6. **矩阵操作(Matrix Manipulation)**:WebGL使用矩阵...
开发者需要获取WebGL上下文,并在该上下文中创建缓冲区、着色器、程序等来构建3D场景。 在WebGL开发过程中,开发者需要理解和使用GLSL(OpenGL Shading Language),这是一种用于编写图形处理器(GPU)上的着色器的...
WebGL在浏览器中使用上下文(canvas元素)来绘制图形,通过JavaScript调用一系列的绘图命令。它支持顶点、颜色、纹理、光照、深度测试等基本3D图形概念。WebGL的核心是顶点着色器和片段着色器,这两个程序在GPU上...
帧缓冲区对象和渲染缓冲区对象 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 创建渲染缓冲区对象...
- **5.2 WebGLContextAttributes**:这些属性决定了WebGL上下文的行为,如抗锯齿的支持程度等。 - **5.3 WebGLObject**:这是所有WebGL对象的基类。 - **5.4 WebGLBuffer**:缓冲区用于存储顶点数据和索引数据。 - *...
WebGL应用程序的结构通常包含初始化WebGL上下文、配置视图、加载资源、编写着色器程序、设置顶点数据缓冲区、设置光源和材质属性以及绘制调用等步骤。 WebGL的3D渲染流程则通常涉及以下几个步骤: 1. 创建一个...
WebGL上下文是浏览器提供的一个对象,它包含了一系列方法和属性,用于绘制3D图形。 WebGL的关键概念包括: 1. **顶点(Vertices)**:3D模型由多个顶点组成,它们定义了形状的边缘。 2. **索引(Indices)**:用于...
1. **上下文(Context)**:WebGL在HTML5 `<canvas>` 元素上创建一个绘图上下文,它是所有渲染操作的基础。 2. **缓冲区(Buffer)**:用于存储顶点、颜色、法线、纹理坐标等数据,WebGL提供了一种高效的方式来管理...
5. **WebGL上下文**:在HTML5 `<canvas>` 元素中创建WebGL上下文,它是所有WebGL操作的基础。开发者需要在这个上下文中绘制3D图形,并管理渲染状态。 6. **缓冲区和数组**:用于存储3D模型的数据,如顶点位置、颜色...
缓冲区(Buffers)、类型化数组(Typed Arrays)和数组缓冲区(ArrayBuffer)是WebGL处理顶点数据和存储中间数据的容器。它们用于高效地在JavaScript和GPU之间传输数据。 矩阵在WebGL中非常重要,用于进行坐标变换...
首先,书中会详细介绍WebGL的基本结构和工作原理,包括上下文创建、绘图缓冲区、颜色和深度测试等基础知识。读者将学习如何在HTML5 canvas元素中设置WebGL环境,并了解WebGL渲染管线的工作流程,这涉及到顶点坐标、...
2. **WebGL API**:深入探讨了WebGL应用程序的解剖结构,包括Canvas和绘图上下文的使用,视口设置,缓冲区(Buffer),数组缓冲区(ArrayBuffer)和类型数组(TypedArrays),以及WebGL中的矩阵和着色器编程。...
1. **上下文(Context)**:在HTML5 canvas元素中创建WebGL上下文是开始的第一步。这使得canvas可以用于绘制3D图形。 2. **顶点(Vertices)**:3D图形由多个点(顶点)组成,这些顶点定义了形状的边缘。 3. **...
通过这些例子,学习者可以了解如何设置WebGL上下文,创建顶点和颜色数据,定义着色器,以及如何处理用户的交互。 WebGL的编程涉及到以下几个关键概念: 1. **上下文创建**:在HTML5 `<canvas>` 元素上创建WebGL上...
- **Canvas与绘图上下文:** `<canvas>`元素用于定义一个画布,WebGL上下文则是在这个画布上创建的,用于绘制3D图形。 - **视口设置:** 视口指定了屏幕上的哪个部分将用于显示3D场景。通过设置视口大小,可以调整3D...