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);

// 编译着色器

pileShader(vShader);

pileShader(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);

// 编译着色器

pileShader(vShader);

pileShader(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.getUniformLocation(program, 'u_Translation');

gl.uniformMatrix4fv(u_Translation, false, translation);

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;

}

}

image.png

三角形旋转

image.png

image.png

image.png

1、公式代码实现：

//顶点着色器程序

var VSHADER_SOURCE =

'attribute vec4 a_Position;\n'+

'uniform float u_CosB, u_SinB;\n'+

'void main(){\n'+

'gl_Position.x = a_Position.x * u_CosB - a_Position.y * u_SinB;\n'+

'gl_Position.y = a_Position.x * u_SinB + a_Position.y * u_CosB;\n'+

'gl_Position.z = a_Position.z;\n'+

'gl_Position.w = 1.0;\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);

// 编译着色器

pileShader(vShader);

pileShader(fShader);

// 创建程序

const program = gl.createProgram();

// 程序绑定着色器

gl.attachShader(program, vShader);

gl.attachShader(program, fShader);

// 链接程序

gl.linkProgram(program);

// 使用程序

gl.useProgram(program);

//绕z轴旋转

var ANGLE = 45.0;

var radian = Math.PI * ANGLE / 180.0;

var cosB = Math.cos(radian);

var sinB = Math.sin(radian);

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

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

gl.uniform1f(u_CosB, cosB);

gl.uniform1f(u_SinB, sinB);

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;

}

}

image.png

image.png

2、变换矩阵代码实现：

//顶点着色器程序

var VSHADER_SOURCE =

'attribute vec4 a_Position;\n'+

'uniform mat4 u_xformMatrix;\n'+

'void main(){\n'+

'gl_Position = u_xformMatrix * 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);

// 编译着色器

pileShader(vShader);

pileShader(fShader);

// 创建程序

const program = gl.createProgram();

// 程序绑定着色器

gl.attachShader(program, vShader);

gl.attachShader(program, fShader);

// 链接程序

gl.linkProgram(program);

// 使用程序

gl.useProgram(program);

//绕z轴旋转

var ANGLE = 45.0;

var radian = Math.PI * ANGLE / 180.0;

var cosB = Math.cos(radian);

var sinB = Math.sin(radian);

var xformMatrix = new Float32Array([

cosB, sinB, 0.0, 0.0,

-sinB, cosB, 0.0, 0.0,

0.0, 0.0, 1.0, 0.0,

0.0, 0.0, 0.0, 1.0

]);

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

gl.uniformMatrix4fv(u_xformMatrix, false, xformMatrix);;

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;

}

}

image.png

三角形缩放

image.png

1、公式实现

//顶点着色器程序

var VSHADER_SOURCE =

'attribute vec4 a_Position;\n'+

'uniform float u_Sx, u_Sy, u_Sz;\n'+

'void main(){\n'+

'gl_Position.x = u_Sx * a_Position.x;\n'+

'gl_Position.y = u_Sy * a_Position.y;\n'+

'gl_Position.z = u_Sz * a_Position.z;\n'+

'gl_Position.w = 1.0;\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);

// 编译着色器

pileShader(vShader);

pileShader(fShader);

// 创建程序

const program = gl.createProgram();

// 程序绑定着色器

gl.attachShader(program, vShader);

gl.attachShader(program, fShader);

// 链接程序

gl.linkProgram(program);

// 使用程序

gl.useProgram(program);

//在x,y,z方向上缩放的比例

var Sx=1.0, Sy=1.5, Sz=1.0;

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

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

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

gl.uniform1f(u_Sx,Sx);

gl.uniform1f(u_Sy,Sy);

gl.uniform1f(u_Sz,Sz);

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);

// 编译着色器

pileShader(vShader);

pileShader(fShader);

// 创建程序

const program = gl.createProgram();

// 程序绑定着色器

gl.attachShader(program, vShader);

gl.attachShader(program, fShader);

// 链接程序

gl.linkProgram(program);

// 使用程序

gl.useProgram(program);

//在x,y,z方向上缩放的比例

var Sx=1.0, Sy=1.5, Sz=1.0;

var translation = new Float32Array([

Sx, 0.0, 0.0, 0.0,

0.0, Sy, 0.0, 0.0,

0.0, 0.0, Sz, 0.0,

0.0, 0.0, 0.0, 1.0

]);

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

gl.uniformMatrix4fv(u_Translation, false, translation);

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;

}

}

image.png

示例：旋转的三角形动画

//顶点着色器程序

var VSHADER_SOURCE =

'attribute vec4 a_Position;\n'+

'uniform mat4 u_xformMatrix;\n'+

'void main(){\n'+

'gl_Position = u_xformMatrix * 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);

// 编译着色器

pileShader(vShader);

pileShader(fShader);

// 创建程序

const program = gl.createProgram();

// 程序绑定着色器

gl.attachShader(program, vShader);

gl.attachShader(program, fShader);

// 链接程序

gl.linkProgram(program);

// 使用程序

gl.useProgram(program);

//绕z轴旋转

var init_angle = 0.0;

var angle_step = 0.1;

var current_angle = init_angle;

setInterval(function(){

gl.clear(gl.COLOR_BUFFER_BIT);

var radian = Math.PI * (current_angle % 360) / 180.0;

var cosB = Math.cos(radian);

var sinB = Math.sin(radian);

var xformMatrix = new Float32Array([

cosB, sinB, 0.0, 0.0,

-sinB, cosB, 0.0, 0.0,

0.0, 0.0, 1.0, 0.0,

0.0, 0.0, 0.0, 1.0

]);

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

gl.uniformMatrix4fv(u_xformMatrix, false, xformMatrix);;

var n = initVertexBuffers(gl);

if(n < 0){

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

return;

}

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

current_angle = current_angle + angle_step;

}, 10);

function initVertexBuffers(gl){

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

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;

}

}

不同时刻的动画截图

image.png

image.png