# Spherical Billboarding is scaling improperly

Page 1 of 1

## 7 Replies - 4951 Views - Last Post: 10 January 2014 - 10:35 PM

### #1 krazyshank

Reputation: 0
• Posts: 38
• Joined: 21-December 12

# Spherical Billboarding is scaling improperly

Posted 09 January 2014 - 06:47 PM

Hello again all,
a couple weeks ago I made this topic http://www.dreaminco...3d-environment/ asking how to do billboarding.
The answers I got were mildly helpful and led me to here:
http://stackoverflow...s-a-white-block

I tried his code (for the most part), and it kind of works! The scaling of my sprite IS correct for moving my camera UP, DOWN, FORWARD, and BACKWORD. I can't tell if moving to the left is correct or not, but moving to the right of the sprite simply makes it grow!
Here are some pics:
Normal - http://puu.sh/6fw6X.png
Annnd to the right - http://puu.sh/6fw7K.png
The camera is at all the same values, just to the right, and the sprite grew in size.

Here's my code:
```public void Draw(SpriteBatch spriteBatch)
{
Vector3 spritePosition = new Vector3(2, 0, -4);
double angle = Math.Atan2(spritePosition.X - cameraPosition.X, spritePosition.Z - cameraPosition.Z) * (180.0 / Math.PI);
float rotation = (float)angle * 0.0174532925f;

Vector3 pos1 = Program.engine.GraphicsDevice.Viewport.Project(spritePosition, projectionMatrix, viewMatrix, Matrix.CreateScale(1, 1, 1));
Vector3 pos2 = Program.engine.GraphicsDevice.Viewport.Project(cameraPosition, projectionMatrix, viewMatrix, Matrix.CreateScale(1, 1, 1));
Vector2 pos = new Vector2(pos1.X, pos1.Y);

Vector2 origin = new Vector2(wiz.Bounds.Center.X, wiz.Bounds.Center.Y);
float Scale = Vector3.Distance(pos1, pos2) * 0.005f;
spriteBatch.Draw(wiz, pos, null, Color.White, 0, origin, Scale, SpriteEffects.None, 0);
}

```

I'm aware that the code is bad and not all that should be done in draw, but i'd just like to get things working />

And more importantly, is there a better way to do spherical billboarding that i'm missing?

This post has been edited by krazyshank: 09 January 2014 - 06:48 PM

Is This A Good Question/Topic? 0

## Replies To: Spherical Billboarding is scaling improperly

### #2 lordofduct

• I'm a cheeseburger

Reputation: 2668
• Posts: 4,786
• Joined: 24-September 10

## Re: Spherical Billboarding is scaling improperly

Posted 09 January 2014 - 08:52 PM

This is not billboarding.

Instead your projecting a 3D point onto the viewport to find the 2d location of it, and then drawing a sprite there. You're scaling said sprite by the distance from the camera multiplied by some arbitrary scalar (0.005).

Note, your previous thread, which I responded in, wasn't using a sprite and instead was drawing a texture to a 3d primitive in 3d-space... hence why I said it was billboarding and to use the billboard transform matrix to make the primitive look at the camera.

If your scale is off in this code you posted... well, ok. You scaled it some arbitrary number... change that number. I don't if you select 0.005 for some significant reason, but to me it's arbitrary, and that's where your problem exists.

### #3 krazyshank

Reputation: 0
• Posts: 38
• Joined: 21-December 12

## Re: Spherical Billboarding is scaling improperly

Posted 09 January 2014 - 09:42 PM

lordofduct, on 09 January 2014 - 08:52 PM, said:

This is not billboarding.

Instead your projecting a 3D point onto the viewport to find the 2d location of it, and then drawing a sprite there. You're scaling said sprite by the distance from the camera multiplied by some arbitrary scalar (0.005).

Note, your previous thread, which I responded in, wasn't using a sprite and instead was drawing a texture to a 3d primitive in 3d-space... hence why I said it was billboarding and to use the billboard transform matrix to make the primitive look at the camera.

If your scale is off in this code you posted... well, ok. You scaled it some arbitrary number... change that number. I don't if you select 0.005 for some significant reason, but to me it's arbitrary, and that's where your problem exists.

Well I guess I see what you mean, but how would I use the CreateBillboard function? The official documentation with code examples etc simply doesnt exist, and I can't seem to find a good usage example elsewhere, mind showing me an example or showing somewhere that does?

### #4 lordofduct

• I'm a cheeseburger

Reputation: 2668
• Posts: 4,786
• Joined: 24-September 10

## Re: Spherical Billboarding is scaling improperly

Posted 09 January 2014 - 11:05 PM

Well you need to first make a decision about what you're accomplishing. This post here is talking about using a SpriteBatch.

Are you planning to create a game of 2D graphics? Billboarding isn't necessary, 2D sprites ALWAYS face the camera.

Are you planning to create a game of 3D graphics that have 2D textures that should always face the camera? This one there's actually a few methods to approach it. If you're rendering individual sprites that can be moved independently in a 3d world... like say trees in a 3d world that render as a 2d sprite on screen

ala:

Well in that case I'd use billboarding. I'd create a plane on which the sprite is rendered as a texture and rotate the plane toward the camera. If you know how to render a plane, this is simple stuff... you're just transforming the transform matrix for the plane with this Billboarding method. And then render as usual.

If you're doing something where the 2D sprites are something that sit ontop of the 3D world, or in the 3D world somewhere, and consists of many sprites rendered in the same spot. You might consider using a SpriteBatch as it can be more efficient when rendering large number of sprites in one spot. This is useful for say a 2D menu that overlays your game.

### #5 krazyshank

