将变换矩阵从着色器移动到 Javascript 应用程序
Posted
技术标签:
【中文标题】将变换矩阵从着色器移动到 Javascript 应用程序【英文标题】：Moving transformation matrices from shaders to the Javascript application 【发布时间】：2018-04-11 12:14:13 【问题描述】：我必须解决许多家庭作业。我必须构建一个带有一些按钮的旋转立方体来应用更改和转换。有一项任务要求我“将转换矩阵从着色器移动到 js 应用程序”。我知道如何在着色器中构建旋转、平移和缩放矩阵，但是在 js 应用程序中移动它们意味着什么。我用来在 html 文件中指定着色器。
这是我的代码：
HTML
<!DOCTYPE html>
<html>
<button id = "ButtonX">Rotate X</button>
<button id = "ButtonY">Rotate Y</button>
<button id = "ButtonZ">Rotate Z</button>
<button id = "ButtonT">Toggle Rotation</button>
<script id="vertex-shader" type="x-shader/x-vertex">
attribute vec4 vPosition;
attribute vec4 vColor;
varying vec4 fColor;
uniform vec3 theta;
void main()
// Compute the sines and cosines of theta for each of
// the three axes in one computation.
vec3 angles = radians( theta );
vec3 c = cos( angles );
vec3 s = sin( angles );
// Remember: the matrices are column-major
mat4 rx = mat4( 1.0, 0.0, 0.0, 0.0,
0.0, c.x, s.x, 0.0,
0.0, -s.x, c.x, 0.0,
0.0, 0.0, 0.0, 1.0 );
mat4 ry = mat4( c.y, 0.0, -s.y, 0.0,
0.0, 1.0, 0.0, 0.0,
s.y, 0.0, c.y, 0.0,
0.0, 0.0, 0.0, 1.0 );
mat4 rz = mat4( c.z, s.z, 0.0, 0.0,
-s.z, c.z, 0.0, 0.0,
0.0, 0.0, 1.0, 0.0,
0.0, 0.0, 0.0, 1.0 );
fColor = vColor;
gl_Position = rz * ry * rx * vPosition;
gl_Position.z = -gl_Position.z;
</script>
<script id="fragment-shader" type="x-shader/x-fragment">
precision mediump float;
varying vec4 fColor;
void
main()
gl_FragColor = fColor;
</script>
<script type="text/javascript" src="../Common/webgl-utils.js"></script>
<script type="text/javascript" src="../Common/initShaders.js"></script>
<script type="text/javascript" src="../Common/MV.js"></script>
<script type="text/javascript" src="Homework1.js"></script>
<button id="Direction">Change Direction</button>
<body>
<canvas id="gl-canvas" >
Oops ... your browser doesn't support the HTML5 canvas element
</canvas>
</body>
</html>
JS
"use strict";
var canvas;
var gl;
var numVertices = 36;
var numChecks = 8;
var program;
var c;
var flag = true;
var direction = true;
var pointsArray = [];
var colorsArray = [];
var vertices = [
vec4( -0.5, -0.5, 0.5, 1.0 ),
vec4( -0.5, 0.5, 0.5, 1.0 ),
vec4( 0.5, 0.5, 0.5, 1.0 ),
vec4( 0.5, -0.5, 0.5, 1.0 ),
vec4( -0.5, -0.5, -0.5, 1.0 ),
vec4( -0.5, 0.5, -0.5, 1.0 ),
vec4( 0.5, 0.5, -0.5, 1.0 ),
vec4( 0.5, -0.5, -0.5, 1.0 )
];
var vertexColors = [
vec4( 0.0, 0.0, 0.0, 1.0 ), // black
vec4( 1.0, 0.0, 0.0, 1.0 ), // red
vec4( 1.0, 1.0, 0.0, 1.0 ), // yellow
vec4( 0.0, 1.0, 0.0, 1.0 ), // green
vec4( 0.0, 0.0, 1.0, 1.0 ), // blue
vec4( 1.0, 0.0, 1.0, 1.0 ), // magenta
vec4( 0.0, 1.0, 1.0, 1.0 ), // white
vec4( 0.0, 1.0, 1.0, 1.0 ) // cyan
];
var xAxis = 0;
var yAxis = 1;
var zAxis = 2;
var axis = xAxis;
var theta = [45.0, 45.0, 45.0];
var thetaLoc;
function quad(a, b, c, d)
pointsArray.push(vertices[a]);
colorsArray.push(vertexColors[a]);
pointsArray.push(vertices[b]);
colorsArray.push(vertexColors[a]);
pointsArray.push(vertices[c]);
colorsArray.push(vertexColors[a]);
pointsArray.push(vertices[a]);
colorsArray.push(vertexColors[a]);
pointsArray.push(vertices[c]);
colorsArray.push(vertexColors[a]);
pointsArray.push(vertices[d]);
colorsArray.push(vertexColors[a]);
function colorCube()
quad( 1, 0, 3, 2 );
quad( 2, 3, 7, 6 );
quad( 3, 0, 4, 7 );
quad( 6, 5, 1, 2 );
quad( 4, 5, 6, 7 );
quad( 5, 4, 0, 1 );
window.onload = function init()
canvas = document.getElementById( "gl-canvas" );
gl = WebGLUtils.setupWebGL( canvas );
if ( !gl ) alert( "WebGL isn't available" );
gl.viewport( 0, 0, canvas.width, canvas.height );
gl.clearColor( 1.0, 1.0, 1.0, 1.0 );
gl.enable(gl.DEPTH_TEST);
//
// Load shaders and initialize attribute buffers
//
program = initShaders( gl, "vertex-shader", "fragment-shader" );
gl.useProgram( program );
colorCube();
var cBuffer = gl.createBuffer();
gl.bindBuffer( gl.ARRAY_BUFFER, cBuffer );
gl.bufferData( gl.ARRAY_BUFFER, flatten(colorsArray), gl.STATIC_DRAW );
var vColor = gl.getAttribLocation( program, "vColor" );
gl.vertexAttribPointer( vColor, 4, gl.FLOAT, false, 0, 0 );
gl.enableVertexAttribArray( vColor );
var vBuffer = gl.createBuffer();
gl.bindBuffer( gl.ARRAY_BUFFER, vBuffer);
gl.bufferData( gl.ARRAY_BUFFER, flatten(pointsArray), gl.STATIC_DRAW );
var vPosition = gl.getAttribLocation( program, "vPosition" );
gl.vertexAttribPointer( vPosition, 4, gl.FLOAT, false, 0, 0 );
gl.enableVertexAttribArray( vPosition );
thetaLoc = gl.getUniformLocation(program, "theta");
document.getElementById("ButtonX").onclick = function()axis = xAxis;;
document.getElementById("ButtonY").onclick = function()axis = yAxis;;
document.getElementById("ButtonZ").onclick = function()axis = zAxis;;
document.getElementById("ButtonT").onclick = function()flag = !flag;;
document.getElementById("Direction").onclick = function() direction = !direction;;
render();
var render = function()
gl.clear( gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
// Point 1 --> Change and Toggle Rotation
if((direction)&&(!flag)) theta[axis] += -2.0;
if((!direction)&&(!flag)) theta[axis] += +2.0;
if(!direction) theta[axis] += -2.0;
if(direction) theta[axis] += 2.0 ;
//
gl.uniform3fv(thetaLoc, theta);
gl.drawArrays( gl.TRIANGLES, 0, numVertices );
requestAnimFrame(render);
【问题讨论】：
【参考方案1】：我知道如何在着色器中构建旋转、平移和缩放矩阵，但是在 js 应用程序中移动它们意味着什么。
首先你必须在着色器程序中创建一个类型为mat4 的统一变量：
uniform mat4 rx;
在 js 应用程序中，您可以使用数组来设置矩阵。矩阵必须按列主要顺序构造（或者在设置为统一时必须转置）：
var theta_x_degree = theta[0];
var theta_x_radians = theta_x_degree * Math.PI / 180;
var s_x = Math.sin(theta_x_radians );
var c_x = Math.cos(theta_x_radians );
var rx = [
1.0, 0.0, 0.0, 0.0,
0.0, c_x, s_x, 0.0,
0.0, -s_x, c_x, 0.0,
0.0, 0.0, 0.0, 1.0
];
shader程序链接后(gl.linkProgram)，可以得到矩阵uniform的uniform位置：
var rx_loc = gl.getUniformLocation(program, "rx");
终于可以设置uniform了，在shader程序变成当前程序后（gl.useProgram）：
gl.uniformMatrix4fv(rx_loc, false, rx); // false means "not transpose"
【讨论】：
仅供参考：对于gl.uniform，您不需要将它们转换为Float32Array，甚至使用Float32Array 启动当前并且总是比使用本机JS数组慢（尽管也许有一天这会改变）
@Rabbid76 感谢您的帮助，我应用了您建议的更改，现在我可以在移动矩阵后显示立方体，但它不会在 x 轴上旋转。
@RickGrass “它不在 x 轴上旋转”是什么意思。这是一个新问题吗？如果要为对象设置动画，则必须不断更改和设置矩阵。您必须在render 函数中计算和设置矩阵。以上是关于将变换矩阵从着色器移动到 Javascript 应用程序的主要内容，如果未能解决你的问题，请参考以下文章