webgl偏移旋转缩放
2020-06-27 本文已影响0人
antlove
index.html
<html>
<head>
<meta lang="en">
<meta charset="UTF-8">
<title>webgl偏移旋转缩放</title>
<script src="./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>
<div class="btn-group">
<button id="offset-btn">偏移</button>
<button id="rotate-btn">旋转</button>
<button id="scale-btn">缩放</button>
</div>
</body>
<script src="./index.js"></script>
index.js
// 顶点着色器程序
var VSHADER_SOURCE =`
attribute vec4 a_Position;
uniform mat4 m_matrix4;
void main() {
//设置坐标
gl_Position = m_matrix4 * a_Position;
//设置尺寸
gl_PointSize = 10.0;
}
`;
// 片元着色器
var FSHADER_SOURCE =`
precision mediump float;
uniform vec4 u_FragColor;
void main() {
//设置颜色
gl_FragColor = u_FragColor;
}
`;
// 获取canvas元素
var canvas = document.getElementById('canvas');
// 获取绘制二维上下文
var gl = canvas.getContext('webgl');
// 初始化shader
initShaders(gl, VSHADER_SOURCE, FSHADER_SOURCE);
// 初始化顶点
var n = initVertexBuffer(gl);
draw();
function draw(translate = {x: 0, y: 0, z: 0}, angle = 0, scale = {x: 1, y: 1, z: 1}) {
gl.clearColor(0, 0, 0, 1);
gl.clear(gl.COLOR_BUFFER_BIT);
var u_FragColor = gl.getUniformLocation(gl.program, 'u_FragColor');
gl.uniform4f(u_FragColor, 0.5, 0.2, 0.5, 0.5);
var m_matrix4 = gl.getUniformLocation(gl.program, 'm_matrix4');
var sinB = Math.sin(Math.PI * angle / 180);
var cosB = Math.cos(Math.PI * angle / 180);
var m_transformMatrix4 = new Float32Array([
cosB * scale.x, sinB, 0.0, 0.0,
-sinB, cosB * scale.y, 0.0, 0.0,
0.0, 0.0, scale.z, 0.0,
translate.x, translate.y, translate.z, 1.0
]);
gl.uniformMatrix4fv(m_matrix4, false, m_transformMatrix4);
gl.drawArrays(gl.TRIANGLES, 0, n );
}
function initVertexBuffer(gl) {
var vertices = new Float32Array([
-0.5, 0.25,
-0.5, -0.25,
0.0, 0.0
]);
var size = 2;
var pointCount = vertices.byteLength / size / Float32Array.BYTES_PER_ELEMENT;
// 创建缓冲区
var vertexBuffer = gl.createBuffer();
// 将缓冲区绑定到目标
gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
// 向缓冲区写入数据
gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);
var a_Position = gl.getAttribLocation(gl.program, 'a_Position');
// 将缓冲区对象分配给a_Position
gl.vertexAttribPointer(a_Position, size, gl.FLOAT, false, 0, 0);
// 激活attibue 是缓冲区对attribute变量分配生效
gl.enableVertexAttribArray(a_Position);
return pointCount;
}
document.getElementById('offset-btn').addEventListener('click', () => {
draw({ x: 0.5, y: 0, z: 0});
});
document.getElementById('rotate-btn').addEventListener('click', () => {
draw(undefined , 90);
});
document.getElementById('scale-btn').addEventListener('click', () => {
draw(undefined , undefined, {x: 1.5, y: 1.5, z: 1});
});
cuon-utils.js
// cuon-utils.js (c) 2012 kanda and matsuda
/**
* Create a program object and make current
* @param gl GL context
* @param vshader a vertex shader program (string)
* @param fshader a fragment shader program (string)
* @return true, if the program object was created and successfully made current
*/
function initShaders(gl, vshader, fshader) {
var program = createProgram(gl, vshader, fshader);
if (!program) {
console.log('Failed to create program');
return false;
}
gl.useProgram(program);
gl.program = program;
return true;
}
/**
* Create the linked program object
* @param gl GL context
* @param vshader a vertex shader program (string)
* @param fshader a fragment shader program (string)
* @return created program object, or null if the creation has failed
*/
function createProgram(gl, vshader, fshader) {
// Create shader object
var vertexShader = loadShader(gl, gl.VERTEX_SHADER, vshader);
var fragmentShader = loadShader(gl, gl.FRAGMENT_SHADER, fshader);
if (!vertexShader || !fragmentShader) {
return null;
}
// Create a program object
var program = gl.createProgram();
if (!program) {
return null;
}
// Attach the shader objects
gl.attachShader(program, vertexShader);
gl.attachShader(program, fragmentShader);
// Link the program object
gl.linkProgram(program);
// Check the result of linking
var linked = gl.getProgramParameter(program, gl.LINK_STATUS);
if (!linked) {
var error = gl.getProgramInfoLog(program);
console.log('Failed to link program: ' + error);
gl.deleteProgram(program);
gl.deleteShader(fragmentShader);
gl.deleteShader(vertexShader);
return null;
}
return program;
}
/**
* Create a shader object
* @param gl GL context
* @param type the type of the shader object to be created
* @param source shader program (string)
* @return created shader object, or null if the creation has failed.
*/
function loadShader(gl, type, source) {
// Create shader object
var shader = gl.createShader(type);
if (shader == null) {
console.log('unable to create shader');
return null;
}
// Set the shader program
gl.shaderSource(shader, source);
// Compile the shader
gl.compileShader(shader);
// Check the result of compilation
var compiled = gl.getShaderParameter(shader, gl.COMPILE_STATUS);
if (!compiled) {
var error = gl.getShaderInfoLog(shader);
console.log('Failed to compile shader: ' + error);
gl.deleteShader(shader);
return null;
}
return shader;
}
/**
* Initialize and get the rendering for WebGL
* @param canvas <cavnas> element
* @param opt_debug flag to initialize the context for debugging
* @return the rendering context for WebGL
*/
function getWebGLContext(canvas, opt_debug) {
// Get the rendering context for WebGL
var gl = WebGLUtils.setupWebGL(canvas);
if (!gl) return null;
// if opt_debug is explicitly false, create the context for debugging
if (arguments.length < 2 || opt_debug) {
gl = WebGLDebugUtils.makeDebugContext(gl);
}
return gl;
}
image.png
