CODEWITHSUNDEEP
3dwebglheightmap
Tower
Tower

Reputation: 102845

Help me with WebGL and a heightmap with many texture splatted/blended

I would like to begin a new hobby project which is a real-time strategy game on WebGL. My past RTS game was simple and it was made with XNA/C#. Now I want it on the web and I want a proper terrain. I find terrain splatting hard to understand/implement, is there a good implementation available already that I could bake in my next game?

Alternatively, is there a library/framework that has a support for this?

I am looking for resources/articles/tutorials/libraries/frameworks that help me out with a height map terrain using multiple textures blended nicely together.

Upvotes: 0

Views: 847

Answers (1)

Chiguireitor
Chiguireitor

Reputation: 3306

I will divide my answer in two, so you have what you're asking and what you "should" ask :-).

Your best bet is to get a good grasp on GLSL. If you're doing it gor the joy of it, you should learn from tutorials like this one. Implementing a terrain engine is very straightwforward using shaders (you can "splat" textures easily based on arbitrary textures that convey what texture should be drawn where) and with the horsepower in current-gen video cards, you almost need no terrain optimization because everything is done in parallel in the video card. Remember that WebGL is much more like OpenGL 2.0+ than 1.0, and there are no immediate functions, everything works in retained mode with VBOs.

However, your project will stumble upon certain problems besides Terrain rendering.

Currently, there are certain issues with mouse locking in the browser, widespread issues with audio handling and fullscreen is a no-no in most browsers without user intervention. I'm (was) coding a game based on WebGL but there's so much you can do before hitting a major stumbling block, and believe me, you won't be able to make much progress until these issues are solved:

I haven't included other browsers because if you're targetting WebGL Chromium/Chrome and Firefox is all you have right now.

Upvotes: 2

Related Questions