Reputation: 0
• Posts: 38
• Joined: 21-December 12

## Re: Spherical Billboarding is scaling improperly

Posted 10 January 2014 - 08:22 PM

lordofduct, on 09 January 2014 - 11:05 PM, said:

Well you need to first make a decision about what you're accomplishing. This post here is talking about using a SpriteBatch.

Are you planning to create a game of 2D graphics? Billboarding isn't necessary, 2D sprites ALWAYS face the camera.

Are you planning to create a game of 3D graphics that have 2D textures that should always face the camera? This one there's actually a few methods to approach it. If you're rendering individual sprites that can be moved independently in a 3d world... like say trees in a 3d world that render as a 2d sprite on screen

ala:

Well in that case I'd use billboarding. I'd create a plane on which the sprite is rendered as a texture and rotate the plane toward the camera. If you know how to render a plane, this is simple stuff... you're just transforming the transform matrix for the plane with this Billboarding method. And then render as usual.

If you're doing something where the 2D sprites are something that sit ontop of the 3D world, or in the 3D world somewhere, and consists of many sprites rendered in the same spot. You might consider using a SpriteBatch as it can be more efficient when rendering large number of sprites in one spot. This is useful for say a 2D menu that overlays your game.

Before I get into all this maybe I should establish what kind of overall game type i'm going with.
I'm trying to make a game much like realm of the mad god (if you havn't heard of it, you can play it here: http://www.realmofthemadgod.com/ its an 8-BIT MMO Flash game)

The 3D feel of the game is wierd in general, the camera is top down yet you can see the sides of objects and on top of that, things do not become small if you move away from them. I'd love to be able to accomplish that effect...
Do you have any idea what that's called?

### #6 lordofduct

• I'm a cheeseburger

Reputation: 2668
• Posts: 4,786
• Joined: 24-September 10

## Re: Spherical Billboarding is scaling improperly

Posted 10 January 2014 - 09:13 PM

This is called an 'isometric view', and it is not done with 3d in any way shape or form. Instead all your sprites are drawn to look they're at this angle, and your tiles are drawn on a diagonal grid instead of a horizontal grid.

This diagonal grid is actually handled as a horizontal grid, but each tile in your grid is transparent in the corners and is only opaque for a diamond shape in the middle. And you overlap your tiles at halves.

So, you'll be using a SpriteBatch. You won't be using billboarding. And you don't transform your sprites in any way... you draw your sprites to match the grid.

Define yourself a gridsize, create a template image of it, then make that a background layer in your image editing tool. Then draw to match that grid, and when exporting your image just ignore that layer.

This post has been edited by lordofduct: 10 January 2014 - 09:17 PM

### #7 krazyshank

Reputation: 0
• Posts: 38
• Joined: 21-December 12

## Re: Spherical Billboarding is scaling improperly

Posted 10 January 2014 - 10:12 PM

lordofduct, on 10 January 2014 - 09:13 PM, said:

This is called an 'isometric view', and it is not done with 3d in any way shape or form. Instead all your sprites are drawn to look they're at this angle, and your tiles are drawn on a diagonal grid instead of a horizontal grid.

This diagonal grid is actually handled as a horizontal grid, but each tile in your grid is transparent in the corners and is only opaque for a diamond shape in the middle. And you overlap your tiles at halves.

So, you'll be using a SpriteBatch. You won't be using billboarding. And you don't transform your sprites in any way... you draw your sprites to match the grid.

Define yourself a gridsize, create a template image of it, then make that a background layer in your image editing tool. Then draw to match that grid, and when exporting your image just ignore that layer.

Wow I can't thank you enough for your in depth posts />
I found that rotmg is a branch of isometric called an "Orthagonal Projection"?
I have no idea how to apply the concept and I may have to start over my rendering and camera code, mind pointing me to any good info?

I did manage to do something with it though, just changed the my projection matrix in my camera code from createPerspectiveFieldOfView to CreateOthagonal, I had to set the first to arguments (height and widh) really small in order for my map to even be close enough to be drawn, here's the results />

This post has been edited by krazyshank: 10 January 2014 - 10:13 PM

### #8 lordofduct

• I'm a cheeseburger

Reputation: 2668
• Posts: 4,786
• Joined: 24-September 10

## Re: Spherical Billboarding is scaling improperly

Posted 10 January 2014 - 10:35 PM

Orthographic projection has to do with 3d projection. When you project a 3d world onto a 2d surface (your computer screen), you have to transform them.

Usually you transform with a Perspective matrix, as it makes the world look like it has perspective (further away things are smaller), which is how we see in real life.

An Orthographic projection is a simple projection where each point in 3-space is projected straight on the 2d surface no matter the distance. It results in a projection vector that is orthogonal to the view plane (perpendicular in 3d). Hence the name Orthographic. This results in a look and feel that is similar to isometric, but they aren't the same.

There is an actual isometric projection for 3d information. And it's slightly different, and by definition has a static view angle creating a 120 degree right angle in the horizontal.

All of these projections are for converting 3d data to 2d screen coordinates. The act of converting 3d to 2d is called 'projection', it's a term from linear algebra, and uses matrices.

You don't need projection though. You can get an isometric view with plane old 2d art from the get go. You only need the projection matrix if you want to make 3d models to have that look and feel. But if you have textures on planar surfaces in 3d, and then project them, they're not going to have that look. It's for making an actual cube look weird and flat.

You need to decide, are you drawing your graphics as sprites? Use a SpriteBatch and draw your sprites in your image editor in isometric.

If you're creating 3d models and you want them to appear as if they're 2d. Use an isometric, or orthographic projection matrix when rendering (instead of a perspective projection matrix).