Learning WebGL

最新推荐文章于 2024-04-08 11:53:01 发布

转载最新推荐文章于 2024-04-08 11:53:01 发布 · 420 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/jalenwang/archive/2012/09/05/webgl-blending.html

该博客介绍WebGL Lesson 8，涉及深度缓冲、透明度和混合内容。阐述了WebGL渲染过程，包括运行顶点着色器确定位置、线性插值确定需绘制的片段、运行片段着色器确定颜色并写入帧缓冲区。还给出详细代码查看地址及Canvas和WebGL的规范链接。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

WebGL Lesson 8 – the depth buffer, transparency and blending

WebGL rendering process:

Runs the vertex shader on all of the vertices to work out where everything is.
Linearly interpolates between the vertices, which tells it which fragments (which for the moment you can treat as being the same as pixels) need to be painted.
For each fragment, run the fragment shader on it to work out its colour.
Write it to the frame buffer(color buffer).

For detail, check the source code at http://learningwebgl.com/lessons/lesson08/index.html.

Canvas SPEC

http://www.w3.org/TR/html5/the-canvas-element.html

WebGL SPEC

http://www.khronos.org/registry/webgl/specs/latest/

转载于:https://www.cnblogs.com/jalenwang/archive/2012/09/05/webgl-blending.html

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

weixin_34037173

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

WebGL学习(4) - 通过点击绘制三角形

wuyutaoktm的博客

01-01

914

1.搭架子 2.收集Canvas点击事件 3.在点击的位置画点 4.改造成绘制三角形 1.搭架子初始化ts项目tsc --init，会生成一个tsconfig.json，编辑文件把"strict": true改成"strict": false 通过tsc e1.ts编译ts生成e1.js，用ts的目的是有代码提示功能 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

WEBGL Learning(四) 遮罩之模板测试

iamlegendary的博客

06-21

1347

什么是模板测试我是这样理解的，可以把他看作月饼模具。模具压下去，模具以内的留了下来，其他部分被舍弃。再看下专业一点的简单解释： Stencil test是per-fragment operations的一种，这就意味着它处于fragment shader (片段着色器)之后，stencil test的主要作用就是根据stencil buffer的内容，来丢弃不需要的fragments。先来看下使用步骤： 1.开启模板测试 2.设置模板参数（针对模板） 3.渲染物体(模板), 更新模板缓冲的内容 4.

参与评论您还未登录，请先登录后发表或查看评论

learning-webgl：学习webgl

02-13

learning-webgl：学习webgl

WebGL教程1：一个三边形和一个四边形

wjlgryx的专栏

03-24

489

欢迎来到我的第一个WebGL教程！这节教程是以NeHe的OpenGL教程第二课为基础的（译者注：这里有网上找到的NeHe的OpenGL中文教程），NeHe的OpenGL教程是学习3D图形游戏编程很流行的一个教程。这节课向你解释怎样在页面上绘制一个三边形和一个四边形。也许这本身不是那么令人兴奋，但这是对WebGL基础的一个很好的介绍：如果你知道它是这样工作，剩下的会是十分相似……这儿是这节课的代码在...

webgl learning 之体会总结

ygd11的专栏

03-26

1320

lesson4 ，见：http://learningwebgl.com/blog/?p=370 本次学习要点 1. 画cube，四个面不同的颜色。 2.画cube时，将全部vetex一次输入，用gl.drawElements可以按照指定的点的索引来画。 lesson 5 学习要点（http://learningwebgl.com/blog/?p=507）： 1. 可以

Learning-WebGL

03-12

这个名为"Learning-WebGL"的资源可能是为了帮助初学者和有经验的开发者掌握WebGL的基本概念和技术。下面将详细讨论WebGL、JavaScript以及与学习WebGL相关的知识点。 1. **WebGL基础**： WebGL是Web上的图形编程...

WebGL Learning ExternalLib

01-13

WebGL Learning ExternalLib 是一个关于使用外部库进行WebGL编程的学习资源。WebGL是一种JavaScript API，用于在任何兼容的浏览器中进行2D和3D图形渲染，无需插件。它直接在HTML5的Canvas元素上运行，使得网页可以...

learning-webgl-03:学习WebGL第3课从原始WebGL转换为使用stack.gl

05-17

