webgl 初识2
2024-08-25 07:55:40
之前的文章介绍了webgl.
这里进一步精简。
WebGL的全部内容就是创建不同的着色器，
向着色器提供数据然后调用gl.drawArrays 或 gl.drawElements
让WebGL调用当前顶点着色器处理每个顶点，调用当前片断着色器渲染每个像素。
既然着色器需要数据,着色器分两部分,顶点和片段着色器
顶点着色器需要的数据，可以通过以下三种方式获得。
- Attributes 属性 (从缓冲中获取的数据)
- Uniforms 全局变量 (在一次绘制中对所有顶点保持一致值)
- Textures 纹理 (从像素或纹理元素中获取的数据)
片断着色器所需的数据，可以通过以下三种方式获取
- Uniforms 全局变量 (values that stay the same for every pixel of a single draw call)
- Textures 纹理 (data from pixels/texels)
- Varyings 可变量 (data passed from the vertex shader and interpolated)
属性写入
- var buf = gl.createBuffer();
- gl.bindBuffer(gl.ARRAY_BUFFER, buf);
- gl.bufferData(gl.ARRAY_BUFFER, someData, gl.STATIC_DRAW);
属性读取
- gl.getAttribLocation(positionLoc);(可初始进行)
- gl.enableVertexAttribArray(positionLoc);
- gl.bindBuffer(gl.ARRAY_BUFFER, buf);
- gl.vertexAttribPointer(positionLoc, numComponents, type, false, stride, offset);
变量读写(用的时候，直接给某变量绑定值就好了)
- var offsetLoc = gl.getUniformLocation(progress, XX);
- gl.uniform(XXXXXX); // 向右偏移一半屏幕宽度
纹理写入
- var txt = gl.createTexture();
- gl.bindTexture(gl.TEXTURE_2D, tex);
- gl.texImage2D(gl.TEXTURE_2D, level, gl.RGBA, width, height, 0, gl.RGBA, gl.UNSIGNED_BYTE, img);
纹理读取
- gl.getUniformLocation(positionLoc);(可初始化进行)
- gl.activeTexture(gl.TEXTURE0 + unit);
- gl.bindTexture(gl.TEXTURE_2D, tex);
- gl.uniform1i(someSamplerLoc, unit);
可变量
顶点着色器 直接传给 片段着色器
最新文章
- 如何让你的网站支持https
- 跨平台日志清理工具 Log-Cutter v2.0.1 RC-1 发布
- windows下面安装casperjs
- SharePoint 2013: Search Architecture in SPC202
- jfinal框架教程-学习笔记(二)
- C++学习笔记3：一些错误
- AspNetPager学习使用2
- spring中controller
- 推荐几个对Asp.Net开发者比较实用的工具
- Animation动画（一）
- grails&groovy的IllegalArgument异常
- win7安装ruby on rails
- 分享一个option样式传递给select当前选中样式
- JS操作cookie的实例
- Day05_JAVAEE系列：Junit
- docker容器时间与宿主机时间不一致问题
- MySql cmd下的学习笔记 —— 有关select的操作（max, min等常见函数）
- JAVA在Windows使用apache commons-csv导出CSV解决方案
- avalon 如何隐藏首屏加载页面时出现的花括号
- linux命令（53）：用户和用户组