我的代码的目的是单独旋转组成镶嵌三 Angular 形的四个三 Angular 形。目前，它旋转整个镶嵌，就好像它是一个对象一样。我不希望它这样做。如何旋转各个三 Angular 形？
这是输出:
HTML:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
<title>2D Sierpinski Gasket</title>
<script id="vertex-shader" type="x-shader/x-vertex">
attribute vec4 vPosition;
uniform float theta;
void
main()
{
float s = sin( theta );
float c = cos( theta );
gl_Position.x = -s * vPosition.y + c * vPosition.x;
gl_Position.y = s * vPosition.x + c * vPosition.y;
gl_Position.z = 0.0;
gl_Position.w = 1.0;
}
</script>
<script id="fragment-shader" type="x-shader/x-fragment">
precision mediump float;
void
main()
{
gl_FragColor = vec4( 1.0, 0.0, 0.0, 1.0 );
}
</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="gasket2.js"></script>
</head>
<body>
<canvas id="gl-canvas" width="512" height="512">
Oops ... your browser doesn't support the HTML5 canvas element
</canvas>
</body>
</html>
JS:
var canvas;
var gl;
var points = [];
var theta = 0.0;
var thetaLoc;
var NumTimesToSubdivide = 5;
window.onload = function init()
{
canvas = document.getElementById( "gl-canvas" );
gl = WebGLUtils.setupWebGL( canvas );
if ( !gl ) { alert( "WebGL isn't available" ); }
//
// Initialize our data for the Sierpinski Gasket
//
// First, initialize the corners of our gasket with three points.
var vertices = [
vec2( -1, -1 ),
vec2( 0, 1 ),
vec2( 1, -1 )
];
divideTriangle( vertices[0], vertices[1], vertices[2],
NumTimesToSubdivide);
//
// Configure WebGL
//
gl.viewport( 0, 0, canvas.width, canvas.height );
gl.clearColor( 1.0, 1.0, 1.0, 1.0 );
// Load shaders and initialize attribute buffers
var program = initShaders( gl, "vertex-shader", "fragment-shader" );
gl.useProgram( program );
// Load the data into the GPU
var bufferId = gl.createBuffer();
gl.bindBuffer( gl.ARRAY_BUFFER, bufferId );
gl.bufferData( gl.ARRAY_BUFFER, flatten(points), gl.STATIC_DRAW );
// Associate our shader variables with our data buffer
var vPosition = gl.getAttribLocation( program, "vPosition" );
gl.vertexAttribPointer( vPosition, 2, gl.FLOAT, false, 0, 0 );
gl.enableVertexAttribArray( vPosition );
thetaLoc = gl.getUniformLocation( program, "theta" );
render();
};
function triangle( a, b, c )
{
points.push( a, b, c );
}
function divideTriangle( a, b, c, count )
{
// check for end of recursion
if ( count === 0 ) {
triangle( a, b, c );
}
else {
//bisect the sides
var ab = mix( a, b, 0.5 );
var ac = mix( a, c, 0.5 );
var bc = mix( b, c, 0.5 );
--count;
// three new triangles
divideTriangle( a, ab, ac, count );
divideTriangle( c, ac, bc, count );
divideTriangle( b, bc, ab, count );
divideTriangle( ac, bc, ab, count );
}
}
function render()
{
gl.clear( gl.COLOR_BUFFER_BIT );
theta += 45;
gl.uniform1f( thetaLoc, theta );
gl.drawArrays( gl.TRIANGLES, 0, points.length );
}
最佳答案
旋转每个单独的三 Angular 形通常意味着围绕其质心旋转它，这需要知道三 Angular 形的其他两个点的坐标，并且顶点着色器一次仅处理一个顶点。 (通常，点围绕原点旋转。)一种解决方案是计算每个三 Angular 形的质心，并将质心添加为每个顶点位置旁边的附加每顶点属性。
关于javascript - 如何旋转 WebGL 曲面分割中的各个三 Angular 形？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31307134/