如何解决在WebGL中旋转三角形
我正在尝试渲染3D旋转三角形,已经进行了所有必要的更改,但是我的三角形变形了(看起来不像三角形)。你们知道我在这里想念吗?
编辑:我已经附加了输出,是的,我尝试过处理顶点,但是它并没有太大作用(因为它不会形成三角形)
var canvas;
var gl;
var NumVertices = 12;
var points = [];
var colors = [];
var xAxis = 0;
var yAxis = 1;
var zAxis = 2;
var axis = 0;
var theta = [ 0,0 ];
var thetaLoc;
var vertices = [
vec3(0.5,-0.2722,0.2886),vec3(0.0,-0.5773),vec3(-0.5,vec3(0.5,-0.5443,0.0)
]
var vertexColors = [
[ 0.0,0.0,1.0 ],// black
[ 1.0,// red
[ 1.0,1.0,// yellow
[ 0.0,1.0 ] // green
];
window.onload = function init()
{
canvas = document.getElementById( "gl-canvas" );
gl = WebGLUtils.setupWebGL( canvas );
if ( !gl ) { alert( "WebGL isn't available" ); }
colorCube(); //change this name to pyramid
gl.viewport( 0,canvas.width,canvas.height );
gl.clearColor( 1.0,1.0 );
gl.enable(gl.DEPTH_TEST);
var program = initShaders( gl,"vertex-shader","fragment-shader" );
gl.useProgram( program );
var cBuffer = gl.createBuffer();
gl.bindBuffer( gl.ARRAY_BUFFER,cBuffer );
gl.bufferData( gl.ARRAY_BUFFER,flatten(colors),gl.STATIC_DRAW );
var vColor = gl.getAttribLocation( program,"vColor" );
gl.vertexAttribPointer( vColor,4,gl.FLOAT,false,0 );
gl.enableVertexAttribArray( vColor );
var vBuffer = gl.createBuffer();
gl.bindBuffer( gl.ARRAY_BUFFER,vBuffer );
gl.bufferData( gl.ARRAY_BUFFER,flatten(points),gl.STATIC_DRAW );
var vPosition = gl.getAttribLocation( program,"vPosition" );
gl.vertexAttribPointer( vPosition,3,0 );
gl.enableVertexAttribArray( vPosition );
thetaLoc = gl.getUniformLocation(program,"theta");
document.getElementById( "xButton" ).onclick = function () {
axis = xAxis;
};
document.getElementById( "yButton" ).onclick = function () {
axis = yAxis;
};
document.getElementById( "zButton" ).onclick = function () {
axis = zAxis;
};
render();
}
function colorCube()
{
quad( 0,1,2 );
quad( 3,0 );
quad( 0,2 );
quad( 0,2,3 );
}
function quad(a,b,c)
{
var indices = [ a,c];
for ( var i = 0; i < indices.length; ++i ) {
points.push( vertices[indices[i]] );
colors.push(vertexColors[a]);
}
}
function render()
{
gl.clear( gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
theta[axis] += 2.0;
gl.uniform3fv(thetaLoc,theta);
gl.drawArrays( gl.TRIANGLES,NumVertices );
requestAnimFrame( render );
}
<canvas id="gl-canvas" width="512"" height="512">
Oops ... your browser doesn't support the HTML5 canvas element
</canvas>
<br/>
<button id= "xButton">Rotate X</button>
<button id= "yButton">Rotate Y</button>
<button id= "zButton">Rotate Z</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 );
// Remeber: thse matrices are column-major
mat4 rx = mat4( 1.0,c.x,s.x,-s.x,1.0 );
mat4 ry = mat4( c.y,-s.y,s.y,c.y,1.0 );
mat4 rz = mat4( c.z,-s.z,s.z,c.z,1.0 );
fColor = vColor;
gl_Position = rz * ry * rx * vPosition;
}
</script>
<script id="fragment-shader" type="x-shader/x-fragment">
precision mediump float;
varying vec4 fColor;
void
main()
{
gl_FragColor = fColor;
}
</script>
<script src="https://esangel.github.io/WebGL/Common/webgl-utils.js"></script>
<script src="https://esangel.github.io/WebGL/Common/initShaders.js"></script>
<script src="https://esangel.github.io/WebGL/Common/MV.js"></script>
--------------------------------输出-------------- ------------- 这是我的输出的图片,它在所有轴上旋转,但没有3d三角形的形状
解决方法
我认为您在colorCube
中有不好的索引
我将其更改为此
function colorCube()
{
quad( 0,1,2 ); // bottom
quad( 1,3 ); // side0
quad( 1,2,3 ); // side1
quad( 2,3 ); // side3
}
而且似乎可行。
我还改变了它为面部选择颜色的方式,从而使每个三角形成为下一个颜色。
function quad(a,b,c)
{
var indices = [ a,c];
var ndx = points.length % vertexColors.length;
for ( var i = 0; i < indices.length; ++i ) {
points.push( vertices[indices[i]] );
colors.push(vertexColors[ndx]);
}
}
似乎可以正常工作。
var canvas;
var gl;
var NumVertices = 12;
var points = [];
var colors = [];
var xAxis = 0;
var yAxis = 1;
var zAxis = 2;
var axis = 0;
var theta = [ 0,0 ];
var thetaLoc;
var vertices = [
vec3(0.5,-0.2722,0.2886),vec3(0.0,-0.5773),vec3(-0.5,vec3(0.5,-0.5443,0.0)
]
var vertexColors = [
[ 0.0,0.0,1.0 ],// black
[ 1.0,// red
[ 1.0,1.0,// yellow
[ 0.0,1.0 ] // green
];
window.onload = function init()
{
canvas = document.getElementById( "gl-canvas" );
gl = WebGLUtils.setupWebGL( canvas );
if ( !gl ) { alert( "WebGL isn't available" ); }
colorCube(); //change this name to pyramid
gl.viewport( 0,canvas.width,canvas.height );
gl.clearColor( 1.0,1.0 );
gl.enable(gl.DEPTH_TEST);
var program = initShaders( gl,"vertex-shader","fragment-shader" );
gl.useProgram( program );
var cBuffer = gl.createBuffer();
gl.bindBuffer( gl.ARRAY_BUFFER,cBuffer );
gl.bufferData( gl.ARRAY_BUFFER,flatten(colors),gl.STATIC_DRAW );
var vColor = gl.getAttribLocation( program,"vColor" );
gl.vertexAttribPointer( vColor,4,gl.FLOAT,false,0 );
gl.enableVertexAttribArray( vColor );
var vBuffer = gl.createBuffer();
gl.bindBuffer( gl.ARRAY_BUFFER,vBuffer );
gl.bufferData( gl.ARRAY_BUFFER,flatten(points),gl.STATIC_DRAW );
var vPosition = gl.getAttribLocation( program,"vPosition" );
gl.vertexAttribPointer( vPosition,3,0 );
gl.enableVertexAttribArray( vPosition );
thetaLoc = gl.getUniformLocation(program,"theta");
document.getElementById( "xButton" ).onclick = function () {
axis = xAxis;
};
document.getElementById( "yButton" ).onclick = function () {
axis = yAxis;
};
document.getElementById( "zButton" ).onclick = function () {
axis = zAxis;
};
render();
}
function colorCube()
{
quad( 0,3 ); // side3
}
function quad(a,c];
var ndx = points.length % vertexColors.length;
for ( var i = 0; i < indices.length; ++i ) {
points.push( vertices[indices[i]] );
colors.push(vertexColors[ndx]);
}
}
function render()
{
gl.clear( gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
theta[axis] += 2.0;
gl.uniform3fv(thetaLoc,theta);
gl.drawArrays( gl.TRIANGLES,NumVertices );
requestAnimFrame( render );
}
<canvas id="gl-canvas" width="512"" height="512">
Oops ... your browser doesn't support the HTML5 canvas element
</canvas>
<br/>
<button id= "xButton">Rotate X</button>
<button id= "yButton">Rotate Y</button>
<button id= "zButton">Rotate Z</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 );
// Remeber: thse matrices are column-major
mat4 rx = mat4( 1.0,c.x,s.x,-s.x,1.0 );
mat4 ry = mat4( c.y,-s.y,s.y,c.y,1.0 );
mat4 rz = mat4( c.z,-s.z,s.z,c.z,1.0 );
fColor = vColor;
gl_Position = rz * ry * rx * vPosition;
}
</script>
<script id="fragment-shader" type="x-shader/x-fragment">
precision mediump float;
varying vec4 fColor;
void
main()
{
gl_FragColor = fColor;
}
</script>
<script src="https://esangel.github.io/WebGL/Common/webgl-utils.js"></script>
<script src="https://esangel.github.io/WebGL/Common/initShaders.js"></script>
<script src="https://esangel.github.io/WebGL/Common/MV.js"></script>
如果要使用透视3D而不是正交3D,则可以使用perspective matrix
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。