之前的文章介绍了webgl.

这里进一步精简。

WebGL的全部内容就是创建不同的着色器,

向着色器提供数据然后调用gl.drawArrays 或 gl.drawElements

让WebGL调用当前顶点着色器处理每个顶点,调用当前片断着色器渲染每个像素。

既然着色器需要数据,着色器分两部分,顶点和片段着色器

顶点着色器需要的数据,可以通过以下三种方式获得。

  1. Attributes 属性 (从缓冲中获取的数据)
  2. Uniforms 全局变量 (在一次绘制中对所有顶点保持一致值)
  3. Textures 纹理 (从像素或纹理元素中获取的数据)

片断着色器所需的数据,可以通过以下三种方式获取

  1. Uniforms 全局变量 (values that stay the same for every pixel of a single draw call)
  2. Textures 纹理 (data from pixels/texels)
  3. 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);

可变量

顶点着色器 直接传给 片段着色器

webgl 初识2的更多相关文章

  1. webgl 初识1

    1.  webgl是什么?   WebGL其实是一个非常简单的API.好吧,“简单”可能是一个不恰当的描述. 它做的是一件简单的事,它仅仅运行用户提供的两个方法,一个顶点着色器和一个片断着色器, 去绘 ...

  2. webgl helloworld

    之前的webgl 初识1, 初识2 已经介绍了webgl的基本概念,工作原理. 没有理解的自己yy. 现呈上例子一枚 <!DOCTYPE html> <html lang=" ...

  3. WebGL入门教程(一)-初识webgl

    一.WebGL和传统网页的区别: 普通网页组成成分:HTML.JavaScript: WebGL网页组成成分:HTML5.JavaScript和GLSL ES(着色器语言 OpenGL ES): 二. ...

  4. 初识webgl--我的webgl学习第一课(基于threeJs)

    一,我为什么要学习webgl 一个偶然的机会,在和朋友的聊天过程中,听说了webgl,也许过去也看到过,但是没有特别在意过.原来,JavaScript也可以很好的渲染并在网页上显示三维动画,不用借助插 ...

  5. 初识WEBGL

    WEBGL (全写Web Graphics Library)是一种3D绘图协议,这种绘图技术标准允许把JavaScript和OpenGL ES 2.0结合在一起,通过增加OpenGL ES 2.0的一 ...

  6. WEBGL学习【一】初识WEBGL

    <html lang="zh-CN"> <head> <title>NeHe's WebGL</title> <meta ch ...

  7. WebGL入门教程(五)-webgl纹理

    前面文章: WebGL入门教程(一)-初识webgl WebGL入门教程(二)-webgl绘制三角形 WebGL入门教程(三)-webgl动画 WebGL入门教程(四)-webgl颜色 这里就需要用到 ...

  8. WebGL入门教程(四)-webgl颜色

    前面文章: WebGL入门教程(一)-初识webgl WebGL入门教程(二)-webgl绘制三角形 WebGL入门教程(三)-webgl动画 颜色效果图: 操作步骤: 1.创建HTML5 canva ...

  9. WebGL入门教程(三)-webgl动画

    前面文章: WebGL入门教程(一)-初识webgl WebGL入门教程(二)-webgl绘制三角形 WebGL动画有移动.旋转和缩放,我们将移动.旋转和缩放图形,然后将其绘制到屏幕上,称为变换(tr ...

随机推荐

  1. Go 跨域请求问题

    在使用go语言写测试服务的时候遇到了前端跨域请求问题,只需在go中加入 w.Header().Set("Access-Control-Allow-Origin", "*& ...

  2. DP_括号匹配序列问题

    括号匹配问题 简单括号匹配问题是给出字符串,判断字符串中的括号是否匹配,此类问题核心解决方案就是利用栈的后进先出的特性,从左到右依次遍历字符串,遇左括号进栈,遇右括号将其与栈顶元素配对,若能配对,则栈 ...

  3. 20155202 2016-2017-2 《Java程序设计》第4周学习总结

    20155202 2016-2017-2 <Java程序设计>第4周学习总结 教材学习内容总结 继承与多态: 子类和父类有(is a)关系,Role role1 =new Swordsma ...

  4. 20155301 2016-2017-2 《Java程序设计》第10周学习总结

    20155301 2016-2017-2 <Java程序设计>第10周学习总结 教材学习内容总结 计算机网络: 1.在计算机网络中,现在命名IP地址的规定是IPv4协议,该协议规定每个IP ...

  5. Why HBase

    3.1.1,为什么选用HBases a)      容量巨大 HBase 的单表可以有百亿行.百万列,数据矩阵横向和纵向两个维度所支持的数据量级 都非常具有弹性.传统的关系型数据库,如 Oracle ...

  6. php实现图形计算器

    存档: index.php <html> <head> <title>图形计算器开发</title> <meta http-equiv=" ...

  7. 433. Number of Islands【LintCode java】

    Description Given a boolean 2D matrix, 0 is represented as the sea, 1 is represented as the island. ...

  8. 【snmp】Linux开启snmp及查询

    1.Linux snmp 1.安装snmp yum install -y net-snmp* 2.备份snmp配置 cp /etc/snmp/snmpd.conf /etc/snmp/snmpd.co ...

  9. Hyperledger_Fabric_Model

    Hyperledger_Fabric_Model 本部分描述了Hyperledger Fabric的主要设计特点 Assets: 资产定义使得任何东西都可以通过货币值在网络中交易,从食物到老爷车再到期 ...

  10. 创建image

    摘要: 本节演示如何通过 Web GUI 和 CLI 两种方法创建 Image. 本节演示如何通过 Web GUI 和 CLI 两种方法创建 Image. OpenStack 为终端用户提供了 Web ...