Spherical Heightmap

czwaal

in Contributed Library Questions • 2 years ago

Hi!

I'm trying to add a heightmap to a sphere with an GLModel since I need quite a lot of vertices to render a somewhat realistic model of Mars. (the one below has 250.000 vertices, although im planning to use 10.000 in the final version through the use of a normal map).

I started out using the TexturedSphere example from GLGraphics but quickly switched out the calcCoords() function for my own which uses cartesian coordinates. Except I get this, admittely funky looking, line drawing as of now.

Does anyone now how to get it right?

import processing.opengl.*;
import codeanticode.glgraphics.*;
import javax.media.opengl.*;
int globeDetail = 100;
float rotationX = 0.0f,
rotationY = 0.0f,
velocityX = 0.0f,
velocityY = 0.0f,
globeRadius = 450.0f,
distance = 20000.0f;
String globeMapName = "mars_6k_color.jpg";
PImage globeHeight;
ArrayList vertices = new ArrayList(),
texCoords = new ArrayList(),
normals = new ArrayList();
PFont font;
GLModel mars;
GLTexture tex;
public void setup() {
size(screen.width, screen.height, GLConstants.GLGRAPHICS);
hint(ENABLE_OPENGL_4X_SMOOTH);
font = loadFont("LucidaSansUnicode.vlw");
globeHeight = loadImage("mars_6k_topo.jpg");
setupSphere();
mars = new GLModel(this, vertices.size(), TRIANGLE_STRIP, GLModel.STATIC);
mars.updateVertices(vertices);
tex = new GLTexture(this, globeMapName);
mars.initTextures(1);
mars.setTexture(0, tex);
mars.updateTexCoords(0, texCoords);
mars.initNormals();
mars.updateNormals(normals);
mars.initColors();
mars.setColors(255);
mars.setShininess(100);
}
public void draw() {
background(0);
GLGraphics renderer = (GLGraphics)g;
renderer.beginGL();
renderer.gl.glEnable(GL.GL_LIGHTING);
renderer.gl.glEnable(GL.GL_LIGHT0);
renderer.gl.glMaterialfv(GL.GL_FRONT_AND_BACK, GL.GL_AMBIENT, new float[]{0.1,0.1,0.1,1}, 0);
renderer.gl.glMaterialfv(GL.GL_FRONT_AND_BACK, GL.GL_DIFFUSE, new float[]{0.9,0.9,0.9,1}, 0);
renderer.gl.glLightfv(GL.GL_LIGHT0, GL.GL_POSITION, new float[] {1000, -600, 400, 0 }, 0);
renderer.gl.glLightfv(GL.GL_LIGHT0, GL.GL_SPECULAR, new float[] { 1, 1, 1, 0.75 }, 1);
translate(width/2, height/2, 0);
pushMatrix();
rotateX(radians(rotationX));
rotateY(radians(270 - rotationY));
renderer.model(mars);
popMatrix();
renderer.endGL();
rotationX += velocityX;
rotationY += velocityY;
velocityX *= 0.95;
velocityY *= 0.95;
if (mousePressed) {
velocityX += -(mouseY-pmouseY) * 0.01;
velocityY -= (mouseX-pmouseX) * 0.01;
}
}
public void setupSphere(){
float[] grid = new float[globeDetail+1];
for(int i = 0; i <= globeDetail; i++){
grid[i]= i / (float) globeDetail;
}
for(int i = 0; i <= globeDetail; i++){
for(int j = 0; j <= globeDetail; j++){
calcPoint(grid[i], grid[j]);
}
}
}
void calcPoint(float x, float y){
float phi = x*2*PI;
float theta = PI - y*PI;
int nx = (int) map(x, 0, 1, 0, globeHeight.width);
int ny = (int) map(y, 0, 1, 0, globeHeight.height);
int index = nx+ny*globeHeight.width;
float h = 0;
try {
h = brightness(globeHeight.pixels[index])/10;
} catch(ArrayIndexOutOfBoundsException e) {}
float mx = (globeRadius+h)*sin(theta)*cos(phi);
float my = (globeRadius+h)*sin(theta)*sin(phi);
float mz = (globeRadius+h)*cos(theta);
addVertex(mx, my, mz, x, y);
}
void addVertex(float x, float y, float z, float u, float v) {
PVector vert = new PVector(x, y, z);
PVector texCoord = new PVector(u, v);
PVector vertNorm = PVector.div(vert, vert.mag());
vertices.add(vert);
texCoords.add(texCoord);
normals.add(vertNorm);
}

Replies(7)

czwaal

Re: Spherical Heightmap

2 years ago

