生成球体顶点、索引和法线？
Generating spheres vertices, indices and normals?
我正在 LWJGL 中制作游戏，我正在尝试制作一个程序生成的星球（这个问题不一定与程序地形生成有关我知道如何在飞机上完成我认为它会是有点像）。我的问题是如何以编程方式生成一个具有顶点、索引和法线并且原点位于中间的球体。我在互联网上四处张望，只能找到生成顶点的方法。我不是要您编写代码，但我希望在正确的方向上推动或为此提供一些资源。我想要生成我自己的球体而不是从模型中导入一个球体的原因是我可以轻松地编辑顶点高度来制作地形、更改球体的大小以及轻松地更改多边形数。我的想法如下。
计算应该有多少个顶点组成圆周（数字越大，多边形越高）。将该数字除以 360，然后每个三角形将按该数字旋转形成一个圆圈。然后用同样的方法逐渐制作球体的其余部分。如果这是正确的做法，我将如何确定指数和法线？
或
获取球体应该从原点开始的顶点数和半径。确定每个三角形应旋转的量。从顶部的两个三角形开始，以指定的角度和世界从那里开始，直到它以相同的角度到达球体下方，然后反转角度并以相同的方式完成底部。但我还是不确定如何生成索引或法线。
生成顶点位置和法线
最简单的方法是从 spherical coordinate system 开始，您可以想象在纬度上从 -90° 到 90°（或径向角 -pi 到 pi）和从 0 到 pi 的规则网格间距经度 360°。如果将此网格从球坐标转换为笛卡尔坐标（半径 = 1 或您想要的其他半径）
法线其实很容易生成：由于球心位于(0,0,0)，向量(x,y,z)的法线就是归一化向量(x,y,z)/length(x,y,z)
生成索引
还记得我是如何将球体描述为规则网格的吗？
更准确地说，网格上的点是 (longitude, latitude) 对形式
(i * lon_step_size - 90°, j * lat_step_size)。您可以通过使用索引 i * num_lat_steps + j、
展平存储顶点的二维数组来简单地对它们进行索引
其中 num_lat_steps - 1 是 j 的最大值。
要构建索引缓冲区，您只需要使用此索引将 (i,j),(i+1,j),(i,j+1) 和 (i+1,j+1),(i,j+1),(i+1,j) 处的顶点连接到网格内每个索引对 (i,j) 的三角形。
请注意，使用这种方法，有两个点（lat=90° 或 lat=-90°）在顶点缓冲区中出现多次。如果你想消除这些重复项，你的索引会变得有点棘手，但你可能不必这样做，无论如何（这不是很大的开销）。
以下伪代码通过堆叠 layerTile 层和沿层圆周的 circumferenceTile 顶点位置创建一个球体。
底部和顶层是盖子，中间的层是圆盘。
由于球体的中心是(0, 0, 0)，所以顶点和法向量的方向相同。法向量被归一化并从球心指向球面。
纹理坐标包裹在两个半球上。因此每层的半个圆盘的端点被添加为分离点。这对于具有纹理坐标 V = 1.0 的点很重要，否则从纹理的末尾到下一个半球上下一部分的开始的过渡将是脏的。在极冠上，顶点位置也有多个，具有不同的纹理坐标，以获得干净的纹理过渡。
AddVertex( x, y, z, nvX, nvY, nvZ, u, v );
AddFace( i1, i2, i3 );
AddFace( i1, i2, i3, i4 ) {AddFace( i1, i2, i3 ); AddFace( i1, i3, i4 ); }
int circumferenceTile = 18;
int layerTile = 18;
float radius = 1.0;
创建顶点和属性：
int circCnt = (int)( circumferenceTile + 0.5f );
if ( circCnt < 4 ) circCnt = 4;
int circCnt_2 = circCnt / 2;
int layerCount = (int)( layerTile + 0.5f );
if ( layerCount < 2 ) layerCount = 2;
for ( int tbInx = 0; tbInx <= layerCount; tbInx ++ )
{
float v = ( 1.0 - (float)tbInx / layerCount );
float heightFac = Math.sin( ( 1.0 - 2.0 * tbInx / layerCount ) * Math.PI/2.0 );
float cosUp = Math.sqrt( 1.0 - heightFac * heightFac );
float z = heightFac;
for ( int i = 0; i <= circCnt_2; i ++ )
{
float u = (float)i / (float)circCnt_2;
float angle = Math.PI * u;
float x = Math.cos( angle ) * cosUp;
float y = Math.sin( angle ) * cosUp;
AddVertex( x * radius, y * radius, z * radius, x, y, z, u, v );
}
for ( int i = 0; i <= circCnt_2; i ++ )
{
float u = (float)i / (float)circCnt_2;
float angle = Math.PI * u + Math.PI;
float x = Math.cos( angle ) * cosUp;
float y = Math.sin( angle ) * cosUp;
AddVertex( x * radius, y * radius, z * radius, x, y, z, u, v );
}
}
创建索引：
底价
int circSize_2 = circCnt_2 + 1;
int circSize = circSize_2 * 2;
for ( int i = 0; i < circCnt_2; i ++ )
AddFace( circSize + i, circSize + i + 1, i );
for ( int i = circCnt_2+1; i < 2*circCnt_2+1; i ++ )
AddFace( circSize + i, circSize + i + 1, i );
光盘
for ( int tbInx = 1; tbInx < layerCount - 1; tbInx ++ )
{
int ringStart = tbInx * circSize;
int nextRingStart = (tbInx+1) * circSize;
for ( int i = 0; i < circCnt_2; i ++ )
AddFace( ringStart + i, nextRingStart + i, nextRingStart + i + 1, ringStart + i + 1 );
ringStart += circSize_2;
nextRingStart += circSize_2;
for ( int i = 0; i < circCnt_2; i ++ )
AddFace( ringStart + i, nextRingStart + i, nextRingStart + i + 1, ringStart + i + 1 );
}
上限
int start = (layerCount-1) * circSize;
for ( int i = 0; i < circCnt_2; i ++ )
AddFace( start + i + 1, start + i, start + i + circSize );
for ( int i = circCnt_2+1; i < 2*circCnt_2+1; i ++ )
AddFace( start + i + 1, start + i, start + i + circSize );
请参阅以下 WebGL/JavaScript 示例：
glArrayType = typeof Float32Array !="undefined" ? Float32Array : ( typeof WebGLFloatArray != "undefined" ? WebGLFloatArray : Array );
function IdentityMat44() {
var m = new glArrayType(16);
m[0] = 1; m[1] = 0; m[2] = 0; m[3] = 0;
m[4] = 0; m[5] = 1; m[6] = 0; m[7] = 0;
m[8] = 0; m[9] = 0; m[10] = 1; m[11] = 0;
m[12] = 0; m[13] = 0; m[14] = 0; m[15] = 1;
return m;
};
function RotateAxis(matA, angRad, axis) {
var aMap = [ [1, 2], [2, 0], [0, 1] ];
var a0 = aMap[axis][0], a1 = aMap[axis][1];
var sinAng = Math.sin(angRad), cosAng = Math.cos(angRad);
var matB = new glArrayType(16);
for ( var i = 0; i < 16; ++ i ) matB[i] = matA[i];
for ( var i = 0; i < 3; ++ i ) {
matB[a0*4+i] = matA[a0*4+i] * cosAng + matA[a1*4+i] * sinAng;
matB[a1*4+i] = matA[a0*4+i] * -sinAng + matA[a1*4+i] * cosAng;
}
return matB;
}
function Cross( a, b ) { return [ a[1] * b[2] - a[2] * b[1], a[2] * b[0] - a[0] * b[2], a[0] * b[1] - a[1] * b[0], 0.0 ]; }
function Dot( a, b ) { return a[0]*b[0] + a[1]*b[1] + a[2]*b[2]; }
function Normalize( v ) {
var len = Math.sqrt( v[0] * v[0] + v[1] * v[1] + v[2] * v[2] );
return [ v[0] / len, v[1] / len, v[2] / len ];
}
var Camera = {};
Camera.create = function() {
this.pos = [0, 1.5, 0.0];
this.target = [0, 0, 0];
this.up = [0, 0, 1];
this.fov_y = 90;
this.vp = [800, 600];
this.near = 0.5;
this.far = 100.0;
}
Camera.Perspective = function() {
var fn = this.far + this.near;
var f_n = this.far - this.near;
var r = this.vp[0] / this.vp[1];
var t = 1 / Math.tan( Math.PI * this.fov_y / 360 );
var m = IdentityMat44();
m[0] = t/r; m[1] = 0; m[2] = 0; m[3] = 0;
m[4] = 0; m[5] = t; m[6] = 0; m[7] = 0;
m[8] = 0; m[9] = 0; m[10] = -fn / f_n; m[11] = -1;
m[12] = 0; m[13] = 0; m[14] = -2 * this.far * this.near / f_n; m[15] = 0;
return m;
}
Camera.LookAt = function() {
var mz = Normalize( [ this.pos[0]-this.target[0], this.pos[1]-this.target[1], this.pos[2]-this.target[2] ] );
var mx = Normalize( Cross( this.up, mz ) );
var my = Normalize( Cross( mz, mx ) );
var tx = Dot( mx, this.pos );
var ty = Dot( my, this.pos );
var tz = Dot( [-mz[0], -mz[1], -mz[2]], this.pos );
var m = IdentityMat44();
m[0] = mx[0]; m[1] = my[0]; m[2] = mz[0]; m[3] = 0;
m[4] = mx[1]; m[5] = my[1]; m[6] = mz[1]; m[7] = 0;
m[8] = mx[2]; m[9] = my[2]; m[10] = mz[2]; m[11] = 0;
m[12] = tx; m[13] = ty; m[14] = tz; m[15] = 1;
return m;
}
// shader program object
var ShaderProgram = {};
ShaderProgram.Create = function( shaderList, uniformNames ) {
var shaderObjs = [];
for ( var i_sh = 0; i_sh < shaderList.length; ++ i_sh ) {
var shderObj = this.CompileShader( shaderList[i_sh].source, shaderList[i_sh].stage );
if ( shderObj == 0 )
return 0;
shaderObjs.push( shderObj );
}
var progObj = this.LinkProgram( shaderObjs )
if ( progObj != 0 ) {
progObj.unifomLocation = {};
for ( var i_n = 0; i_n < uniformNames.length; ++ i_n ) {
var name = uniformNames[i_n];
progObj.unifomLocation[name] = gl.getUniformLocation( progObj, name );
}
}
return progObj;
}
ShaderProgram.Use = function( progObj ) { gl.useProgram( progObj ); }
ShaderProgram.SetUniformInt = function( progObj, name, val ) { gl.uniform1i( progObj.unifomLocation[name], val ); }
ShaderProgram.SetUniformFloat = function( progObj, name, val ) { gl.uniform1f( progObj.unifomLocation[name], val ); }
ShaderProgram.SetUniform2f = function( progObj, name, arr ) { gl.uniform2fv( progObj.unifomLocation[name], arr ); }
ShaderProgram.SetUniform3f = function( progObj, name, arr ) { gl.uniform3fv( progObj.unifomLocation[name], arr ); }
ShaderProgram.SetUniformMat44 = function( progObj, name, mat ) { gl.uniformMatrix4fv( progObj.unifomLocation[name], false, mat ); }
ShaderProgram.CompileShader = function( source, shaderStage ) {
var shaderScript = document.getElementById(source);
if (shaderScript) {
source = "";
var node = shaderScript.firstChild;
while (node) {
if (node.nodeType == 3) source += node.textContent;
node = node.nextSibling;
}
}
var shaderObj = gl.createShader( shaderStage );
gl.shaderSource( shaderObj, source );
gl.compileShader( shaderObj );
var status = gl.getShaderParameter( shaderObj, gl.COMPILE_STATUS );
if ( !status ) alert(gl.getShaderInfoLog(shaderObj));
return status ? shaderObj : 0;
}
ShaderProgram.LinkProgram = function( shaderObjs ) {
var prog = gl.createProgram();
for ( var i_sh = 0; i_sh < shaderObjs.length; ++ i_sh )
gl.attachShader( prog, shaderObjs[i_sh] );
gl.linkProgram( prog );
status = gl.getProgramParameter( prog, gl.LINK_STATUS );
if ( !status ) alert("Could not initialise shaders");
gl.useProgram( null );
return status ? prog : 0;
}
function drawScene(){
var canvas = document.getElementById( "model-canvas" );
Camera.create();
Camera.vp = [canvas.width, canvas.height];
var currentTime = Date.now();
var deltaMS = currentTime - startTime;
gl.viewport( 0, 0, canvas.width, canvas.height );
gl.enable( gl.DEPTH_TEST );
gl.clearColor( 0.0, 0.0, 0.0, 1.0 );
gl.clear( gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT );
var texUnit = 0;
gl.activeTexture( gl.TEXTURE0 + texUnit );
gl.bindTexture( gl.TEXTURE_2D, textureObj );
// set up draw shader
ShaderProgram.Use( progDraw );
ShaderProgram.SetUniformMat44( progDraw, "u_projectionMat44", Camera.Perspective() );
ShaderProgram.SetUniformMat44( progDraw, "u_viewMat44", Camera.LookAt() );
ShaderProgram.SetUniform3f( progDraw, "u_lightDir", [-1.0, -0.5, -2.0] )
ShaderProgram.SetUniform3f( progDraw, "u_color", [1.0, 0.5, 0.0] )
var modelMat = IdentityMat44()
modelMat = RotateAxis( modelMat, CalcAng( currentTime, 13.0 ), 0 );
modelMat = RotateAxis( modelMat, CalcAng( currentTime, 17.0 ), 1 );
ShaderProgram.SetUniformMat44( progDraw, "u_modelMat44", modelMat );
ShaderProgram.SetUniformInt( progDraw, "u_texture", texUnit );
// draw scene
bufObj = bufSphere;
gl.enableVertexAttribArray( progDraw.inPos );
gl.enableVertexAttribArray( progDraw.inNV );
gl.enableVertexAttribArray( progDraw.inTex );
gl.bindBuffer( gl.ARRAY_BUFFER, bufObj.pos );
gl.vertexAttribPointer( progDraw.inPos, 3, gl.FLOAT, false, 0, 0 );
gl.bindBuffer( gl.ARRAY_BUFFER, bufObj.nv );
gl.vertexAttribPointer( progDraw.inNV, 3, gl.FLOAT, false, 0, 0 );
gl.bindBuffer( gl.ARRAY_BUFFER, bufObj.tex );
gl.vertexAttribPointer( progDraw.inTex, 2, gl.FLOAT, false, 0, 0 );
gl.bindBuffer( gl.ELEMENT_ARRAY_BUFFER, bufObj.inx );
gl.drawElements( gl.TRIANGLES, bufObj.inxLen, gl.UNSIGNED_SHORT, 0 );
gl.disableVertexAttribArray( progDraw.inPos );
gl.disableVertexAttribArray( progDraw.inNV );
gl.disableVertexAttribArray( progDraw.intex );
}
var startTime;
function Fract( val ) {
return val - Math.trunc( val );
}
function CalcAng( currentTime, varervall ) {
return Fract( (currentTime - startTime) / (1000*varervall) ) * 2.0 * Math.PI;
}
var sphere_pts = [];
var sphere_nv = [];
var sphere_tex = [];
var sphere_inx = [];
function AddVertex( x, y, z, nvX, nvY, nvZ, u, v )
{
sphere_pts.push( x, y, z );
sphere_nv.push( nvX, nvY, nvZ );
sphere_tex.push( u, v );
}
function AddFace( i1, i2, i3, i4 ) {
sphere_inx.push( i1, i2, i3 );
if ( i4 )
sphere_inx.push( i1, i3, i4 );
}
var gl;
var progDraw;
var bufSphere = {};
var textureObj;
function sceneStart() {
var canvas = document.getElementById( "model-canvas");
var vp = [canvas.width, canvas.height];
gl = canvas.getContext( "experimental-webgl" );
if ( !gl )
return;
progDraw = ShaderProgram.Create(
[ { source : "draw-shader-vs", stage : gl.VERTEX_SHADER },
{ source : "draw-shader-fs", stage : gl.FRAGMENT_SHADER }
],
[ "u_projectionMat44", "u_viewMat44", "u_modelMat44", "u_lightDir", "u_texture" ] );
progDraw.inPos = gl.getAttribLocation( progDraw, "inPos" );
progDraw.inNV = gl.getAttribLocation( progDraw, "inNV" );
progDraw.inTex = gl.getAttribLocation( progDraw, "inTex" );
if ( progDraw == 0 )
return;
// create sphere vertices
var layer_size = 16, circum_size = 32, radius = 1.0;
var circCnt = circum_size;
var circCnt_2 = circCnt / 2;
var layerCount = layer_size;
for ( var tbInx = 0; tbInx <= layerCount; tbInx ++ )
{
var v = ( 1.0 - tbInx / layerCount );
var heightFac = Math.sin( ( 1.0 - 2.0 * tbInx / layerCount ) * Math.PI/2.0 );
var cosUp = Math.sqrt( 1.0 - heightFac * heightFac );
var z = heightFac;
for ( var i = 0; i <= circCnt_2; i ++ )
{
var u = i / circCnt_2;
var angle = Math.PI * u;
var x = Math.cos( angle ) * cosUp;
var y = Math.sin( angle ) * cosUp;
AddVertex( x * radius, y * radius, z * radius, x, y, z, u, v );
}
for ( var i = 0; i <= circCnt_2; i ++ )
{
var u = i / circCnt_2;
var angle = Math.PI * u + Math.PI;
var x = Math.cos( angle ) * cosUp;
var y = Math.sin( angle ) * cosUp;
AddVertex( x * radius, y * radius, z * radius, x, y, z, u, v );
}
}
// bottom cap
var circSize_2 = circCnt_2 + 1;
var circSize = circSize_2 * 2;
for ( var i = 0; i < circCnt_2; i ++ )
AddFace( circSize + i, circSize + i + 1, i );
for ( var i = circCnt_2+1; i < 2*circCnt_2+1; i ++ )
AddFace( circSize + i, circSize + i + 1, i );
// discs
for ( var tbInx = 1; tbInx < layerCount - 1; tbInx ++ )
{
var ringStart = tbInx * circSize;
var nextRingStart = (tbInx+1) * circSize;
for ( var i = 0; i < circCnt_2; i ++ )
AddFace( ringStart + i, nextRingStart + i, nextRingStart + i + 1, ringStart + i + 1 );
ringStart += circSize_2;
nextRingStart += circSize_2;
for ( var i = 0; i < circCnt_2; i ++ )
AddFace( ringStart + i, nextRingStart + i, nextRingStart + i + 1, ringStart + i + 1 );
}
// top cap
var start = (layerCount-1) * circSize;
for ( var i = 0; i < circCnt_2; i ++ )
AddFace( start + i + 1, start + i, start + i + circSize );
for ( var i = circCnt_2+1; i < 2*circCnt_2+1; i ++ )
AddFace( start + i + 1, start + i, start + i + circSize );
bufSphere.pos = gl.createBuffer();
gl.bindBuffer( gl.ARRAY_BUFFER, bufSphere.pos );
gl.bufferData( gl.ARRAY_BUFFER, new Float32Array( sphere_pts ), gl.STATIC_DRAW );
bufSphere.nv = gl.createBuffer();
gl.bindBuffer( gl.ARRAY_BUFFER, bufSphere.nv );
gl.bufferData( gl.ARRAY_BUFFER, new Float32Array( sphere_nv ), gl.STATIC_DRAW );
bufSphere.tex = gl.createBuffer();
gl.bindBuffer( gl.ARRAY_BUFFER, bufSphere.tex );
gl.bufferData( gl.ARRAY_BUFFER, new Float32Array( sphere_tex ), gl.STATIC_DRAW );
bufSphere.inx = gl.createBuffer();
gl.bindBuffer( gl.ELEMENT_ARRAY_BUFFER, bufSphere.inx );
gl.bufferData( gl.ELEMENT_ARRAY_BUFFER, new Uint16Array( sphere_inx ), gl.STATIC_DRAW );
bufSphere.inxLen = sphere_inx.length;
var texCX = 128;
var texCY = 128;
var texPlan = [];
for (ix = 0; ix < texCX; ++ix) {
for (iy = 0; iy < texCY; ++iy) {
var val_x = Math.sin( Math.PI * 12.0 * ix / texCX )
var val_y = Math.sin( Math.PI * 12.0 * iy / texCY )
var r = val_x < -0.33 ? 0 : ( val_x < 0.33 ? 127 : 255 );
var g = val_x < -0.33 ? 255 : ( val_x < 0.33 ? 127 : 0 );
var b = val_y < -0.33 ? 0 : ( val_y < 0.33 ? 127 : 255 );
texPlan.push( r, g, b, 255 );
}
}
textureObj = gl.createTexture();
gl.activeTexture( gl.TEXTURE0 );
gl.bindTexture( gl.TEXTURE_2D, textureObj );
gl.texImage2D( gl.TEXTURE_2D, 0, gl.RGBA, texCX, texCY, 0, gl.RGBA, gl.UNSIGNED_BYTE, new Uint8Array( texPlan ) );
gl.pixelStorei( gl.UNPACK_FLIP_Y_WEBGL, true );
gl.texParameteri( gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR );
gl.texParameteri( gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR );
gl.texParameteri( gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.REPEAT );
gl.texParameteri( gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.REPEAT );
startTime = Date.now();
setInterval(drawScene, 50);
}
<script id="draw-shader-vs" type="x-shader/x-vertex">
precision mediump float;
attribute vec3 inPos;
attribute vec3 inNV;
attribute vec2 inTex;
varying float NdotL;
varying vec2 texCoord;
uniform mat4 u_projectionMat44;
uniform mat4 u_viewMat44;
uniform mat4 u_modelMat44;
uniform vec3 u_lightDir;
void main()
{
vec3 modelNV = mat3( u_modelMat44 ) * normalize( inNV );
vec3 normalV = mat3( u_viewMat44 ) * modelNV;
vec3 lightV = normalize( -u_lightDir );
NdotL = max( 0.0, dot( normalV, lightV ) );
texCoord = inTex;
vec4 modelPos = u_modelMat44 * vec4( inPos, 1.0 );
vec4 viewPos = u_viewMat44 * modelPos;
gl_Position = u_projectionMat44 * viewPos;
}
</script>
<script id="draw-shader-fs" type="x-shader/x-fragment">
precision mediump float;
varying float NdotL;
varying vec2 texCoord;
uniform sampler2D u_texture;
void main()
{
vec3 texColor = texture2D( u_texture, texCoord.st ).rgb;
vec3 lightCol = (0.2 + 0.8 * NdotL) * texColor.rgb;
gl_FragColor = vec4( lightCol.rgb, 1.0 );
}
</script>
<body onload="sceneStart();">
<canvas id="model-canvas" style="border: none;" width="256" height="256"></canvas>
</body>
我正在 LWJGL 中制作游戏，我正在尝试制作一个程序生成的星球（这个问题不一定与程序地形生成有关我知道如何在飞机上完成我认为它会是有点像）。我的问题是如何以编程方式生成一个具有顶点、索引和法线并且原点位于中间的球体。我在互联网上四处张望，只能找到生成顶点的方法。我不是要您编写代码，但我希望在正确的方向上推动或为此提供一些资源。我想要生成我自己的球体而不是从模型中导入一个球体的原因是我可以轻松地编辑顶点高度来制作地形、更改球体的大小以及轻松地更改多边形数。我的想法如下。
计算应该有多少个顶点组成圆周（数字越大，多边形越高）。将该数字除以 360，然后每个三角形将按该数字旋转形成一个圆圈。然后用同样的方法逐渐制作球体的其余部分。如果这是正确的做法，我将如何确定指数和法线？
或
获取球体应该从原点开始的顶点数和半径。确定每个三角形应旋转的量。从顶部的两个三角形开始，以指定的角度和世界从那里开始，直到它以相同的角度到达球体下方，然后反转角度并以相同的方式完成底部。但我还是不确定如何生成索引或法线。
生成顶点位置和法线
最简单的方法是从 spherical coordinate system 开始，您可以想象在纬度上从 -90° 到 90°（或径向角 -pi 到 pi）和从 0 到 pi 的规则网格间距经度 360°。如果将此网格从球坐标转换为笛卡尔坐标（半径 = 1 或您想要的其他半径）
法线其实很容易生成：由于球心位于(0,0,0)，向量(x,y,z)的法线就是归一化向量(x,y,z)/length(x,y,z)
生成索引
还记得我是如何将球体描述为规则网格的吗？
更准确地说，网格上的点是 (longitude, latitude) 对形式
(i * lon_step_size - 90°, j * lat_step_size)。您可以通过使用索引 i * num_lat_steps + j、
展平存储顶点的二维数组来简单地对它们进行索引
其中 num_lat_steps - 1 是 j 的最大值。
要构建索引缓冲区，您只需要使用此索引将 (i,j),(i+1,j),(i,j+1) 和 (i+1,j+1),(i,j+1),(i+1,j) 处的顶点连接到网格内每个索引对 (i,j) 的三角形。
请注意，使用这种方法，有两个点（lat=90° 或 lat=-90°）在顶点缓冲区中出现多次。如果你想消除这些重复项，你的索引会变得有点棘手，但你可能不必这样做，无论如何（这不是很大的开销）。
以下伪代码通过堆叠 layerTile 层和沿层圆周的 circumferenceTile 顶点位置创建一个球体。
底部和顶层是盖子，中间的层是圆盘。 由于球体的中心是(0, 0, 0)，所以顶点和法向量的方向相同。法向量被归一化并从球心指向球面。
纹理坐标包裹在两个半球上。因此每层的半个圆盘的端点被添加为分离点。这对于具有纹理坐标 V = 1.0 的点很重要，否则从纹理的末尾到下一个半球上下一部分的开始的过渡将是脏的。在极冠上，顶点位置也有多个，具有不同的纹理坐标，以获得干净的纹理过渡。
AddVertex( x, y, z, nvX, nvY, nvZ, u, v );
AddFace( i1, i2, i3 );
AddFace( i1, i2, i3, i4 ) {AddFace( i1, i2, i3 ); AddFace( i1, i3, i4 ); }
int circumferenceTile = 18;
int layerTile = 18;
float radius = 1.0;
创建顶点和属性：
int circCnt = (int)( circumferenceTile + 0.5f );
if ( circCnt < 4 ) circCnt = 4;
int circCnt_2 = circCnt / 2;
int layerCount = (int)( layerTile + 0.5f );
if ( layerCount < 2 ) layerCount = 2;
for ( int tbInx = 0; tbInx <= layerCount; tbInx ++ )
{
float v = ( 1.0 - (float)tbInx / layerCount );
float heightFac = Math.sin( ( 1.0 - 2.0 * tbInx / layerCount ) * Math.PI/2.0 );
float cosUp = Math.sqrt( 1.0 - heightFac * heightFac );
float z = heightFac;
for ( int i = 0; i <= circCnt_2; i ++ )
{
float u = (float)i / (float)circCnt_2;
float angle = Math.PI * u;
float x = Math.cos( angle ) * cosUp;
float y = Math.sin( angle ) * cosUp;
AddVertex( x * radius, y * radius, z * radius, x, y, z, u, v );
}
for ( int i = 0; i <= circCnt_2; i ++ )
{
float u = (float)i / (float)circCnt_2;
float angle = Math.PI * u + Math.PI;
float x = Math.cos( angle ) * cosUp;
float y = Math.sin( angle ) * cosUp;
AddVertex( x * radius, y * radius, z * radius, x, y, z, u, v );
}
}
创建索引：
底价
int circSize_2 = circCnt_2 + 1;
int circSize = circSize_2 * 2;
for ( int i = 0; i < circCnt_2; i ++ )
AddFace( circSize + i, circSize + i + 1, i );
for ( int i = circCnt_2+1; i < 2*circCnt_2+1; i ++ )
AddFace( circSize + i, circSize + i + 1, i );
光盘
for ( int tbInx = 1; tbInx < layerCount - 1; tbInx ++ )
{
int ringStart = tbInx * circSize;
int nextRingStart = (tbInx+1) * circSize;
for ( int i = 0; i < circCnt_2; i ++ )
AddFace( ringStart + i, nextRingStart + i, nextRingStart + i + 1, ringStart + i + 1 );
ringStart += circSize_2;
nextRingStart += circSize_2;
for ( int i = 0; i < circCnt_2; i ++ )
AddFace( ringStart + i, nextRingStart + i, nextRingStart + i + 1, ringStart + i + 1 );
}
上限
int start = (layerCount-1) * circSize;
for ( int i = 0; i < circCnt_2; i ++ )
AddFace( start + i + 1, start + i, start + i + circSize );
for ( int i = circCnt_2+1; i < 2*circCnt_2+1; i ++ )
AddFace( start + i + 1, start + i, start + i + circSize );
请参阅以下 WebGL/JavaScript 示例：
glArrayType = typeof Float32Array !="undefined" ? Float32Array : ( typeof WebGLFloatArray != "undefined" ? WebGLFloatArray : Array );
function IdentityMat44() {
var m = new glArrayType(16);
m[0] = 1; m[1] = 0; m[2] = 0; m[3] = 0;
m[4] = 0; m[5] = 1; m[6] = 0; m[7] = 0;
m[8] = 0; m[9] = 0; m[10] = 1; m[11] = 0;
m[12] = 0; m[13] = 0; m[14] = 0; m[15] = 1;
return m;
};
function RotateAxis(matA, angRad, axis) {
var aMap = [ [1, 2], [2, 0], [0, 1] ];
var a0 = aMap[axis][0], a1 = aMap[axis][1];
var sinAng = Math.sin(angRad), cosAng = Math.cos(angRad);
var matB = new glArrayType(16);
for ( var i = 0; i < 16; ++ i ) matB[i] = matA[i];
for ( var i = 0; i < 3; ++ i ) {
matB[a0*4+i] = matA[a0*4+i] * cosAng + matA[a1*4+i] * sinAng;
matB[a1*4+i] = matA[a0*4+i] * -sinAng + matA[a1*4+i] * cosAng;
}
return matB;
}
function Cross( a, b ) { return [ a[1] * b[2] - a[2] * b[1], a[2] * b[0] - a[0] * b[2], a[0] * b[1] - a[1] * b[0], 0.0 ]; }
function Dot( a, b ) { return a[0]*b[0] + a[1]*b[1] + a[2]*b[2]; }
function Normalize( v ) {
var len = Math.sqrt( v[0] * v[0] + v[1] * v[1] + v[2] * v[2] );
return [ v[0] / len, v[1] / len, v[2] / len ];
}
var Camera = {};
Camera.create = function() {
this.pos = [0, 1.5, 0.0];
this.target = [0, 0, 0];
this.up = [0, 0, 1];
this.fov_y = 90;
this.vp = [800, 600];
this.near = 0.5;
this.far = 100.0;
}
Camera.Perspective = function() {
var fn = this.far + this.near;
var f_n = this.far - this.near;
var r = this.vp[0] / this.vp[1];
var t = 1 / Math.tan( Math.PI * this.fov_y / 360 );
var m = IdentityMat44();
m[0] = t/r; m[1] = 0; m[2] = 0; m[3] = 0;
m[4] = 0; m[5] = t; m[6] = 0; m[7] = 0;
m[8] = 0; m[9] = 0; m[10] = -fn / f_n; m[11] = -1;
m[12] = 0; m[13] = 0; m[14] = -2 * this.far * this.near / f_n; m[15] = 0;
return m;
}
Camera.LookAt = function() {
var mz = Normalize( [ this.pos[0]-this.target[0], this.pos[1]-this.target[1], this.pos[2]-this.target[2] ] );
var mx = Normalize( Cross( this.up, mz ) );
var my = Normalize( Cross( mz, mx ) );
var tx = Dot( mx, this.pos );
var ty = Dot( my, this.pos );
var tz = Dot( [-mz[0], -mz[1], -mz[2]], this.pos );
var m = IdentityMat44();
m[0] = mx[0]; m[1] = my[0]; m[2] = mz[0]; m[3] = 0;
m[4] = mx[1]; m[5] = my[1]; m[6] = mz[1]; m[7] = 0;
m[8] = mx[2]; m[9] = my[2]; m[10] = mz[2]; m[11] = 0;
m[12] = tx; m[13] = ty; m[14] = tz; m[15] = 1;
return m;
}
// shader program object
var ShaderProgram = {};
ShaderProgram.Create = function( shaderList, uniformNames ) {
var shaderObjs = [];
for ( var i_sh = 0; i_sh < shaderList.length; ++ i_sh ) {
var shderObj = this.CompileShader( shaderList[i_sh].source, shaderList[i_sh].stage );
if ( shderObj == 0 )
return 0;
shaderObjs.push( shderObj );
}
var progObj = this.LinkProgram( shaderObjs )
if ( progObj != 0 ) {
progObj.unifomLocation = {};
for ( var i_n = 0; i_n < uniformNames.length; ++ i_n ) {
var name = uniformNames[i_n];
progObj.unifomLocation[name] = gl.getUniformLocation( progObj, name );
}
}
return progObj;
}
ShaderProgram.Use = function( progObj ) { gl.useProgram( progObj ); }
ShaderProgram.SetUniformInt = function( progObj, name, val ) { gl.uniform1i( progObj.unifomLocation[name], val ); }
ShaderProgram.SetUniformFloat = function( progObj, name, val ) { gl.uniform1f( progObj.unifomLocation[name], val ); }
ShaderProgram.SetUniform2f = function( progObj, name, arr ) { gl.uniform2fv( progObj.unifomLocation[name], arr ); }
ShaderProgram.SetUniform3f = function( progObj, name, arr ) { gl.uniform3fv( progObj.unifomLocation[name], arr ); }
ShaderProgram.SetUniformMat44 = function( progObj, name, mat ) { gl.uniformMatrix4fv( progObj.unifomLocation[name], false, mat ); }
ShaderProgram.CompileShader = function( source, shaderStage ) {
var shaderScript = document.getElementById(source);
if (shaderScript) {
source = "";
var node = shaderScript.firstChild;
while (node) {
if (node.nodeType == 3) source += node.textContent;
node = node.nextSibling;
}
}
var shaderObj = gl.createShader( shaderStage );
gl.shaderSource( shaderObj, source );
gl.compileShader( shaderObj );
var status = gl.getShaderParameter( shaderObj, gl.COMPILE_STATUS );
if ( !status ) alert(gl.getShaderInfoLog(shaderObj));
return status ? shaderObj : 0;
}
ShaderProgram.LinkProgram = function( shaderObjs ) {
var prog = gl.createProgram();
for ( var i_sh = 0; i_sh < shaderObjs.length; ++ i_sh )
gl.attachShader( prog, shaderObjs[i_sh] );
gl.linkProgram( prog );
status = gl.getProgramParameter( prog, gl.LINK_STATUS );
if ( !status ) alert("Could not initialise shaders");
gl.useProgram( null );
return status ? prog : 0;
}
function drawScene(){
var canvas = document.getElementById( "model-canvas" );
Camera.create();
Camera.vp = [canvas.width, canvas.height];
var currentTime = Date.now();
var deltaMS = currentTime - startTime;
gl.viewport( 0, 0, canvas.width, canvas.height );
gl.enable( gl.DEPTH_TEST );
gl.clearColor( 0.0, 0.0, 0.0, 1.0 );
gl.clear( gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT );
var texUnit = 0;
gl.activeTexture( gl.TEXTURE0 + texUnit );
gl.bindTexture( gl.TEXTURE_2D, textureObj );
// set up draw shader
ShaderProgram.Use( progDraw );
ShaderProgram.SetUniformMat44( progDraw, "u_projectionMat44", Camera.Perspective() );
ShaderProgram.SetUniformMat44( progDraw, "u_viewMat44", Camera.LookAt() );
ShaderProgram.SetUniform3f( progDraw, "u_lightDir", [-1.0, -0.5, -2.0] )
ShaderProgram.SetUniform3f( progDraw, "u_color", [1.0, 0.5, 0.0] )
var modelMat = IdentityMat44()
modelMat = RotateAxis( modelMat, CalcAng( currentTime, 13.0 ), 0 );
modelMat = RotateAxis( modelMat, CalcAng( currentTime, 17.0 ), 1 );
ShaderProgram.SetUniformMat44( progDraw, "u_modelMat44", modelMat );
ShaderProgram.SetUniformInt( progDraw, "u_texture", texUnit );
// draw scene
bufObj = bufSphere;
gl.enableVertexAttribArray( progDraw.inPos );
gl.enableVertexAttribArray( progDraw.inNV );
gl.enableVertexAttribArray( progDraw.inTex );
gl.bindBuffer( gl.ARRAY_BUFFER, bufObj.pos );
gl.vertexAttribPointer( progDraw.inPos, 3, gl.FLOAT, false, 0, 0 );
gl.bindBuffer( gl.ARRAY_BUFFER, bufObj.nv );
gl.vertexAttribPointer( progDraw.inNV, 3, gl.FLOAT, false, 0, 0 );
gl.bindBuffer( gl.ARRAY_BUFFER, bufObj.tex );
gl.vertexAttribPointer( progDraw.inTex, 2, gl.FLOAT, false, 0, 0 );
gl.bindBuffer( gl.ELEMENT_ARRAY_BUFFER, bufObj.inx );
gl.drawElements( gl.TRIANGLES, bufObj.inxLen, gl.UNSIGNED_SHORT, 0 );
gl.disableVertexAttribArray( progDraw.inPos );
gl.disableVertexAttribArray( progDraw.inNV );
gl.disableVertexAttribArray( progDraw.intex );
}
var startTime;
function Fract( val ) {
return val - Math.trunc( val );
}
function CalcAng( currentTime, varervall ) {
return Fract( (currentTime - startTime) / (1000*varervall) ) * 2.0 * Math.PI;
}
var sphere_pts = [];
var sphere_nv = [];
var sphere_tex = [];
var sphere_inx = [];
function AddVertex( x, y, z, nvX, nvY, nvZ, u, v )
{
sphere_pts.push( x, y, z );
sphere_nv.push( nvX, nvY, nvZ );
sphere_tex.push( u, v );
}
function AddFace( i1, i2, i3, i4 ) {
sphere_inx.push( i1, i2, i3 );
if ( i4 )
sphere_inx.push( i1, i3, i4 );
}
var gl;
var progDraw;
var bufSphere = {};
var textureObj;
function sceneStart() {
var canvas = document.getElementById( "model-canvas");
var vp = [canvas.width, canvas.height];
gl = canvas.getContext( "experimental-webgl" );
if ( !gl )
return;
progDraw = ShaderProgram.Create(
[ { source : "draw-shader-vs", stage : gl.VERTEX_SHADER },
{ source : "draw-shader-fs", stage : gl.FRAGMENT_SHADER }
],
[ "u_projectionMat44", "u_viewMat44", "u_modelMat44", "u_lightDir", "u_texture" ] );
progDraw.inPos = gl.getAttribLocation( progDraw, "inPos" );
progDraw.inNV = gl.getAttribLocation( progDraw, "inNV" );
progDraw.inTex = gl.getAttribLocation( progDraw, "inTex" );
if ( progDraw == 0 )
return;
// create sphere vertices
var layer_size = 16, circum_size = 32, radius = 1.0;
var circCnt = circum_size;
var circCnt_2 = circCnt / 2;
var layerCount = layer_size;
for ( var tbInx = 0; tbInx <= layerCount; tbInx ++ )
{
var v = ( 1.0 - tbInx / layerCount );
var heightFac = Math.sin( ( 1.0 - 2.0 * tbInx / layerCount ) * Math.PI/2.0 );
var cosUp = Math.sqrt( 1.0 - heightFac * heightFac );
var z = heightFac;
for ( var i = 0; i <= circCnt_2; i ++ )
{
var u = i / circCnt_2;
var angle = Math.PI * u;
var x = Math.cos( angle ) * cosUp;
var y = Math.sin( angle ) * cosUp;
AddVertex( x * radius, y * radius, z * radius, x, y, z, u, v );
}
for ( var i = 0; i <= circCnt_2; i ++ )
{
var u = i / circCnt_2;
var angle = Math.PI * u + Math.PI;
var x = Math.cos( angle ) * cosUp;
var y = Math.sin( angle ) * cosUp;
AddVertex( x * radius, y * radius, z * radius, x, y, z, u, v );
}
}
// bottom cap
var circSize_2 = circCnt_2 + 1;
var circSize = circSize_2 * 2;
for ( var i = 0; i < circCnt_2; i ++ )
AddFace( circSize + i, circSize + i + 1, i );
for ( var i = circCnt_2+1; i < 2*circCnt_2+1; i ++ )
AddFace( circSize + i, circSize + i + 1, i );
// discs
for ( var tbInx = 1; tbInx < layerCount - 1; tbInx ++ )
{
var ringStart = tbInx * circSize;
var nextRingStart = (tbInx+1) * circSize;
for ( var i = 0; i < circCnt_2; i ++ )
AddFace( ringStart + i, nextRingStart + i, nextRingStart + i + 1, ringStart + i + 1 );
ringStart += circSize_2;
nextRingStart += circSize_2;
for ( var i = 0; i < circCnt_2; i ++ )
AddFace( ringStart + i, nextRingStart + i, nextRingStart + i + 1, ringStart + i + 1 );
}
// top cap
var start = (layerCount-1) * circSize;
for ( var i = 0; i < circCnt_2; i ++ )
AddFace( start + i + 1, start + i, start + i + circSize );
for ( var i = circCnt_2+1; i < 2*circCnt_2+1; i ++ )
AddFace( start + i + 1, start + i, start + i + circSize );
bufSphere.pos = gl.createBuffer();
gl.bindBuffer( gl.ARRAY_BUFFER, bufSphere.pos );
gl.bufferData( gl.ARRAY_BUFFER, new Float32Array( sphere_pts ), gl.STATIC_DRAW );
bufSphere.nv = gl.createBuffer();
gl.bindBuffer( gl.ARRAY_BUFFER, bufSphere.nv );
gl.bufferData( gl.ARRAY_BUFFER, new Float32Array( sphere_nv ), gl.STATIC_DRAW );
bufSphere.tex = gl.createBuffer();
gl.bindBuffer( gl.ARRAY_BUFFER, bufSphere.tex );
gl.bufferData( gl.ARRAY_BUFFER, new Float32Array( sphere_tex ), gl.STATIC_DRAW );
bufSphere.inx = gl.createBuffer();
gl.bindBuffer( gl.ELEMENT_ARRAY_BUFFER, bufSphere.inx );
gl.bufferData( gl.ELEMENT_ARRAY_BUFFER, new Uint16Array( sphere_inx ), gl.STATIC_DRAW );
bufSphere.inxLen = sphere_inx.length;
var texCX = 128;
var texCY = 128;
var texPlan = [];
for (ix = 0; ix < texCX; ++ix) {
for (iy = 0; iy < texCY; ++iy) {
var val_x = Math.sin( Math.PI * 12.0 * ix / texCX )
var val_y = Math.sin( Math.PI * 12.0 * iy / texCY )
var r = val_x < -0.33 ? 0 : ( val_x < 0.33 ? 127 : 255 );
var g = val_x < -0.33 ? 255 : ( val_x < 0.33 ? 127 : 0 );
var b = val_y < -0.33 ? 0 : ( val_y < 0.33 ? 127 : 255 );
texPlan.push( r, g, b, 255 );
}
}
textureObj = gl.createTexture();
gl.activeTexture( gl.TEXTURE0 );
gl.bindTexture( gl.TEXTURE_2D, textureObj );
gl.texImage2D( gl.TEXTURE_2D, 0, gl.RGBA, texCX, texCY, 0, gl.RGBA, gl.UNSIGNED_BYTE, new Uint8Array( texPlan ) );
gl.pixelStorei( gl.UNPACK_FLIP_Y_WEBGL, true );
gl.texParameteri( gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR );
gl.texParameteri( gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR );
gl.texParameteri( gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.REPEAT );
gl.texParameteri( gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.REPEAT );
startTime = Date.now();
setInterval(drawScene, 50);
}
<script id="draw-shader-vs" type="x-shader/x-vertex">
precision mediump float;
attribute vec3 inPos;
attribute vec3 inNV;
attribute vec2 inTex;
varying float NdotL;
varying vec2 texCoord;
uniform mat4 u_projectionMat44;
uniform mat4 u_viewMat44;
uniform mat4 u_modelMat44;
uniform vec3 u_lightDir;
void main()
{
vec3 modelNV = mat3( u_modelMat44 ) * normalize( inNV );
vec3 normalV = mat3( u_viewMat44 ) * modelNV;
vec3 lightV = normalize( -u_lightDir );
NdotL = max( 0.0, dot( normalV, lightV ) );
texCoord = inTex;
vec4 modelPos = u_modelMat44 * vec4( inPos, 1.0 );
vec4 viewPos = u_viewMat44 * modelPos;
gl_Position = u_projectionMat44 * viewPos;
}
</script>
<script id="draw-shader-fs" type="x-shader/x-fragment">
precision mediump float;
varying float NdotL;
varying vec2 texCoord;
uniform sampler2D u_texture;
void main()
{
vec3 texColor = texture2D( u_texture, texCoord.st ).rgb;
vec3 lightCol = (0.2 + 0.8 * NdotL) * texColor.rgb;
gl_FragColor = vec4( lightCol.rgb, 1.0 );
}
</script>
<body onload="sceneStart();">
<canvas id="model-canvas" style="border: none;" width="256" height="256"></canvas>
</body>