webgl系列学习笔记-初探

迟到的webgl学习，未来总是那么破朔迷离，唯有学习知识才能让你感觉踏实，回头看看昨天感叹下；

整理的几点

• 顶点着色器 x-shader/x-vertex
• 片段着色器 x-shader/x-fragment
• 着色器变量声明
• 获取着色器变量
• 更改着色器变量

顶点着色器

一开始可能需要知道的一些概念， 如果没有做过gl，opengl可能一下子也无法立刻这个是干什么的

<script type='x-shader/x-vertex' id='shader-vs'>
	attribute vec4 a_Position;
      void main(){
      	gl_Position = a_Position;
         // gl_Position=vec4(1.0,0.0,0.0,1.0);
          gl_PointSize=10.0;
      }
  </script>

片段着色器

和上面差距不大，大家先知道个 概念吧；

<script type='x-shader/x-fragment' id='shader-fs'>
      void main(){
          gl_FragColor=vec4(1.0,1.0,0.0,1.0);
      }
  </script>

着色器变量声明

前面的代码已经列出来了

如下 声明了 a_Position 变量类型 vec4, 储存起来

	  attribute vec4 a_Position;

js获取着色器变量

var a_Position = gl.getAttribLocation(gl.program, 'a_Position')

js更新着色器变量

根据上面的取到之后 更新 a_Position的位置；

gl.vertexAttrib3f(a_Position, 0.5-Math.random(), 0.5-Math.random(), 0.5-Math.random())

扩展阅读

• vertexAttrib2f
• vertexAttrib3f
• vertexAttrib4f

随机绘制位置；

最后 上作业
http://works.ibeeger.com/learn/webgl/lesson01.html