Article: Game Art Art
interpolator
Hi friends! Not sure if i'm correct here, but my issue is heavily technical - but of course about game art. Anyway this is pure self-advertisment. I write an articles about...
It goes about crazy ideas or awesome tech fakes which made an cool effect. I write about this in my blog and collected everyting i can remember. Feel free to comment about my stuff, explain what i didn't understood or tell me about what stuff impressed you.
01 Fallout 3 - Edges
02 Teleglitch - Viewcones
03 Teleglitch - RGB Flickering
04 Diablo 3 - 2.5D Trees
05 Warcraft 3 - Billboards
06 Divine Divinity - 2D Reflexion
07 Cell Shading
08 Deus Ex - Occlusion
09 Deus Ex 3 - Folds
10 Deus Ex - Scan Lines
11 World of Warcraft - Balloon
12 Assassins Creed 3 - Windows
13 Assassins Creed 3 - LoD Blending
14 Kid Icarus - Tricks
15 Left 4 Dead - Puke
16 Sacred 2 - Crystal Reflexion
17 Sacred 2 - Pulse Shader
18 Battlefield Bad Company 2 - Smoke Column
19 Battlefield 2 - Flag Pole
20 Sacred 2 - Burning Map
21 Assassins Creed 3 - Bouncing Light
22 Airborn - Trees
23 1943- Retro Shadows
24 Metal Gear Rising - Slicing
25 Dead Space 3 - Diffuse Reflections
26 Homeworld 2 - Backgrounds
26.2 Homeworld 2 - Backgrounds.Tech
27 Diablo 3 - Resource Bubbles
28 007 Legends - The World
29 Homeworld 2 - Engines
30 Homeworld 2 - Hyperspace
31 Bioshock - Glossiness
32 Starcraft 2 - Localization
33 Doom 3 - Volumetric Glow
34 Doom 3 - HDUI
35 Scribble Cel
36 Lego Batman - Crawler
37 Dungeon Keeper 2 - Walls
38 Lego - Studs
39 1nsane Carpet 2 - Repetitive Worlds
40 The Binding of Isaac - Composition
41 Company of Heroes - Shaded Smoke
42 Company of Heroes - Flamethrower
43 World of Torch Siege - Blended Trunks
44 Oblivion Territory – Tree vs Palm
45 Handmade Normal Map
46 Tomb Raider - Laras Hot Secrets
47 Don’t starve, Diablo – Parallax 7
48 Windows - AC/Row/Infinite
49 Render Hell 2.0
50 Zelda Wind Waker - Hyrule Travel Guide
51 Rei Ayanami – Inner eyes
52 Sacred 2 – Fake Mirror
53 X:Rebirth – Geometric Lensflares
54 Fallout 4 - Wasteland Eyes
55 What is Color Banding? And what is it not?
56 Fallout 4 - The Mushroom Case
57 Diablo III - The sacred spiderweb
58 Alpha1 - My Top 5 usescases
59 Blubb! - Fish Tanks in Games
60 Diablo III - Wings of Angels
61 Dark Maus - Top Down Trees
62 Alien vs Wolfenstein – Cutting Torch
63 The Joy of VFX – Pin Table
64 Assassin’s Creed: Black Flag – Waterplane
"Fakes & Tricks of games which impressed me"
It goes about crazy ideas or awesome tech fakes which made an cool effect. I write about this in my blog and collected everyting i can remember. Feel free to comment about my stuff, explain what i didn't understood or tell me about what stuff impressed you.
01 Fallout 3 - Edges
02 Teleglitch - Viewcones
03 Teleglitch - RGB Flickering
04 Diablo 3 - 2.5D Trees
05 Warcraft 3 - Billboards
06 Divine Divinity - 2D Reflexion
07 Cell Shading
08 Deus Ex - Occlusion
09 Deus Ex 3 - Folds
10 Deus Ex - Scan Lines
11 World of Warcraft - Balloon
12 Assassins Creed 3 - Windows
13 Assassins Creed 3 - LoD Blending
14 Kid Icarus - Tricks
15 Left 4 Dead - Puke
16 Sacred 2 - Crystal Reflexion
17 Sacred 2 - Pulse Shader
18 Battlefield Bad Company 2 - Smoke Column
19 Battlefield 2 - Flag Pole
20 Sacred 2 - Burning Map
21 Assassins Creed 3 - Bouncing Light
22 Airborn - Trees
23 1943- Retro Shadows
24 Metal Gear Rising - Slicing
25 Dead Space 3 - Diffuse Reflections
26 Homeworld 2 - Backgrounds
26.2 Homeworld 2 - Backgrounds.Tech
27 Diablo 3 - Resource Bubbles
28 007 Legends - The World
29 Homeworld 2 - Engines
30 Homeworld 2 - Hyperspace
31 Bioshock - Glossiness
32 Starcraft 2 - Localization
33 Doom 3 - Volumetric Glow
34 Doom 3 - HDUI
35 Scribble Cel
36 Lego Batman - Crawler
37 Dungeon Keeper 2 - Walls
38 Lego - Studs
39 1nsane Carpet 2 - Repetitive Worlds
40 The Binding of Isaac - Composition
41 Company of Heroes - Shaded Smoke
42 Company of Heroes - Flamethrower
43 World of Torch Siege - Blended Trunks
44 Oblivion Territory – Tree vs Palm
45 Handmade Normal Map
46 Tomb Raider - Laras Hot Secrets
47 Don’t starve, Diablo – Parallax 7
48 Windows - AC/Row/Infinite
49 Render Hell 2.0
50 Zelda Wind Waker - Hyrule Travel Guide
51 Rei Ayanami – Inner eyes
52 Sacred 2 – Fake Mirror
53 X:Rebirth – Geometric Lensflares
54 Fallout 4 - Wasteland Eyes
55 What is Color Banding? And what is it not?
56 Fallout 4 - The Mushroom Case
57 Diablo III - The sacred spiderweb
58 Alpha1 - My Top 5 usescases
59 Blubb! - Fish Tanks in Games
60 Diablo III - Wings of Angels
61 Dark Maus - Top Down Trees
62 Alien vs Wolfenstein – Cutting Torch
63 The Joy of VFX – Pin Table
64 Assassin’s Creed: Black Flag – Waterplane
To give you some hints whats that all about, here some of the pictures i made for the article:
Replies
Now-a-days with the lesser impact of polygons on engine performance i bet we could do all kinds of crazy stuff (just too bad that the development of vertex painting tools has been stuck in the same place since forever xD)
Since it looks like it doesnt actually use any manual input (figuring out all of that stuff and where to place more verteces and add colors too them would be too time cosuming I guess), does anyone know of software/scripts to create something similar?
If done properly, using layered BG spheres like that could be pretty interesting, using vertex alpha's and what not.
However, I'm very curious about how they did it for homeworld... Like bb0x says, if done by hand it looks very time consuming.
I guess the background geometry can be done by using a hand painted greyscale displacement map with some editing by hand.But I'm not sure ,this is just very impressive in both end result and technique.
Ill play around with Meshlabs tomorrow, maybe it has something that can more or less do the same thing.
How do I do this? I cant find an option for this in 4r5.
its in prefrences, not in the decimation master tab
I bet they simply wrote a tool that converts a bitmap into a mesh. Not that hard when you know exactly what you want. And painting a bitmap is quick and easy for artists.
Decimation master doesn't really work that well if you go below %10.
(I guess that's why its called DECImation master, heh...)
Going any lower than the current polycount, 4,685, (even after re-anylizing/decimating) destroys that image entirely. And this is just the flat plane3d with importance set %100 on polypaint in decimation masters settings.
Cool stuff though. Probably with some tweaking on some more practical meshes it will work out nicely. It is necesary to have a pretty blurry/dreammy texture, sharper stuff will not work nearly as well.
LOL I remember Carpet! Man, the 90's were the golden era of games IMO. Better than the 80's AND the 21st century. Theres something missing from todays games that was captured so well in the old days of Amiga, Atari, Jaguar, SNES, PS1, and MAYBE even up until the days of the PS2, but somewhere around there, a falloff point was reached, and since then, that sense of "gaming magic" has only been seen in EXTREMELY rare cases, such as Bioshock as one well known example. Also, the thief games had that "thing" IMO (something I find impossible to define).
Anyway back onto graphics, about the "3D" animated models made of multiple 2D objects. I've seen this effect in countless games, a lot of the time it looked a bit silly, but sometimes it looked great, for example, the arcade version of Galaxy Force 2. You really did get the impression you were immersed in a 3D world with huge 3D monsters, rather than a series of 2D papercraft cut-outs. Infact, GF2 is probably the best use of that effect I've come across. The console version looks terrible by comparison though.
If anyone gets it working and wants to write a tutorial, I would love it!
#26.2 Homeworld 2 - Backgrounds.Tech
Because some nice people asked how these spheres are done, i tried out some mod tools and i hope you'll enjoy the results.
alfalfasprossen
Hehe i totally understand your feeling. But to be honest: Homeworld is too hard for me and too time consuming. But it's of course an awesome game.
ScribbleHead
Hehe you're right. But who knows, maybe there's a good point also in Next Gen Games to use this tech. We'll see
bb0x
Checkout the new article. It's not done manually. That would be a job for the hell
Froyok
I have no idea if the ADD verts to a low poly sphere or REDUCE verts from a high poly sphere...but some of it is explained in the new article.
By the way: your zBrush results are awesoe. I linked them at the end of the article.
igi
Yes i'm also stunned everytime i think what they've done.
cptSwing
Thanks man
Eric Chadwick
Thanks
marks
Glad to head this! Thank you!
Shuriken UK
Hehe yes it's awesome how people work around the low hardware performance and create stunning tech.
poopinmymouth
Thanks man. I already had this tool and used it over the weekend to write the new article. If you want, tell me what you think about it.
I was thinking about a method how this could be done if I were to need to write a tool like this. Seems I was on the right path... I think anyway.
It looks like the tool is using the "edge map" as some sort of mask I guess to increase the vertex count/mask out optimization.
Thanks for the research man. =D
Cant see the mesh in Outliner for some reason.
It worked fine in Max! Thanks Simon and Pior for exporting it to me.
I am only interested in the mesh. It is easy to transfer the texture->vertexcolor back on the mesh with a simple spherical projection.
All skies in Mirrors Edge has vertex colored gradients, but the mesh was optimized by hand, I wish I would have had this tech back then. I guess I didnt do my research.
If you want i can export something for you into a format which is readable in Maya...i'm mean maybe only OBJ produces these errors and maybe FBX would work better? Or you could download a student version of Max to do it by your own. The idea with the sperical projection is great!
Oh i see you worked on alot Games...and my favorite is also in there: battlefield 2 :,) I love this game. For the article about the "fake" sound i visited Battlefiedl 2 again and it looks great, it plays great and it sounds great. Awesome :,) By the way, i tried to make something about the Level-LoD because in BF2 i saw it the first time, how verts move and stuff like that, but i wasn't able to capture this good enough for an article.
https://www.youtube.com/watch?v=aIyoKCgWqt8
Go to 6:06 Notice the graphic of the earth spinning on the screen.
How do you think this was done?
Thanks for the question! I don't know it but on the one hand it would be the fastest way to just use an animated texture like Ace-Angel said. I could also imagine that they move an static world-texture over a flattened sphere surface so that the UVs at the border of the flat sphere would be pushed together and would fake a spherical movement. But to be honest, this seems too much effort. But for me it looks too spherical to made which such a fake...don't know.
Would be cool to have a look in the data of the game
Well I should of been honest that I know how it was done because it was my method. Render a sphere mapped how you want in a 3d package as UVs to a texture and scroll UVs like you would normally and mask the area outside of the sphere. Texture compression makes it a bit error prone, a smaller 32bit image can be used. I did also raytrace a spheres UVs in a shader, its actually not too expensive considering screens are often full emissive with no lighting, but I dont think that version was ever used. Originally I got the idea off the demo scene wormhole effect.
The raytraced version produced a similar image in the pixel shader, I based that on IQ of RGBA (I
I still have a few issues with the technique but find it an interesting challenge to re-create. I am not using the mod software.
This example sphere is 10k triangles and based on an image provided by Optikz.
http://dl.dropbox.com/u/16703380/test3/WebPlayer.html
***edit
Okay, thanks for the correction. Here is a similar test using more triangles. 33k. I will try to create a hand painted background for a proper test at some date in the future.
http://dl.dropbox.com/u/16703380/33k/WebPlayer.html
Just a little correction, his surname isn´t "Schreibt", that´s the german word for writes , so it´s just saying that it´s Simon writing the article
His full name is Simon Trümpler as far as i remember
This is awesome! I would like to describe this stuff as a part of my next article if you don't mind. Would fit perfectly.
Tamarin
Wow man! How great is that? Is there a way to see the wireframe?
SpeCter
Hehe you're right
But now let me show something different :,)
I can't believe it. But somehow people like what i'm doing. In fact, 100.000 people visited my blog. For this i wrote a small note
Here is a wire frame.
I am displacing a high poly mesh with the image and then using a decimate - trying to keep detail in the mesh before baking in vertex colors. It looks like Maya has a feature that creates mesh from images but that is not available to me.
I think sharp edges in a few key areas and large smooth gradients go a long way to making this effective. The image I chose is probably not ideal.
You should check out whats going on at Shadertoy https://www.shadertoy.com/ These guys are doing amazing stuff just in the pixel shader - look at this https://www.shadertoy.com/view/4slGzn no vertex shader!
Actually this one is pretty much the same as the raytraced one I did
in terms of how to make UVs, though iqs is more complicated with lighting
https://www.shadertoy.com/view/4sf3Rn
http://usa.autodesk.com/adsk/servlet/pc/item?siteID=123112&id=10775855
Battlefield 2 was an awesome project to work on. Sound guys at Dice have always been top notch. Battlefield 3 sounds amazing too imo.
Which 3d package are you rendering it in?
Did you UV map the sphere in the 3d package in the same way you want the texture to appear?
What I mean is, I uvmapped a sphere with a worldmap on it in Max. If that looks correct, then render only the UVs.
No i just made a sphere and baked a normal map of of it. In UDK i wanted the texture to modify the UVs of the base texture. But noe i'm not sure if i understood your approach
(one U ramp, one V ramp, add them together, render you sphere)
and then make sure you uncheck sRGB in the imported texture in udk or you will get streched values in the darker ends of the uv range ^^
Originally i planned to talk about your tech example in the new article but i didn't understand it completely and maybe its better to make a new article for this issue. It seems to be really interesting.
These shader toy things are sick
Tamarin
Thanks man! Intereting that you displace you sphere...but shouldn't make any shading problems since the the background shoul be self-illuminating.
o2car
I'm jealous that you worked at Dice :,)
SpeCter
Thanks man! Me too
alfalfasprossen
Thanks for the help. I tried it but i don't get any good results. I have to read more about this stuff and how UDK handles the UV input.
NEU
#27 Diablo 3 - Resource Bubbles
It has more or less the same polycount as well.
edit--
Btw, could they have been using secondary uv maps? The uv map that you showed obviously has distortion in em to create the bubble like effect. But the horizontal line seems to be perfectly straight, no matter how high up the "sphere" it is.
(yes, the texture compression for my test texture sucks... )
Hustle Kings did nice balls, similar to raytraced method.
http://www.voofoostudios.com/?p=33
Thanks SimonT!
Dead Space 3 - Diffuse Reflection Tree new links about the issue
Airborn - Trees A comment from Warby about another advantage of the approach
Metal Gear Rising - Slicing I re-thought my words about the procedural depth of the melon
Diablo 3 - Resource Bubbles More infos about the line which appear when resource isn't full
Diablo 3 - Resource Bubbles MikieX brought us a nice link about shiny balls
bb0x
Yes that would be an alternative. I added you question to the article and gave an answer
mikiex
Impressive balls!
kaptainkernals
Thanks for the compliment
alfalfasprossen
Thanks for the example. I want to first try it without the sphere. I tried to make a texture which in the first place does nothing. So i used the tip you gave me and made a simple texture based on a green/red gradient.
I expected that nothing changed, but at the borders of the texture preview i can see some stretching. I already deactivated the sRGB option.
Clamp doesnt work. I mean, if the colors are a full representation of the UV space, than it should work. What i could imagine is, that the compression makes weird things in the dark and bright areas. I tested different compresseion like e.g. TC_NormalMap or TC_HighDynamicRange but this made it worse. I'm not sure if theres a button for "take it without any compresseion".