matlab三角形旋转动态,WebGL 3D(三角形的矩阵变换[平移、旋转、缩放])

三角形平移

image.png

1、公式实现

//顶点着色器程序

var VSHADER_SOURCE =

'attribute vec4 a_Position;\n'+

'uniform vec4 u_Translation;\n'+

'void main(){\n'+

'gl_Position = a_Position + u_Translation;\n'+

'}\n';

//片元着色器程序

var FSHADER_SOURCE =

'void main(){'+

'gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);\n'+

'}\n';

function main(){

//获取元素

var canvas = document.getElementById("webgl");

if(!canvas){

console.log('error');

return;

}

//获取绘制三维图形的绘图上下文

var gl = canvas.getContext('webgl');

// 创建着色器对象

const fShader = gl.createShader(gl.FRAGMENT_SHADER);

const vShader = gl.createShader(gl.VERTEX_SHADER);

// 将着色器源码写入对象

gl.shaderSource(vShader, VSHADER_SOURCE);

gl.shaderSource(fShader, FSHADER_SOURCE);

// 编译着色器

gl.compileShader(vShader);

gl.compileShader(fShader);

// 创建程序

const program = gl.createProgram();

// 程序绑定着色器

gl.attachShader(program, vShader);

gl.attachShader(program, fShader);

// 链接程序

gl.linkProgram(program);

// 使用程序

gl.useProgram(program);

//在x,y,z方向上平移的距离

var Tx = 0.5, Ty = 0.5, Tz = 0.5;

var u_Translation = gl.getUniformLocation(program, 'u_Translation');

gl.uniform4f(u_Translation, Tx, Ty, Tz, 0.0);

var n = initVertexBuffers(gl);

if(n < 0){

console.log('Failed to set positions of vertices');

return;

}

gl.drawArrays(gl.TRIANGLES, 0, n);

function initVertexBuffers(gl){

var vertices = new Float32Array([0.0, 0.5, -0.5, -0.5, 0.5, -0.5]); //坐标点位置

var n = 3; //坐标点个数

//创建缓冲区对象

var vertexBuffer = gl.createBuffer();

if(!vertexBuffer){

console.log('Failed to create the buffer object');

return -1;

}

//将缓冲区对象绑定到目标

gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);

//向缓冲区对象中写入数据

gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);

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

if(a_Position < 0){

console.log('Failed to get the storage location of a_Position');

return;

}

//将缓冲区对象分配给a_Position变量

gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, 0, 0);

//连接a_Position变量与分配给它的缓冲区对象

gl.enableVertexAttribArray(a_Position);

return n;

}

}

2、矩阵实现

//顶点着色器程序

var VSHADER_SOURCE =

'attribute vec4 a_Position;\n'+

'uniform mat4 u_Translation;\n'+

'void main(){\n'+

'gl_Position = u_Translation * a_Position;\n'+

'}\n';

//片元着色器程序

var FSHADER_SOURCE =

'void main(){'+

'gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);\n'+

'}\n';

function main(){

//获取元素

var canvas = document.getElementById("webgl");

if(!canvas){

console.log('error');

return;

}

//获取绘制三维图形的绘图上下文

var gl = canvas.getContext('webgl');

// 创建着色器对象

const fShader = gl.createShader(gl.FRAGMENT_SHADER);

const vShader = gl.createShader(gl.VERTEX_SHADER);

// 将着色器源码写入对象

gl.shaderSource(vShader, VSHADER_SOURCE);

gl.shaderSource(fShader, FSHADER_SOURCE);

// 编译着色器

gl.compileShader(vShader);

gl.compileShader(fShader);

// 创建程序

const program = gl.createProgram();

// 程序绑定着色器

gl.attachShader(program, vShader);

gl.attachShader(program, fShader);

// 链接程序

gl.linkProgram(program);

// 使用程序

gl.useProgram(program);

//在x,y,z方向上平移的距离

var Tx = 0.5, Ty = 0.5, Tz = 0.5;

var translation = new Float32Array([

1.0, 0.0, 0.0, 0.0,

0.0, 1.0, 0.0, 0.0,

0.0, 0.0, 1.0, 0.0,

Tx, Ty, Tz, 1.0

]);

var u_Translation = gl.getUniformLocatio