代码之家  ›  专栏  ›  技术社区  ›  Robert Harbison

生成球体顶点、索引和法线?

lwjgl opengl java
  •  3
  • Robert Harbison  · 技术社区  · 7 年前

    我正在LWJGL中做一个游戏,我正在尝试制作一个程序生成的行星(这个问题不一定与程序生成地形有关,我知道如何在平面上进行,我认为这有点类似)。我的问题是如何以编程方式生成一个包含顶点、索引和法线的球体,并且原点位于中间。我在互联网上四处寻找,只能找到生成顶点的方法。我不是要求你写代码,但我想在正确的方向推动或一些资源这样做。我想要生成自己的球体而不是仅仅从模型中导入一个球体的原因是,我可以轻松编辑顶点高度以生成地形,更改球体的大小以及轻松更改多边形数。我对如何做到这一点的想法如下。

    获取一个顶点数,该数表示应组成圆周的顶点数(数值越大,多边形越高)。把这个数字除以360,然后每个三角形都会被这个数字旋转成一个圆。然后使用相同的方法逐渐制作球体的其余部分。如果这是正确的方法,我将如何确定索引和法线?

    或

    获取球体应距原点的顶点数和半径。确定每个三角形的旋转量。从顶部以指定角度的两个三角形开始,然后从那里向外延伸,直到它以相同的角度沿着球体向下延伸,然后反转角度,以相同的方式完成底部。但我也不知道如何生成索引或法线。

    2 回复  |  直到 7 年前
        1
  •  3
  •   Rabbid76    7 年前

    以下伪代码通过叠加创建球体 layerTile 图层和 circumferenceTile

    底层和顶层是盖子,中间的层是圆盘。 由于球体的中心是(0,0,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 );


    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>
        2
  •  2
  •   Tobias Ribizel    7 年前

    生成顶点位置和法线

    最简单的方法是从 spherical coordinate system

    法线实际上很容易生成:因为球体的中心位于 (0,0,0) ,向量的法线 (x,y,z) (x,y,z)/length(x,y,z)

    生成索引

    还记得我是如何将球体描述为规则网格的吗?
    (longitude, latitude) 成对的形状
    (i * lon_step_size - 90°, j * lat_step_size) 。您只需使用索引将存储顶点的2D数组展平,即可对其进行索引 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) 在网格内。

    推荐文章
    MichaelT572  ·  忽略背面顶点的ModernGL深度测试(有时?)
    2 年前
    Jimmy Yang  ·  何时需要进行透视分割?
    2 年前
    Max Mister  ·  使用鼠标事件计算相机的位置和旋转
    6 年前
    Lane will  ·  OpenGL选择区域
    6 年前
    synchronizer  ·  openGL 2D视差滚动纹理撕裂/接缝
    6 年前
    Steven Venham  ·  OpenGL单通道到多通道的可行性
    6 年前
    synchronizer  ·  使用openGL、glm math和正交投影,旋转时扭曲的形状
    6 年前
    Andrew Lundgren  ·  如何在OpenTK(迷你地图!)
    6 年前
    Kevin Su  ·  无法在opengl中正确绘制我的汽车
    6 年前
    user1832287  ·  来自细分控制点的边上的瑕疵
    6 年前
    关于   移动版
    代码之家 - 一站式码农服务社区
    沪ICP备11025650号