How does the renderer make the tiles overlap each other?

[Bonsaiheld]

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:



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

[vexed]

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 ?

[Bonsaiheld]

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) :



I fear, i can't describe it better.

[NoQ]

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.

[Bonsaiheld]

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]

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

[vexed]

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...

[Bonsaiheld]

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



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...)