Learning WebGL

最新推荐文章于 2024-04-08 11:53:01 发布
最新推荐文章于 2024-04-08 11:53:01 发布
阅读量423 收藏
点赞数
CC 4.0 BY-SA版权
原文链接：http://www.cnblogs.com/jalenwang/archive/2012/09/05/webgl-blending.html
该博客介绍WebGL Lesson 8，涉及深度缓冲、透明度和混合内容。阐述了WebGL渲染过程，包括运行顶点着色器确定位置、线性插值确定需绘制的片段、运行片段着色器确定颜色并写入帧缓冲区。还给出详细代码查看地址及Canvas和WebGL的规范链接。

WebGL Lesson 8 – the depth buffer, transparency and blending

 

WebGL rendering process:

  1. Runs the vertex shader on all of the vertices to work out where everything is.
  2. 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.
  3. For each fragment, run the fragment shader on it to work out its colour.
  4. 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

WebGL学习(4) - 通过点击绘制三角形
wuyutaoktm的博客
01-01 921
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 1360
什么是模板测试 我是这样理解的，可以把他看作月饼模具。模具压下去，模具以内的留了下来，其他部分被舍弃。 再看下专业一点的简单解释： 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 492
欢迎来到我的第一个WebGL教程！这节教程是以NeHe的OpenGL教程第二课为基础的（译者注：这里有网上找到的NeHe的OpenGL中文教程），NeHe的OpenGL教程是学习3D图形游戏编程很流行的一个教程。这节课向你解释怎样在页面上绘制一个三边形和一个四边形。也许这本身不是那么令人兴奋，但这是对WebGL基础的一个很好的介绍：如果你知道它是这样工作，剩下的会是十分相似……这儿是这节课的代码在...
webgl learning 之体会总结
ygd11的专栏
03-26 1323
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 231
http://learningwebgl.com/blog/?p=507
WebGL教程2：添加颜色
wjlgryx的专栏
03-24 284
欢迎来到我的第二课WebGL教程！这个时间我们来学习怎样向场景里面添加颜色。它是以Nehe的OpenGL教程第三课为基础的。这儿是这节课的代码在支持WebGL的浏览器运行看起来的效果：一个小的忠告：这些教程所针对的人群是具有一定的编程知识，但是没有真正的3D图形编程经验；目的是使你入门并且知道这些代码是怎样运行的，以至于你能够尽快开始制作自己的3D网页。如果你还没有学习第一课，在你学习这一课之前最...
WebGL Learning(三）绘制纹理
iamlegendary的博客
05-28 358
使用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 740
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 800
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 327
本节假设读者了解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 环境、定义几何形状并通过自定义着色器呈现它们。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值