learning-webgl-03 从普通WebGL转换为使用。您可以在找到原件的来源以进行比较。感谢Giles Thomas和Tony Parisi的原始课程。运行这件事通过从终端运行以下命令来设置项目并在本地运行： git clone ...

WebGL Learning Lib

01-10

WebGL Learning Lib是一个专注于WebGL技术的学习资源库，它涵盖了WebGL编程的基础到高级概念，旨在帮助开发者掌握在网页上实现交互式3D图形的方法。WebGL是一种基于OpenGL标准的JavaScript API，允许在任何兼容的...

learnWebGL:该项目用于WebGL的研究

05-17

关于这个项目用于个人WebGL学习。关于建筑环境截至2015年7月，如果您稍后再看，它可能已过时。施工前补充为Windows构建CLI环境如果您，则可以了解的软件包管理安装方法和好处。，可以使用选项卡的CLI安装程序，也choco install conemu自己喜欢choco install conemu方式choco install conemu 。请参阅，了解如何使用安装类似bash的建立全球环境 Ruby 视窗从获取安装程序选中执行安装程序以在选项中设置ruby的路径。在安装路径中不要包含空格...如果包含它，则Compass的安装将被弄乱，您将不得不重新开始（;´Д｀）重新启动电脑（以防万一）用ruby -v检查版本 Mac ...我不知道，因为我没有Mac。节点视窗只需从安装程序，然后单击即可。重新启动电脑（以防万一）使用nod

learning-webgl:使用WebGL，Three.js和Babylon.js进行学习–文章，有用的资源，课件，个人笔记

05-08

学习WebGL，GLSL和Three.js 文章，有用的资源，课件，个人笔记工作坊 Mapping Festival 2019 /工作坊6·23.05.2019 10h–19h ·（ ·日内瓦·丰德丽·库格勒（Fonderie Kugler），日内瓦代码实验室，奥利维尔·兰格（Olivier Lange），利安德·赫尔佐格（Leander Herzog）和尼古拉（Nicola Papale）受幻灯片启发的第一步和实验戴维·里昂（David Lyons）的资料（请参阅以下）实验 Three.js动画 Three.js动画 Three.js动画，带有Kong，彼此旋转讲解 Patricio Gonzalez Vivo和Jen Lowe的《着色器之书》亚历山大·奥弗沃德（Alexander Overvoorde）的OpenGL简介 WebGL基础知识（Greggman，

推荐个学WEBGL的网站

小荷才露尖尖角

04-12

229

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

WebGL教程2：添加颜色

wjlgryx的专栏

03-24

280

欢迎来到我的第二课WebGL教程！这个时间我们来学习怎样向场景里面添加颜色。它是以Nehe的OpenGL教程第三课为基础的。这儿是这节课的代码在支持WebGL的浏览器运行看起来的效果：一个小的忠告：这些教程所针对的人群是具有一定的编程知识，但是没有真正的3D图形编程经验；目的是使你入门并且知道这些代码是怎样运行的，以至于你能够尽快开始制作自己的3D网页。如果你还没有学习第一课，在你学习这一课之前最...

