How does the renderer make the tiles overlap each other?

Discuss the future of Warzone 2100 with us.
Post Reply
User avatar
Bonsaiheld
Rookie
Rookie
Posts: 31
Joined: 24 May 2013, 23:54
Contact:

How does the renderer make the tiles overlap each other?

Post by Bonsaiheld » 22 Aug 2013, 17:41

Hey peeps.

I'm learning WebGL to create fancy 3D stuff in the browser, with the help of ThreeJS. I'm learning by trying to copy - of course- Warzone. :)

Working on it since a few days, being a beginner in programming and with only 2D experience. So, it might never actually become a real game, it's just for learning purposes... I just got the height map loading working - it was the very first thing i did... I consider making it parse the map and PIE files of Warzone, that would rock socks. At the moment it looks like this:

Image Image Image

Pretty basic. Similar to what Warzone looked like before the new renderer., though without good shadow and other small stuff :) And now i found out, that Three.JS doesn't seem to provide the possibility of making textures appearing bigger than the faces/geometries they are attached to. Someone told me that i can perfectly make the geometries overlap each other <- I understand that in the sense of that i don't use a single plane with vertices i change the z variable of after loading the height map, but instead use thousands of single planes. However i think this would make collision detection impossible because of edges appearing everywhere as the planes would have to be bigger than needed for the map, so for the textures to appear bigger than the faces. I hope you get what i mean. :|

What is the technique/trick you use with the renderer of Warzone? I think i read about it when per (i think it was him) announced that he was working on it. :) WebGL is basically OpenGL 2 ES (Embedded Systems) but i don't use any WebGL/OpenGL code, because of the abstraction of ThreeJS, so OpenGL code wouldn't help - but the general idea of how overlapping textures works.

Any help will be greatly appreciated. :)

Oh and if someone likes the map, it's my "Ringed" here: viewtopic.php?f=49&t=11028&p=122536#p122289

User avatar
vexed
Inactive
Inactive
Posts: 2538
Joined: 27 Jul 2010, 02:07

Re: How does the renderer make the tiles overlap each other?

Post by vexed » 24 Aug 2013, 05:28

Hmm, I don't follow what your asking exactly 3.x don't use tiles per se, as in the way 2.x did it.
Are you asking how to get rid of seams, or are you asking how to put decals on the terrain ?
/facepalm ...Grinch stole Warzone🙈🙉🙊 contra principia negantem non est disputandum
Super busy, don't expect a timely reply back.

User avatar
Bonsaiheld
Rookie
Rookie
Posts: 31
Joined: 24 May 2013, 23:54
Contact:

Re: How does the renderer make the tiles overlap each other?

Post by Bonsaiheld » 24 Aug 2013, 07:17

vexed wrote:Hmm, I don't follow what your asking exactly 3.x don't use tiles per se, as in the way 2.x did it.
Are you asking how to get rid of seams, or are you asking how to put decals on the terrain ?
Hi :)

Unfortunately i don't know what you mean with decals, but other than that: Yes. My renderer just puts the textures on the faces of the plane geometry. What does warzone different here? I mean, when i place the tiles with FlaME and then open the map in the game, i clearly can see the tiles at the correct positions - they are just bigger than the squares and therefore overlapping each over and with that make it appear very smooth as you can't see the seams anymore. That's what i want to reach.

I was thinking about making the textures scale up, crop them into 5 or better 9 images, put these images into arrays and make the squares have multiple textures by having the textures overlap each over. This way it could end up seamless and similar to what Warzone does... However i think it would end up very ugly like this (and this only uses 5 textures/colors overlapping each over) :hmm: :

Image

I fear, i can't describe it better. :)

User avatar
NoQ
Special
Special
Posts: 6226
Joined: 24 Dec 2009, 11:35
Location: /var/zone

Re: How does the renderer make the tiles overlap each other?

Post by NoQ » 24 Aug 2013, 07:31

I think Bonsaiheld is asking how big 3.1 terrain textures are smoothly blended together. It's easy to explain what's done, and i could even do that via imagemagick, but i have no clue how it's done in terms of opengl.

User avatar
Bonsaiheld
Rookie
Rookie
Posts: 31
Joined: 24 May 2013, 23:54
Contact:

Re: How does the renderer make the tiles overlap each other?

Post by Bonsaiheld » 24 Aug 2013, 09:16

NoQ wrote:I think Bonsaiheld is asking how big 3.1 terrain textures are smoothly blended together. It's easy to explain what's done, and i could even do that via imagemagick, but i have no clue how it's done in terms of opengl.
That's exactly what i want. Yep. :)

As said i'm using Three.JS - so i don't use any WebGL/OpenGL code, only the functions and methods of the Three.JS Framework and 2D Canvas. So i only need to know the general idea/technique of how it works. I'm gonna try to reproduce it then with Three.JS code. :)

I came up with another idea of how it could work... Instead of putting textures on the faces/vertices of the plane i could have one single texture (or multiple big ones since many graphic chips can only handle 2048x2048 or 4096x4096). And this huge texture gets preprocessed (in my case, with Canvas) with the previously loaded textures, like stamps. And then i put this huge texture(s) on the plane, like a bed sheet. :) But i'm more interested in how Warzone does it.

stiv
Warzone 2100 Team Member
Warzone 2100 Team Member
Posts: 876
Joined: 18 Jul 2008, 04:41
Location: 45N 86W

Re: How does the renderer make the tiles overlap each other?

Post by stiv » 25 Aug 2013, 01:49

If memory serves, WZ is using a technique called texture splatting.

User avatar
vexed
Inactive
Inactive
Posts: 2538
Joined: 27 Jul 2010, 02:07

Re: How does the renderer make the tiles overlap each other?

Post by vexed » 25 Aug 2013, 05:05

stiv wrote:If memory serves, WZ is using a technique called texture splatting.
Yeah.
http://www.cosc.canterbury.ac.nz/resear ... s_0801.pdf is pretty good at explaining things...
/facepalm ...Grinch stole Warzone🙈🙉🙊 contra principia negantem non est disputandum
Super busy, don't expect a timely reply back.

User avatar
Bonsaiheld
Rookie
Rookie
Posts: 31
Joined: 24 May 2013, 23:54
Contact:

Re: How does the renderer make the tiles overlap each other?

Post by Bonsaiheld » 26 Aug 2013, 09:36

Thanks guys :) It seems this is a bit more complicated since you have to work with shaders, which i didn't have yet.

I found some nice tutorials though. It seems to be exactly what Warzone does. Very cool :)

Image

http://www.gamasutra.com/blogs/AndreyMi ... atting.php

And for Three.js in particular: http://www.chandlerprall.com/2011/06/bl ... -textures/ (although this is about having textures based on the height of the terrain, but it uses texture splatting, so maybe i can modify that for my needs...)

Post Reply