It looks like I already solved it by adding another vertex at line 94 with calcPoint(grid[i+1], grid[j+1]) except I get loads and loads of ArrayIndexOutOfBoundsException 's. Also the lighting is off, ie, it the lighting works for the basic sphere but not for the hills and valleys. Does anyone know how to fix that?

andres

Re: Spherical Heightmap

2 years ago

I think the problem is that you are not properly defining your triangle strips. If you replace TRIANGLES_STRIP mode by POINTS in the constructor of the GLModel, my impression is that you are in fact getting the height map correctly applied on the sphere, but of course generated only with points.

So the trick is to get the strips right. This reference might help.

quarks

Re: Re: Spherical Heightmap

2 years ago

Also the lighting is off, ie, it the lighting works for the basic sphere but not for the hills and valleys. Does anyone know how to fix that?

The surface normals in your code are for a smooth sphere, you need to create surface normals based on the terrain.

The way to do this for a vertex (P _xy) on your sphere is to
(a) calculate the vector from P _xy to the next nearest vertex in the east-west directon - V _ew
(b) calculate the vector from P _xy to the next nearest vertex in the north-south directon - V _ns
(c) calculate he cross-product of the vectors V _ew and V _ns
(d) normalise the vector from (c) to get the "surface nornal" vector

I took the following code from the Shapes3D library which stores the surface coordinates in a 2D array called coord[ew][ns] and will calculate the surface normals for for each vertex, this might be helpful.

/**
* Will calculate the normals for any 2D mesh. <br>
* This is a heavy mathematical process so should be overridden in
* child classes if there is a suitable alternative method.
*/
protected void calcNormals() {
PVector c , np, nt;
int ns, ew;
for(ns = 0; ns < nsSteps; ns++) {
for(ew = 0; ew < ewSteps /* - 1*/; ew++) {
c = coord[ew][ns];
if(ns == nsSteps - 1){
np = PVector.sub(c, coord[ew][ns-1]);
np.add(c);
}
else
np = coord[ew][ns+1];
if(ew == ewSteps-1)
nt = coord[1][ns];
else
nt = coord[ew+1][ns];
norm[ew][ns] = PVector.cross(PVector.sub(nt, c, null),
PVector.sub(np, c, null),
null);
norm[ew][ns].normalize();
}
}
}

czwaal

Re: Re: Spherical Heightmap

2 years ago

Yeah, I figured that much out already. Beginners mistake I guess, eh? Still need to figure out why I get the ArrayIndexOutOfBoundsException but the reason for that is most probably line 86. Interesting read though, thanks.

czwaal

Re: Spherical Heightmap

2 years ago

EDIT: The thing pretty much works now. I just need to get rid of the gradients. I'm pretty sure I messed up my normal calculations so If anyway can give me a couple of pointers, would be nice.

I'm still busy with it, continuously tinkering away hence the catch.

protected void calcNormals() {
PVector v, vew, vns, nrl;
for (int i = 0; i < vertices.size(); i++) {
v = vertices.get(i);
try {
if (i <= 2) vew = vertices.get(vertices.size()-(2-i));
else vew = vertices.get(i-2);
if (i >= vertices.size()-1) vns = vertices.get(i-20);
else vns = vertices.get(i+1);
nrl = PVector.cross(PVector.sub(vns, v, null), PVector.sub(vew, v, null), null);
nrl.normalize();
normals.add(nrl);
} catch (IndexOutOfBoundsException e) {
normals.add(PVector.div(v, v.mag()));
}
}
}

So I'm getting somewhat further thanks to Andres and Quarks, so thanks guys!

Anyway, I started working on my lighting the way Quarks advised it, however -- after looking through Shape3D's source I came to the conclusion that his code was drastically different from mine and I don't quite have to time to rewrite or refactor at the moment so I started hacking away with his calcNormals() . Anyway, I'm sorta getting somewhere now. The code is still wrong (see image at the bottom) but atleast the hills and valleys are getting shadows now. So anyone willing to show the error in my code? calcNormals() starts at line 92.