WebGL Learning(三）绘制纹理

iamlegendary的博客

05-28

356

使用WebGL 将纹理绘制到窗口基本流程根据前面的学习，我们对WebGL有一个基础的了解。但绘制纹理还是有区别的，其中使用到了一些WebGL常用的API。这里我们先讲一下绘制流程 WebGL与Canvas的区别 Canvas只是浏览器的画布，当然它也有自己的绘制文字图形的API接口。 WebGL是以 OpenGL ES 2.0 为基础的一套浏览器 3D图形API （HTML5），在编程概念上与OpenGL ES 2.0 几乎是完全通用的，同样采用可编程渲染管线，也就是每个顶点的处理受到一小段Vert

Learn OpenGL/WebGL资源

along

11-26

737

1. learn opengl 中文翻译版 https://learnopengl-cn.github.io/ 2. 没必要非要揪着opengl不放，从webgl入手更方便。这里有dart和webgl结合的教程 https://github.com/jtmcdole/dart-webgl opengl这个API是一部分，更重要的是shader编写，所以先找个方便的环境入门即可。 ...

WebGL Learning （二）绘制一个点

iamlegendary的博客

01-13

798

DrawPoint.html<!DOCTYPE html> <html><head> <meta charset="utf-8"> <title>Draw a point</title> </head> <body onload="main()"> <canvas id="webgl" width="400" height="400"> Please use a browse

javascript基础学习系列七百六十八：WebGL

m0_68635815的博客

04-08

324

本节假设读者了解OpenGL ES 2.0 的基本概念，并简单介绍OpenGL ES 2.0 在WebGL 中实现的部分。在完全支持的浏览器中，WebGL 2.0 上下文的名字叫"webgl2"，WebGL 1.0 上下文的名字叫。 preserveDrawingBuffer：布尔值，表示绘图完成后是否保留绘图缓冲区，默认为false。 antialias：布尔值，表示是否使用默认机制执行抗锯齿操作，默认为true。 alpha：布尔值，表示是否为上下文创建透明通道缓冲区，默认为true。

webGL2.0

最新发布

04-23

### WebGL 2.0 的特性 WebGL 2.0 是基于 OpenGL ES 3.0 构建的标准，提供了许多增强的功能和性能改进。以下是其主要特性： - **着色器支持**：从 WebGL 2.0 开始，OpenGL 支持可编程着色器方法，允许开发者通过 GLSL（OpenGL Shading Language）编写顶点和片段着色器程序[^3]。 - **多重渲染目标 (MRT)**：支持在一个绘制调用中写入多个颜色缓冲区，这对于实现复杂的效果非常有用。 - **纹理压缩扩展**：引入了更多的纹理格式和压缩技术，从而减少内存占用并提高加载速度。 - **查询对象**：可以通过 `WebGLQuery` 对象测量绘图命令的时间消耗或其他统计信息[^1]。 ### 学习资源与教程对于初学者来说，可以从基础概念入手逐步深入学习 WebGL 技术。以下是一些推荐的学习资料： - **官方文档**：MDN 提供了详尽的 [WebGL 2.0 文档](https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API)，涵盖了 API 使用说明以及最佳实践。 - **在线课程**：Khan Academy 和 WebGL Fundamentals 都是非常受欢迎的选择，适合新手快速掌握基础知识[^4]。 - **书籍阅读**：《Learning WebGL》系列书籍由 Tony Parisi 编写，全面介绍了如何使用 WebGL 进行开发。 ### 示例代码展示下面给出一段简单的 WebGL 2.0 绘制三角形的例子： ```javascript // 获取 WebGL 上下文 const canvas = document.getElementById('canvas'); const gl = canvas.getContext('webgl2'); if (!gl) { console.error('WebGL 2.0 is not supported by your browser.'); } // 定义顶点数据 const vertices = new Float32Array([ 0.0, 1.0, -1.0, -1.0, 1.0, -1.0]); // 创建缓冲区并将数据传递给 GPU const vertexBuffer = gl.createBuffer(); gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer); gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW); // 设置着色器源码 const vertexShaderSource = ` attribute vec2 a_position; void main() { gl_Position = vec4(a_position, 0.0, 1.0); }`; const fragmentShaderSource = ` precision mediump float; uniform vec4 u_color; void main() { gl_FragColor = u_color; }`; function createShader(type, source) { const shader = gl.createShader(type); gl.shaderSource(shader, source); gl.compileShader(shader); if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) { throw 'Error compiling shader: ' + gl.getShaderInfoLog(shader); } return shader; } // 初始化着色器程序 const program = gl.createProgram(); const vertexShader = createShader(gl.VERTEX_SHADER, vertexShaderSource); const fragmentShader = createShader(gl.FRAGMENT_SHADER, fragmentShaderSource); gl.attachShader(program, vertexShader); gl.attachShader(program, fragmentShader); gl.linkProgram(program); if (!gl.getProgramParameter(program, gl.LINK_STATUS)) { throw 'Error linking program.'; } gl.useProgram(program); // 关联属性变量到缓冲区 const positionAttributeLocation = gl.getAttribLocation(program, 'a_position'); gl.enableVertexAttribArray(positionAttributeLocation); gl.vertexAttribPointer( positionAttributeLocation, 2, gl.FLOAT, false, 0, 0); // 渲染场景 gl.clearColor(0.75, 0.85, 0.9, 1.0); // 背景颜色设置为浅蓝色 gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT); gl.drawArrays(gl.TRIANGLES, 0, 3); ``` 此代码展示了如何初始化 WebGL 2.0 环境、定义几何形状并通过自定义着色器呈现它们。