An almost working sphere primitive

[guidocalvano]

The sphere loads, but it won't show the texture properly. All I get is a black shape.

First I give the sphere code, then I give the code that will load the sphere but won't load the texture...

THE SPHERE

function createSphere( heightDivisions, pieSlices, invertNormals )
{
var normalDirection = 1 ;

 if( invertNormals == undefined ) 
    {
     invertNormals = false ;
    }


 if( invertNormals ) normalDirection *= -1 ;


 var mesh = new GLGE.Mesh() ;

 var x ;
 var y ;
 var z ;

 var radius ;

 var pointCount = 0 ;

 var points = Array() ;
 var uv = Array() ;


 for( var i = 0 ; i <= Math.PI ; i += Math.PI / heightDivisions )
    {
     z      = 1 - Math.cos( i ) ;
     radius = Math.sin( i ) ;

     for( var j = 0 ; j < 2 * Math.PI ; j += 2 * Math.PI / pieSlices )
        {
         x = radius * Math.cos( j ) ;
         y = radius * Math.sin( j ) ;

         uv.push( j / ( 2 * Math.PI ) ) ;
         uv.push( z ) ;


         points.push( x / 2 ) ;
         points.push( y / 2 ) ;
         points.push( z / 2 ) ;

         pointCount++ ;
        }

    }


 mesh.setPositions(  points ) ;
 mesh.setUV( uv ) ;


 normals = Array() ;

 for( var q in points )
 {
  if( q % 3 == 2 )
    normals.push( normalDirection * ( points[ q ] * 2 - 1 ) ) ;
  else
    normals.push( normalDirection * ( points[ q ] * 2 ) ) ;


 }




 mesh.setNormals( normals ) ;


 var faces= Array() ;


 var m ;




for( var l = 0 ; l < heightDivisions ; l += 1 )
   {


     var low  =   l       * pieSlices     ;
     var high = ( l + 1 ) * pieSlices     ;

     for( m = 0 ; m < pieSlices - 1 ; m += 1 )
        {
         var lowLeft    = low + m           ;
         var lowRight   = low + m + 1       ;

         var highLeft    = high + m         ;
         var highRight   = high + m + 1     ;

         faces.push( lowLeft  ) ;
         faces.push( lowRight ) ;
         faces.push( highLeft ) ;

         faces.push( highLeft  ) ;
         faces.push( highRight ) ;
         faces.push( lowRight  ) ;            
        }

     faces.push( low ) ;
     faces.push( high ) ;
     faces.push( high + pieSlices - 1 ) ;

     faces.push( low  + pieSlices - 1 ) ;
     faces.push( low  ) ;
     faces.push( high + pieSlices - 1 ) ;

    }



mesh.setFaces( faces ) ;

 //     alert( mesh.faces.data ) ;


 return mesh ;
}

THE INVOKING CODE

var spaceTexture = new GLGE.Texture( "space" ) ;

spaceTexture.setSrc( "spaceSmall.png" ) ;

var materialLayer = new GLGE.MaterialLayer() ;
materialLayer.setTexture( spaceTexture ) ;

materialLayer.setMapinput( GLGE.UV1 ) ;
materialLayer.setMapto( GLGE.M_COLOR ) ;

var mat = new GLGE.Material() ;
mat.addTexture( spaceTexture ) ;

mat.addMaterialLayer( materialLayer ) ;



var sphereMesh = createSphere( 20, 20 ) ;

var sphereMaterial = new GLGE.Material() ;

var sphereObject = new GLGE.Object() ;

sphereObject.setMesh(       sphereMesh      ) ;
sphereObject.setMaterial(   mat  ) ;

[guidocalvano]

Please help (:

[guidocalvano]

I could make a cone and a cylinder relatively easy as well by the way. The only complex issue is how to practically put the UVs on them.

[supereggbert]

Way cool..that's something I've been meaning to do for ages. As for the texture problem, it seems to be working for me are you using a power of two texture?

PS its bad practice to but "{" on next line in javascript since it makes the code ambiguous.

[guidocalvano]

Nope I wasn't. And yup that was it. It's not in the api documentation on your site. If it were a wiki I'd put it there myself. Wait a week before you integrate the sphere and I'll give you one that has a better uv coordinate system. I can also create a cylinder and a cone mesh relatively easily. The only issue with the cone and the cylinder is how to map the uv coordinates to the bottom of the cone or the top and bottom of the cylinder.

When I decided on the uv system for the sphere (that I haven't posted yet I think, I am a few versions further) I assumed that the sphere would be used with panorama textures for stuff like sky domes etc. I included an option for inverting the normals so you can make the inside visible, instead of the outside.

And if you have any comments on how you'd like them, please post it. Cheers ^ ^ d

[supereggbert]

You're right a wiki is defiantly needed, would probably prompt me to do a little more documenting when I get a chance too. I'll see about sorting that out.

[henrikbennetsen]

I see you have already something in the wiki right here in github. I think there is something to be said for not creating a new place to go look for stuff. And as with issue stuff here gets decent over time :)