index.html
<html>
<head>
<meta lang="en">
<meta charset="UTF-8">
<title>webgl 使用多個(gè)緩沖區(qū)</title>
<script src="../lib/cuon-utils.js"></script>
<style>
body{
margin:0;
}
canvas{
display:block;
border:1px solid #999;
}
.btn-group {
width: 500px;
text-align: center;
padding: 10px 0;
}
</style>
</head>
<body>
<canvas id="canvas" width="500" height="500"></canvas>
</body>
<script src="./index.js"></script>
index.js
// 頂點(diǎn)著色器程序
var VSHADER_SOURCE =`
attribute vec4 a_Position;
attribute float a_PointSize;
void main() {
//設(shè)置坐標(biāo)
gl_Position = a_Position;
//設(shè)置尺寸
gl_PointSize = a_PointSize;
}
`;
// 片元著色器
var FSHADER_SOURCE =`
precision mediump float;
uniform vec4 u_FragColor;
void main() {
//設(shè)置顏色
gl_FragColor = vec4(0.5, 0.2, 0.5, 0.5);
}
`;
// 獲取canvas元素
var canvas = document.getElementById('canvas');
// 獲取繪制二維上下文
var gl = canvas.getContext('webgl');
gl.clearColor(0, 0, 0, 1);
// 初始化shader
initShaders(gl, VSHADER_SOURCE, FSHADER_SOURCE);
// 初始化頂點(diǎn)
var n = initVertexBuffer(gl);
function draw(gl, n) {
gl.clear(gl.COLOR_BUFFER_BIT);
gl.drawArrays(gl.POINTS, 0, n );
}
/**
* 初始化頂點(diǎn)
*/
function initVertexBuffer(gl) {
/* ==================== 創(chuàng)頂點(diǎn)坐標(biāo)建緩沖區(qū) ==================== */
var vertices = new Float32Array([
-0.5, 0,
0, 0,
0.5, 0
]);
var size = 2;
var vertexPositionBuffer = gl.createBuffer();
// 將緩沖區(qū)綁定到目標(biāo)
gl.bindBuffer(gl.ARRAY_BUFFER, vertexPositionBuffer);
// 向緩沖區(qū)寫入數(shù)據(jù)
gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);
var a_Position = gl.getAttribLocation(gl.program, 'a_Position');
// 將緩沖區(qū)對(duì)象分配給a_Position
gl.vertexAttribPointer(a_Position, size, gl.FLOAT, false, 0, 0);
// 激活attibue 是緩沖區(qū)對(duì)attribute變量分配生效
gl.enableVertexAttribArray(a_Position);
/* ==================== 創(chuàng)頂點(diǎn)建緩沖區(qū) ==================== */
var sizes = new Float32Array([
10.0, 20.0, 30.0
]);
var vertexBuffer = gl.createBuffer();
// 將緩沖區(qū)綁定到目標(biāo)
gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
// 向緩沖區(qū)寫入數(shù)據(jù)
gl.bufferData(gl.ARRAY_BUFFER, sizes, gl.STATIC_DRAW);
var a_PointSize = gl.getAttribLocation(gl.program, 'a_PointSize');
// 將緩沖區(qū)對(duì)象分配給a_Position
gl.vertexAttribPointer(a_PointSize, 1, gl.FLOAT, false, 0, 0);
// 激活attibue 是緩沖區(qū)對(duì)attribute變量分配生效
gl.enableVertexAttribArray(a_PointSize);
return vertices.byteLength / size / Float32Array.BYTES_PER_ELEMENT;;
}
draw(gl, n);
以下函數(shù)庫(kù)詳見 http://www.reibang.com/p/589579ee70b2
<script src="../lib/cuon-utils.js"></script>
image.png
