Billboard Sprite World

WIP games, tools & toy projects
#1

I’ve been working on and off on this project for the last couple of years. I wanted to make a world entirely out of billboard sprites. These are some recordings I made during the beginning of development in 2015:

09h0BxeWngw

This was all rendered on a Swing JPanel, which was pretty inefficient. I’ve since switched to OpenGL, but at the time I didn’t know any better.

Here are executable jar files of some versions if you’re interested:

A couple of months later I was figuring out how to render a floor/ceiling grid and made some recordings. I’ve ended up not using it in the end since I moved on to full 3D movement later on.

Sr6wNhH5n3k

Almost a year later I decided to pick up this project again. I had a course on computer graphics and gained some knowledge of OpenGL, but I didn’t know how to use it in Java up until this point. Then I discovered LWJGL and I was able to relatively easily migrate from a Swing Canvas to legacy OpenGL. The performance was still pretty terrible, so I started from scratch in modern OpenGL and it got pretty weird.

RdkVq9jJl7c

Then I needed a faster way to choose which objects to render than checking them individually, so I implemented an octree data structure to render groups of nearby objects. A node is subdivided after a maximum amount of objects are added and it redistributes its objects to its 8 child nodes. It also allows for a fast way to raycast through all objects, which I used to detect collision with the player.

ESeBlH5mxlg

A few months ago I really got back into it and improved terrain generation using perlin noise and implemented some rendering optimizations.

KfrrW6qdRGQ

And that’s where I’m at right now ;D
Try the latest version here: https://www.dropbox.com/s/4dps5zsd93tx3x0/Remo%20Engine%203.1.jar?dl=1
Controls:

  • F to switch between orbit/first person camera.
  • In orbit mode: Middle mouse button to rotate, shift + middle mouse button to move around, scroll to zoom and click to focus on an object.
  • In first person mode: WASD to move, g to disable gravity, choose a sprite with number keys, left click to place, right click to remove, scroll to move cursor
  • F3 for viewing octree nodes, v to toggle vsync, b to toggle normal/additive blending

1191×713 1.34 MB

#2

I really appreciate that you documented your process, I find it very fun to see where it all started and how it progressed. Really interesting aesthetic! Who could have thought that a ton of billboards can look so nice.

Is this just a little thing to play around with for you, or are you actually gonna turn it into a game? If so, what’s the plan?

#3

Thanks :smiley:
At the moment I just kind of want to make cool looking landscapes and to populate the world with more things.
I’ve considered adding some rpg elements to make it more fun to explore, but it would take a lot of effort from where it is now. Maybe one day though…

#4

It looks awesome! Did you make the textures yourself?

#5

Thanks! Yep, it’s nothing fancy though. Here’s the current sprite atlas: https://i.imgur.com/8MHDrFF.png

#6

Great job! Do you remember what tutorials you did use to start? (Assuming you used tutorials 8)

#7

Hmmm, I don’t think I used tutorials. The only thing I knew how to do at the start was how to draw an image to the screen at a specific position.
The horizontal position of each object was calculated using the angle of the object relative to where the player is facing and the vertical position and scale depended only on the distance to the player.
But if you have any specific questions feel free to ask!

#8

Thanks for info. But tbh I’m already struggling enough doing a 2D game. I can’t imagine the effort a 3D game oder engine takes. :smiley:

#9

Your work is pretty impressive.

Did you think about writing a blog?
You can share more details about your work and progress.

#10

Thank you :slight_smile:
Yeah, that might be fun. My progress is kinda slow but I’ll try it sometime

#11

WordPress is a decent tool to use for blogging ^^ I use it.

#12

This looks quite interesting, a entirely new way of doing 3D graphics, though it would be kinda hard to add something like animated game objects (e.g. mobs). You would have to invent your own system for “billboard-sprite based animation in 3D” :slight_smile:

Cheers

#13

HnOQ0PMNVhs

Progress has halted recently, but I managed to implement some cool features a while back. I got inspiration and motivation from tutorials of the almighty ThinMatrix to implement reflections on water and a coloured sky, which look awesome when combined at the end.
The reflections are accomplished by rendering the world a second time, but from the mirrored position and rotation of the camera to the water plane. The resulting image is used as a texture in the sprite shader and blends the appropriate part of that texture onto reflective sprites. The obvious limitation is that reflections only work on the water plane. An alternative would be to use screen space reflections, though those aren’t as perfect.
The sky is just a quad that fills the entire screen. The colors are interpolated based on the camera orientation. Changing them over time would be quite easy since they’re passed to the shader as uniforms.
Performance has also improved a bunch, since before every sprite was generated as a quad by a geometry shader. Now this is only done close to the camera, and sprites in the distance are rendered as actual point sprites, which is much faster but offers less control and has some limitations.
I’ve also added simple moving entities, which currently just move in a straight line, and implemented basic 3D audio support using OpenAL.

New controls: R to toggle reflections, middle-mouse-button to zoom in.
Runnable jar: https://www.dropbox.com/s/tjsz7z3dtbc9lpe/Remo%20Engine%203.2.jar?dl=1

@Shatterhand Thanks! I’ve had some ideas about that, like in an entity creator GUI. It’s at the top of my to-do list :smiley: