webGl shader的学习记录(六)：如何画出一个渐变色填充的矩形
其实将两个两个三角形合并一下，就出现了。一个矩形
使用两种方式 一个是两个buffer 一个是单一的buffer
glcl代码
js代码 使用两个buffer的代码
var canvas = document.getElementById('canvas');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
var gl = canvas.getContext('webgl');
console.log('当前的进度1');
//创建顶点着色器
var vertxShader = gl.createShader(gl.VERTEX_SHADER);
var vertxShaderSource = document.querySelector('#vertexShader').innerHTML;
gl.shaderSource(vertxShader,vertxShaderSource);//方法用于设置 WebGLShader 着色器（顶点着色器及片元着色器）的GLSL程序代码。
gl.compileShader(vertxShader);//用于编译一个GLSL着色器，使其成为为二进制数据，然后就可以被WebGLProgram对象所使用.
//创建片元着色器
var fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
var fragmentShaderSource = document.querySelector('#fragmentShader').innerHTML;
gl.shaderSource(fragmentShader,fragmentShaderSource);
gl.compileShader(fragmentShader);
//创建可以使用的program;
var program = gl.createProgram();
gl.attachShader(program,vertxShader);//方法负责往 WebGLProgram 添加一个片段或者顶点着色器。
gl.attachShader(program,fragmentShader);//方法负责往 WebGLProgram 添加一个片段或者顶点着色器
gl.linkProgram(program);//方法链接一个给定的WebGLProgram 到已附着的顶点着色器和片段着色器。
gl.useProgram(program);//方法将定义好的WebGLProgram 对象添加到当前的渲染状态中。
var a_Screen_Size = gl.getAttribLocation(program,'a_Screen_Size');
gl.vertexAttrib2f(a_Screen_Size,canvas.width,canvas.height);
//取到顶点着色器中的相关变量
var a_Position = gl.getAttribLocation(program,'a_Position');
var a_Color = gl.getAttribLocation(program,'a_Color');
//允许变量使用
gl.enableVertexAttribArray(a_Position);
gl.enableVertexAttribArray(a_Color);
//创建出一个弧顶的矩形
// var positions = [
//
// 30, 30, 0, 255, 0, 1, //V0
// 300, 300, 0, 255, 0, 1, //V2
// 300, 30, 0, 255, 0, 1, //V3
// 30, 30, 255, 0, 0, 1, //V0
// 30, 300, 255, 0, 0, 1, //V1
// 300, 300, 255, 0, 0, 1, //V2
// ]
var positions = [
30, 30, //V0
30, 300, //V1
300, 300, //V2
30, 30, //V0
300, 300, //V2
300, 30, //V3
]
// // //颜色的变化
var colors =[];
let color = randomColor();
colors.push(randomColor().r, randomColor().g, randomColor().b, randomColor().a);
colors.push( randomColor().r, randomColor().g, randomColor().b, randomColor().a);
colors.push( randomColor().r, randomColor().g, randomColor().b, randomColor().a);
colors.push( randomColor().r, randomColor().g, randomColor().b, randomColor().a);
colors.push( randomColor().r, randomColor().g, randomColor().b, randomColor().a);
colors.push( randomColor().r, randomColor().g, randomColor().b, randomColor().a);
console.log('colors:',colors)
// 随机生成一个颜色。
// let buffer = gl.createBuffer();
// // 绑定缓冲区为当前缓冲
// gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
// // 设置 a_Position 属性从缓冲区读取数据方式
// gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, 24, 0);
// // 设置 a_Color 属性从缓冲区读取数据方式
// gl.vertexAttribPointer(a_Color, 4, gl.FLOAT, false, 24, 8);
// // 向缓冲区传递数据
// gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(positions), gl.STATIC_DRAW);
// 创建一个顶点缓冲区
var positionBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER,positionBuffer);
// 设置 a_Position 变量读取 positionBuffer 缓冲区的方式。
var size = 2;
var type = gl.FLOAT;
var normalize = false;
var stride = 0;
var offset = 0;
gl.vertexAttribPointer(
a_Position, size, type, normalize, stride, offset);
var colorBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER,colorBuffer);
var size = 4;
var type = gl.FLOAT;
var normalize = false;
var stride = 0;
var offset = 0;
gl.vertexAttribPointer(
a_Color, size, type, normalize, stride, offset);
//开始绘画
gl.bindBuffer(gl.ARRAY_BUFFER,positionBuffer);
gl.bufferData(gl.ARRAY_BUFFER,new Float32Array(positions),gl.STATIC_DRAW);
gl.bindBuffer(gl.ARRAY_BUFFER,colorBuffer);
gl.bufferData(gl.ARRAY_BUFFER,new Float32Array(colors),gl.STATIC_DRAW);
gl.clearColor(0,0,0,1)
/*渲染*/
gl.clear(gl.COLOR_BUFFER_BIT);
if (positions.length > 0) {
gl.drawArrays(gl.TRIANGLES, 0, positions.length / 2);
}
function randomColor() {
return {
r: Math.random() * 255,
g: Math.random() * 255,
b: Math.random() * 255,
a: Math.random() * 1
};
}下面是使用一个buffer写出来代码
var canvas = document.getElementById('canvas');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
var gl = canvas.getContext('webgl');
console.log('当前的进度1');
//创建顶点着色器
var vertxShader = gl.createShader(gl.VERTEX_SHADER);
var vertxShaderSource = document.querySelector('#vertexShader').innerHTML;
gl.shaderSource(vertxShader,vertxShaderSource);//方法用于设置 WebGLShader 着色器（顶点着色器及片元着色器）的GLSL程序代码。
gl.compileShader(vertxShader);//用于编译一个GLSL着色器，使其成为为二进制数据，然后就可以被WebGLProgram对象所使用.
//创建片元着色器
var fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
var fragmentShaderSource = document.querySelector('#fragmentShader').innerHTML;
gl.shaderSource(fragmentShader,fragmentShaderSource);
gl.compileShader(fragmentShader);
//创建可以使用的program;
var program = gl.createProgram();
gl.attachShader(program,vertxShader);//方法负责往 WebGLProgram 添加一个片段或者顶点着色器。
gl.attachShader(program,fragmentShader);//方法负责往 WebGLProgram 添加一个片段或者顶点着色器
gl.linkProgram(program);//方法链接一个给定的WebGLProgram 到已附着的顶点着色器和片段着色器。
gl.useProgram(program);//方法将定义好的WebGLProgram 对象添加到当前的渲染状态中。
var a_Screen_Size = gl.getAttribLocation(program,'a_Screen_Size');
gl.vertexAttrib2f(a_Screen_Size,canvas.width,canvas.height);
//取到顶点着色器中的相关变量
var a_Position = gl.getAttribLocation(program,'a_Position');
var a_Color = gl.getAttribLocation(program,'a_Color');
//允许变量使用
gl.enableVertexAttribArray(a_Position);
gl.enableVertexAttribArray(a_Color);
//创建出一个弧顶的矩形
var positions = [
30, 30, 0, 255, 0, 1, //V0
300, 300, 0, 255, 0, 1, //V2
300, 30, 0, 255, 0, 1, //V3
30, 30, 255, 0, 0, 1, //V0
30, 300, 255, 0, 0, 1, //V1
300, 300, 255, 0, 0, 1, //V2
]
// var positions = [
// 30, 30, //V0
// 30, 300, //V1
// 300, 300, //V2
// 30, 30, //V0
// 300, 300, //V2
// 300, 30, //V3
// ]
// // //颜色的变化
// var colors =[];
// let color = randomColor();
// colors.push(randomColor().r, randomColor().g, randomColor().b, randomColor().a);
// colors.push( randomColor().r, randomColor().g, randomColor().b, randomColor().a);
// colors.push( randomColor().r, randomColor().g, randomColor().b, randomColor().a);
// colors.push( randomColor().r, randomColor().g, randomColor().b, randomColor().a);
// colors.push( randomColor().r, randomColor().g, randomColor().b, randomColor().a);
// colors.push( randomColor().r, randomColor().g, randomColor().b, randomColor().a);
// console.log('colors:',colors)
// 随机生成一个颜色。
let buffer = gl.createBuffer();
// 绑定缓冲区为当前缓冲
gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
// 设置 a_Position 属性从缓冲区读取数据方式
gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, 24, 0);
// 设置 a_Color 属性从缓冲区读取数据方式
gl.vertexAttribPointer(a_Color, 4, gl.FLOAT, false, 24, 8);
// 向缓冲区传递数据
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(positions), gl.STATIC_DRAW);
// 创建一个顶点缓冲区
// var positionBuffer = gl.createBuffer();
// gl.bindBuffer(gl.ARRAY_BUFFER,positionBuffer);
// // 设置 a_Position 变量读取 positionBuffer 缓冲区的方式。
// var size = 2;
// var type = gl.FLOAT;
// var normalize = false;
// var stride = 0;
// var offset = 0;
// gl.vertexAttribPointer(
// a_Position, size, type, normalize, stride, offset);
//
//
// var colorBuffer = gl.createBuffer();
// gl.bindBuffer(gl.ARRAY_BUFFER,colorBuffer);
// var size = 4;
// var type = gl.FLOAT;
// var normalize = false;
// var stride = 0;
// var offset = 0;
// gl.vertexAttribPointer(
// a_Color, size, type, normalize, stride, offset);
//
// //开始绘画
// gl.bindBuffer(gl.ARRAY_BUFFER,positionBuffer);
// gl.bufferData(gl.ARRAY_BUFFER,new Float32Array(positions),gl.STATIC_DRAW);
// gl.bindBuffer(gl.ARRAY_BUFFER,colorBuffer);
// gl.bufferData(gl.ARRAY_BUFFER,new Float32Array(colors),gl.STATIC_DRAW);
gl.clearColor(0,0,0,1)
/*渲染*/
gl.clear(gl.COLOR_BUFFER_BIT);
if (positions.length > 0) {
// gl.drawArrays(gl.TRIANGLES, 0, positions.length / 2);
gl.drawArrays(gl.TRIANGLES, 0, positions.length / 6);
}
function randomColor() {
return {
r: Math.random() * 255,
g: Math.random() * 255,
b: Math.random() * 255,
a: Math.random() * 1
};
}