Jump to content

Project: The Berg

Into The Berg

Greedy Goblin


So here we are.  I'm not a seasoned blogger, or skilled game dev or any such thing.  Social media is, in my opinion, a bit of a pain, so don't be expecting regular daily updates or anything like that.  They'll happen when they happen.

This project (The Berg) is just my idea of fun in my spare time.  I didn't want to use any fancy game engines or integrate a full-blown physics engine.  The idea is to keep it retro, as simple as possible while still creating something that a) looks fairly decent and b) is fun(ish) to play.

I have no idea how this is going to turn out, or if it will ever get completed but we'll all have a good old laugh at my incompetance along the way I'm sure.  😜

Anyway, so I already got part way in to building this thing and thought 'Hey, here's a really dumb idea, why not blog about it for a laugh and waste more of my precious spare time!'.  Awesome!

So what I have so far is a simple Node/ExpressJS/ThreeJS set up in VS Code and I've created the island geometry from a 2D texture passed into a custom vertex shader which takes a flat subdivided plane and applies a displacement to each vertex based on the appropriate UV co-ords.  I want to keep a retro look and feel so this isn't some smooth terrain; it's full of lovely flat shaded triangle-y goodness.

So I created a terrain height map in Gimp (with the help of an online island generator tool for the contour -> http://exupero.org/hazard/post/islands/).


The real size is 2048 x 2048.  I want to create something on the larger scale here!

Once my Node/ThreeJS setup was up and running, I built a Terrain class (this is all in Javascript by the way) and set about loading the texture using the ThreeJS loaders and passing it through to my terrain vertex displacement shader.

P.S.  The terrain shader took me a while to figure out.  Initially it didn't work quite as expected but eventually I got there.  Essentially I pass the player position to the shader and only sample a smaller portion of the heighmap depending on what view distance I want.  So I'm only ever rendering a small sub-section of the heightmap which changes as the player moves.  This was easier said than done... in my head at least.

In the end it looks something like this...

	float step = viewSize / subdivisions;
	vec2 pp = vec2(playerPos.x, -playerPos.z);
	vec2 adjPlayerPos = floor(pp / step) * step;
	vec2 remainderPP = pp - adjPlayerPos;

	float uvScale = viewSize / mapSize;
	vec2 uvOffset = vec2(adjPlayerPos + (mapSize / 2.) - (viewSize / 2.)) / mapSize;
	vec2 newUV = uvOffset + uv * uvScale;

	vec4 dm = texture2D(heightMap, newUV);
	vec3 newPos = vec3( position.x - remainderPP.x, position.y - remainderPP.y, dm.r * heightScale );
	vec3 transformed = newPos;

Sheesh!  That looks... err... complicated, but it gives a great result....





Recommended Comments

I'm very interested in what you've done and how you managed to do it.  In the project I'm working on I'm creating a spherical world.  But I was thinking that perhaps I could do something similar to what you've done.  However instead of using a height map I could use RGB values to represent x,y,z coordinates for vertices for the shader code.  Do you think that is doable?

Another question, how would you go about layering different geometries that use different shaders?  I guess you did just that in your water blog post.

Can I have your code? :D 

Share this comment

Link to comment

Hey Awoken and thanks for the interest in 'The Berg'!

I've never tried this technique with a spherical world but I guess it's pretty much the same principle except you would need a curved plane or sphere rather than a flat plane.  Mapping UVs to that becomes a little more complicated I would guess.

I'm not sure how you could use a texture to represent the x,y,z coordinates for vertices to be honest as I would imagine you would need to sample every pixel of the texture on every pass.  Shaders don't like big for-loops!  (In fact if memory serves me correctly there used to be an explicit limit to the number of loops you could do on a single pass.  I wouldn't know if that's still the case).

For my water I simply use another plane mesh with a different shader.  Nothing complicated.

And lastly... can you have my code?  Sure!  Once I'm a bit further in and got something half-playable it will be on the internet for all to see... code and all!  (I can't guarantee it will be nice clean code but hey, you get what you pay for)  :D

Edited by Greedy Goblin

