WebGl入门教程二（动态设置定点及色彩）

本篇介绍如何动态设置着色器的位置、大小和色彩

全篇目录

设置位置和大小

修改index.vs, 添加两个变量及将变量值指向gl_Position和gl_PointSize

attribute vec4 a_Position;
attribute float a_PointSize;
void main(){
  gl_Position=a_Position;
  gl_PointSize=a_PointSize;
}

attribute只可以在顶点着色器中使用
vec4是一种类型，表示四个浮点数

修改javascript

以下代码在useProgram后执行

// 定位变量位置
const a_Position = gl.getAttribLocation(glProgram, 'a_Position');
// 设置变量值
gl.vertexAttrib3f(a_Position, 0.0, 0.0, 0.0);

const a_PointSize = gl.getAttribLocation(glProgram, 'a_PointSize');
gl.vertexAttrib1f(a_PointSize, 30.0);

设置颜色

修改index.fs, 同上，添加变量并设置变量

precision mediump float;
uniform vec4 u_FragColor;
void main(){
  gl_FragColor=u_FragColor;
}

片段着色器变量使用uniform声明
precision mediump float;是修改精度的，必须定义，可选值为lowp mediump highp

修改javascript

以下代码在useProgram后执行

1 2	const u_FragColor=gl.getUniformLocation(glProgram,'u_FragColor'); gl.uniform4f(u_FragColor,1.0,0.0,0.0,1.0);

# WebGl

Alipay

Wechat

WebGl入门教程二（动态设置定点及色彩）

设置位置和大小

设置颜色

Like this article? Support the author with

Comments

Categories

Tag Cloud

Recent

Archives

Tags

Recent

Archives

Tags

Your browser is out-of-date!