public class Spheroid {
public GLModel spheroid;
public GLTexture texMap;
protected PApplet parent;
protected int xDetail,
yDetail;
protected float R;
protected float[] xGrid,
yGrid;
protected ArrayList<PVector> vertices = new ArrayList<PVector>(),
texCoords = new ArrayList(),
normals = new ArrayList();
public Spheroid(PApplet parent, int xDetail, int yDetail, float R) {
this.parent = parent;
this.xDetail = yDetail;
this.yDetail = yDetail;
this.R = R;
initialize();
spheroid = new GLModel(parent, vertices.size(), TRIANGLE_STRIP, GLModel.STATIC);
spheroid.updateVertices(vertices);
// tex = new GLTexture(this, globeMapName);
// spheroid.initTextures(1);
// spheroid.setTexture(0, tex);
// spheroid.updateTexCoords(0, texCoords);
spheroid.initNormals();
spheroid.updateNormals(normals);
spheroid.initColors();
spheroid.setColors(255);
spheroid.setShininess(32);
}
private void initialize() {
xGrid = new float[xDetail+1];
yGrid = new float[yDetail+1];
for(int i = 0; i <= xDetail; i++){
xGrid[i]= i / (float) xDetail;
}
for(int i = 0; i <= yDetail; i++){
yGrid[i]= i / (float) yDetail;
}
for(int i = 0; i <= xDetail-1; i++){
for(int j = 0; j <= yDetail; j++) {
calcPoint(R, xGrid[i], yGrid[j]);
calcPoint(R, xGrid[i+1], yGrid[j]);
}
}
calcNormals();
}
private void calcPoint(float R, float vU, float vV) {
int mX = (int) map(vU, 0, 1, 0, heightMap.width),
mY = (int) map(vV, 0, 1, 0, heightMap.height),
index = mX + mY * heightMap.width;
float phi = vU * 2 * PI,
theta = PI - vV * PI,
mH = 0;
try { mH = brightness(heightMap.pixels[index]) / 10; }
catch(ArrayIndexOutOfBoundsException e) {}
PVector vert = new PVector ((R+mH) * sin(theta) * cos(phi),
(R+mH) * sin(theta) * sin(phi),
(R+mH) * cos(theta));
//jadajada, addVertex should be placed in this function.
addVertex(vert, vU, vV);
}
private void addVertex(PVector vert, float u, float v) {
PVector texCoord = new PVector(u, v);
PVector vertNorm = PVector.div(vert, vert.mag());
vertices.add(vert);
texCoords.add(texCoord);
// normals.add(vertNorm);
}
private void calcNormals() {
PVector v, vew, vns, nrl;
for (int i = 0; i < vertices.size(); i++) {
v = vertices.get(i);
if (i == vertices.size()-1) { vew = PVector.sub(v, vertices.get(1)); vew.add(v); }
else vew = vertices.get(i+1);
if (i >= vertices.size() - yDetail) vns = vertices.get(0+(i/yDetail));
else vns = vertices.get(i+yDetail);
nrl = PVector.cross(PVector.sub(vns, v, null), PVector.sub(vew, v, null), null);
nrl.normalize();
normals.add(nrl);
}
}
}

quarks

Re: Re: Spherical Heightmap

2 years ago

Got your PM and looking at the picture it seems that there is a problem round the equator but without seeing the texture and heightmap images I am not sure what is to be expected.

I have never used glugraphics so some of this is guesswork but it seems you have an arraylist of vertices - effectively a single dimension array of xyz data whereas Shapes3D uses a 2D array for the vertex data which it then uses to create the normals.

Now in Shapes3D the normals are calculated by iterating over the 2D array as
for each line of longitude
for each line of latitude

now looking at your original code I find the floowing code to setup the sphere

public void setupSphere(){
float[] grid = new float[globeDetail+1];
for(int i = 0; i <= globeDetail; i++){
grid[i]= i / (float) globeDetail;
}
for(int i = 0; i <= globeDetail; i++){
for(int j = 0; j <= globeDetail; j++){
calcPoint(grid[i], grid[j]);
}
}
}

which means your vertices are created in the opposite order.

So there are a couple of things to try -

Experiment 1
So the first experiment then is to change line 11 above to
calcPoint(grid[j], grid[i]);

This will probably mess up the texture mapping but it might

fix the normals calculation.

Experiment 2
This is not so much an experiment but also a recommendation - I also noticed that in calcPoint() you have

float mx = (globeRadius+h)*sin(theta)*cos(phi);
float my = (globeRadius+h)*sin(theta)*sin(phi);
float mz = (globeRadius+h)*cos(theta);

This will align the north-south poles along the z axis. I recommend you change this to make it allign along the y axis i.e.

float mx = (globeRadius+h)*sin(theta)*cos(phi);
float my = (globeRadius+h)*cos(theta);
float mz = (globeRadius+h)*sin(theta)*sin(phi);

In OpengL the x and y axises are in the plane of the screen and the z axis points out of the screen towards the observer.

Try these out and see what happens.

czwaal

Re: Re: Spherical Heightmap

2 years ago

I just wrote a quick sketch using your calcNormals() and seems to work correctly, however, I still have to plug it into opengl. Anyway, appreciate the help, I'll take another look tomorrow and I'll let you know how it ends up. Cheers.

PS. It's supposed to be Mars by the way, infographic of all the major geographic features (polar caps, Olympus Mons, Valles Marineris, etc).

Top Reply