webgl 初识2

Posted honghong

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了webgl 初识2相关的知识,希望对你有一定的参考价值。

之前的文章介绍了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的主要内容,如果未能解决你的问题,请参考以下文章

初识Spring源码 -- doResolveDependency | findAutowireCandidates | @Order@Priority调用排序 | @Autowired注入(代码片段

初识Spring源码 -- doResolveDependency | findAutowireCandidates | @Order@Priority调用排序 | @Autowired注入(代码片段

初识webgl--我的webgl学习第一课

初识webGL three.js

shader编程-RayMarching与SDF结合开始三维探索(WebGL-Shader开发基础07)

shader编程-RayMarching与SDF结合开始三维探索(WebGL-Shader开发基础07)