Share this comment

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Advertisement
  • Advertisement
  • Blog Entries

  • Similar Content

    • By skyemaidstone
      Hi guys,
      I wanted my roads to look a little more bumpy on my terrain so I added in bump mapping based on what i had working for the rest of the models.
      It works and looks nice enough (I'll need to fiddle with the normal map to get the pebble looking just the right amount of sharpness) but anyway.. a problem cropped up that hadn't occurred to me: I don't want it applied to the whole terrain, just the roads.
      The road texture is simply added using a blend map with green for grass, red for rock, blue for road. So the more blue there more the road texture is used.
      I don't wan't the other textures bump mapped.. i mean I guess i could but for now i'd rather not.
      So the code is something like:
      float3 normalFromMap = PSIn.Normal; if (BumpMapping) { // read the normal from the normal map normalFromMap = tex2D(RoadNormalMapSampler, PSIn.TexCoord * 4); //tranform to [-1,1] normalFromMap = 2.0f * normalFromMap - 1.0f; //transform into world space normalFromMap = mul(normalFromMap, PSIn.WorldToTangentSpace); } else { //tranform to [-1,1] normalFromMap = 2.0f * normalFromMap - 1.0f; } //normalize the result normalFromMap = normalize(normalFromMap); //output the normal, in [0,1] space Output.Normal.rgb = 0.5f * (normalFromMap + 1.0f); I tried checking if the blendmap's blue component was > 0 then use the bump mapping but that just makes a nasty line where it switches between just using the normal of the whole vertex or using the normal map.
      How do I blend between the two methods?
    • By Masterbuiler64
      Good Morning, Afternoon, or Evening,
      My name is Dalton Potter and I am a budding game developer looking to learn skills and develop a beautiful project me and my friend came up with a year ago or so and have refined ever since. The idea is a basically a mix of Final Fantasy and Zelda in terms of exploration and battle, but will throw in its own unique features to switch things up a bit. What we have in place so far is the main story and many connecting character back stories, a map of the over world (still not 100% confirmed however), how some of the main characters look (also not 100% confirmed), a few battle and puzzle mechanic ideas, general story progression, locations, a few beta music tracks, and lore. What we lack however is any solid assets or work done on it as neither of us have any expertise in game development, but have both unanimously agreed that this idea is too good to forget and pass up.
      We are currently looking for people to help us work on the project as time goes on and maybe, just maybe, it may grow into a full blown team of people working on a game and eventually sell it on Steam or other client services. Any replies to this topic will be read as soon as possible depending on my schedule. I have also attached a couple photos and sound files of some design concepts we have. I also have a Pastebin made of the entire story and main character back stories, as well as history into how the idea came to be, though I'll let the Pastebin be requested as needed in the future.
      Hopefully this project turns from being just an idea into something amazingly beautiful and playable......it just needs to be created that's all.....
      Thank you in advance,
      Dalton Potter
      P.S. The sound file, "Power and Prestige" is a song that sounds as though it could be used as a trailer theme, and "Curiosity" sounds as though it could be used on a farm at sunrise.
      Source of music was from YouTube, but the groups official site is as follows: http://floatingcloud.net/

      Floating Cloud - Power and Prestige.mp3

      Floating Cloud - Curiosity.mp3

    • By trapazza
      I'm trying to add some details like grass, rocks, trees, etc. to my little procedurally-generated planet. The meshes for the terrain are created from a spherified cube which is split in chunks (chunked LOD).
      To do this I've wrote a geometry shader that takes a mesh as input and uses its vertex positions as locations where the patches of grass will be placed (as textured quads).
      For an infinite flat world (not spherical) I'd use the terrain mesh as input to the geometry shader, but I've found that this won't work well on a sphere, since the vertex density is not homogeneous across the surface.
      So the main question would be: How to create a point cloud for each terrain chunk whose points were equally distributed across the chunk?
      Note: I've seen some examples where these points are calculated from intersecting a massive rain of totally random perpendicular rays from above... but I found this solution overkill, to say the least.
      Another related question would be: Is there something better/faster than the geometry shader approach, maybe using compute shaders and instancing?
    • By FedGuard
      Hello all,
      I would like to start off with thanking you all for this community. Without fora like these to assist people the already hard journey to making an own game would be exponentially more difficult. Next I would like to apologize for the long post, in advance...
      I am contemplating making a game. There, now that's out of the way, maybe some further details might be handy.
      I am not some youngster (no offence) with dreams of breaking into the industry, I am 38, have a full-time job, a wife, kid and dog so I think I am not even considered indie? However I recently found myself with additional time on my hands and decided I would try my hand at making a game.Why? Well mostly because I would like to contribute something, also because I think I have a project worth making (and of course some extra income wouldn't hurt either to be honest). The first thing I realized was, I have absolutely no relevant skill or experience. Hmm; ok, never mind, we can overcome that, right?
      I have spent a few months "researching",meaning looking at YouTube channels, reading articles and fora. Needless to say, I am more confused now than when I started. I also bought some courses (Blender, Unity, C#) and set out to make my ideas more concrete.
      I quickly discovered, I am definitely not an artist... So I decided, though I do plan to continue learning the art side eventually, I would focus on the design and development phase first. The idea being, if it takes me a year or more solely learning stuff and taking courses without actually working on my game, I would become demoralized and the risk of quitting would increase.
      So I thought I would:
      1: Keep following the courses Unity and C# while starting on the actual game development as the courses and my knowledge progress.
      2: Acquire some artwork to help me get a connection with the game and main character, and have something to helm keep me motivated. (I already did some contacting and realized this will not be cheap...). Also try to have the main character model so I can use it to start testing the initial character and game mechanics. For this I have my first concrete question. I already learned that outsourcing this will easily run up in the high hundreds or thousands of dollars... (lowest offer so far being 220 USD) I am therefore playing with the idea of purchasing https://assetstore.unity.com/packages/3d/animations/medieval-animations-mega-pack-12141 with the intention of then have an artist alter and/or add to the animations (it is for a Roman character so some shield animations are not going to work the same way.). This way I could start  with the basic character mechanics. Is this a good idea, waste of money,...? Any suggestions? I then have a related but separate question. Is it a good idea to buy Playmaker (or some other similar software I haven't yet heard of like RPGAIO), and using this for initial build, then changing/adding code as the need arises?
      3.Get a playable initial level ready as a rough demo and then starting to look for artist for level design and character/prop creation.
      I would really appreciate some input from more experienced people, and especially answers to my questions. Of course any advice is extremely welcome.
    • By MakeIndieGreatAgain
      Game developers will be able to become pioneers in the development of decentralized games for the gambling industry using DAO.Casino protocol.
      On September 17, 2018, DAO.Casino is opening Sandbox for developers, independent teams and game development studios that choose to harness the power of the rapidly developing DApp industry.
      Starting today everyone may submit their application for Sandbox on the official Sandbox page.
      The Sandbox project is designed by DAO.Casino developers. Participants of Sandbox will learn the basics of decentralized applications development on DAO.Casino protocol. Developers participating in Sandbox will learn to create, design and deploy decentralized games and applications on Ethereum blockchain.
      DAO.Casino is planning to reward most active developers for their constructive feedback on the improvement and optimization of the SDK and related documentation. The company will separately announce the details of the rewards program later this fall.
      “We are confident that the Sandbox project will play an important role in our collaboration with studios and independent game developers. We cannot wait to see our product helping developers unleash their creative and entrepreneurial talents and apply those to one of the most groundbreaking technologies of the XXI century. — states Ilya Tarutov, CEO, DAO.Casino. – I am sure that the products we’re developing will transform the online gambling into a fair and transparent industry for all of the involved parties: casino operators, developers, and affiliate marketers. “
      “We are launching the Sandbox with the goal of enabling as many developers as possible to learn to create decentralized games. We have achieved an important milestone by starting to accept applications from developers all around the world who share our idea to make online gambling fair and transparent. With our technology, developers can take the whole gambling industry to the next level” – says Alexandra Fetisova from DAO.Casino.
      DAO.Casino is disrupting the online gambling industry by developing the protocol based on Ethereum blockchain technology. The protocol ensures the automation of transactions and facilitates interactions between all the industry participants: casino operators, game developers, and affiliate marketers. DAO.Casino team is fully dedicated to developing the best products and making the gambling industry a better place.

      View full story

Important Information

By using GameDev.net, you agree to our community Guidelines, Terms of Use, and Privacy Policy.

We are the game development community.

Whether you are an indie, hobbyist, AAA developer, or just trying to learn, GameDev.net is the place for you to learn, share, and connect with the games industry. Learn more About Us or sign up!

Sign me up!