Yep, I haven`t been very active blogger lately.
I am very glad that company I am working for brought me to Amsterdam to Blender Conference this year. I even did a presentation there together with my colleague Michael Otto about GLSL shaders in Blender Game Engine. And for the presentation purposes I decided to demo my water/underwater shader there.
Just before the presentation I managed to tune up the shader and the scenery a bit.
so the changes since last update are:
- projected grid approach for the water surface (lousy implementation)
- per-vertex displacement mapping for waves
- basic but effective shoreline detection for water surface and ground
- added some subtle cloud layer and stars in the skies
yet to be done:
- fixes on inconsistencies
- better and procedural wave propagation model
- focus to underwater visuals
- better camera transition from water/underwater
- better coastline behaviors
- buoyancy (partly done)
- heavy optimization
- when it`s done, as many have requested - implement in Unity
trees are generated with tree[d] by frecle
blend file to be uploaded (have to clean and optimize the code a bit)
November 24, 2013
September 13, 2013
water/underwater & sky shader update #02
I published this quite a while ago, but found some time to post it here just now.
This is an update video to one of my oldest projects in the making.
nothing much has changed since the last video, I just have a better computer now and I recorded it in a higher quality and framerate.
The water shader is based on my own observations.
it features:
- reflection with accurate fresnel refectance model
- refraction with chromatic aberration
- projected caustics on geometry from the water surface based on normals
- seamless transition to underwater (no fake fog added)
- accurate water volume with light scattering
- view and light ray color extinction based on water color and sunlight
- simple coastline detection based on terrain`s height-map
does not yet feature:
- displaced water geometry
- underwater particles
- underwater light rays from caustics
- shoreline behaviors
Sky model is based on Preetham, but implementation is from Simon Wallner, with a significant (artistic) changes done by myself.
I have also included an overly exaggerated experimental glitter shader and a completely procedural "water droplets on lens" shader.
YES the underwater distortion is completely unrealistic and will be removed once I add underwater particles that will wobble similarly.
download blend:
- https://dl.dropboxusercontent.com/u/11542084/water_0.99_optimized.blend
- http://www.blendswap.com/blends/view/68857
sound files from freesounds.org
This is an update video to one of my oldest projects in the making.
nothing much has changed since the last video, I just have a better computer now and I recorded it in a higher quality and framerate.
The water shader is based on my own observations.
it features:
- reflection with accurate fresnel refectance model
- refraction with chromatic aberration
- projected caustics on geometry from the water surface based on normals
- seamless transition to underwater (no fake fog added)
- accurate water volume with light scattering
- view and light ray color extinction based on water color and sunlight
- simple coastline detection based on terrain`s height-map
does not yet feature:
- displaced water geometry
- underwater particles
- underwater light rays from caustics
- shoreline behaviors
Sky model is based on Preetham, but implementation is from Simon Wallner, with a significant (artistic) changes done by myself.
I have also included an overly exaggerated experimental glitter shader and a completely procedural "water droplets on lens" shader.
YES the underwater distortion is completely unrealistic and will be removed once I add underwater particles that will wobble similarly.
download blend:
- https://dl.dropboxusercontent.com/u/11542084/water_0.99_optimized.blend
- http://www.blendswap.com/blends/view/68857
sound files from freesounds.org
May 15, 2013
image imperfections and Film Grain post process FX
It`s been a while already since game studios try to replicate lens and film camera effects to enhance the visual fidelity for their games. Most of the time it does not make much sense to see them from the perspective of the player, but nonetheless it does look nice if done right.
I am talking about lens flares, vignetting and chromatic aberration, depth of field, bloom effects and film noise/grain. In photography or film they are considered as visual artifacts caused by imperfections and properties of film and lenses and mainly - the physics behind optics. Most of photo/cinemato-graphers do their best to avoid them by using better lenses and lens hoods to reduce vignetting, lens flares and chromatic aberration and use different sensitivity films for appropriate scenes to reduce image noisiness so in the end they get as clear image as possible that is usable for editing - tracking, compositing or whatever they do.. In the gaming industry it is pretty opposite - renderer outputs a perfectly clear image and artists do whatever they can to make it imperfect.
Few years ago these effects were done with some moving view-aligned textures, but now with clever shader tricks we can fairly accurate simulate them as an image post-process effects.
I have re-created most of these effects already and posted results in my blog. Links:
lens distortion
lens blur with bokeh v1
dof with bokeh v2.1
lens flare
And here are very nice results from other guys
Lens Flare by Max Planck Institut Informatik
Lens Flare by John Chapman
DoF with bokeh by Epic Games
DoF with bokeh by Matt Pettineo (MJP)
Film Grain..
..is the reason why I am writing this post here right now.
Film grain is a texture on the photographic film caused by an emulsion containing photon sensitive silver halide salt crystals. They are sort of pixels of the photographic film. Depending of the size of the crystals varies the resolution and sensitivity of the film. Bigger the particle (higher ISO number), higher the light sensitivity, but the image is less detailed. Unlike the digital image sensor where light sensing pixels are arranged in a regular grid, film crystals are jittered randomly over the film which gives an image more pleasing for the human eye. The possible reason for that might be the fact that the film grain does resemble the pattern how the photoreceptors are arranged in the retina of the human eye. Awesome, right?
photoreceptors in human eye (source http://www.sciencecodex.com):
an extreme case of color film grain (source Wikipedia.com):
Now in the digital era of cinematography most movies are shot digitally, that`s why often the film grain effect is artificially added on digital image. Many of the Blu-ray movies have a very distinct graininess, which actually gives a nice high-def cinematic feeling.
So exactly the same should apply to computer games.
Film Grain does seem to be the least difficult to simulate compared to other lens effects, but surprisingly I have not yet seen any convincing real-time implementation that does resemble, for example, the nice granularity look of 35mm film. Well the best examples of film grain effect I found used in games are by Crytek and Valve software - Crysis Warhead/Crysis2 and L4D series to be specific. Unfortunately the effect can hardly be called "film grain", it is rather an overlay noise that makes the appearance of slight jitter. What they did right is the elusiveness of the effect. Increase the grain amount a little bit more and it gets annoying. For many game titles film grain effect bothered me so much I disabled it completely (if there was an option at all). Mass Effect was one of them, in fact in darker scenes it looked nice, but in highlights made the image look dull and dirty. It did a good job covering up some less detailed textures and models though.
The possible reason why film grain does not seem to have advanced over the years like other effects might be that the grain filter is so subtle the developers do not bring much attention to it. And why waste time, money and precious milliseconds of computing time to create an effect most gamers would never notice. Well, here exactly lies the problem - overdone effects. Most notorious are Bloom, SSAO, DoF and yeah.. Film Grain and they are certainly very easy to overdo.
Personally I love subtle details. For me the best effects are the ones that enhances the visual quality while not bothering me with its presence during gameplay.
And there is another point - high ISO film photograph can get very grainy but the image looks nice and natural, while a bit overdone film grain effect in game ruins any viewing pleasure.. So the problem lies in the technique which generates the grain pattern and mixes it with the scene image.
Approaches
The common methods of simulating it in games are either using a real grain texture or computing a noise pattern procedurally in runtime and then mixing them with the rendered image.
Pre-computed texture approach might make the best results as you can use actual grain texture taken on real film (filming against a grey background) and then overlaying this image to game scene. the downside is that it needs to be different in every frame. You can offset it a little and tile it, but a trained eye will always notice the tiling and this can make the effect very annoying. The approach does work best for still shots.
Procedural approach will ensure the grain will never tile, but the result is actually a noise and does not resemble the granularity of film grain at all. It does look more like a digital sensor noise. One might actually misinterpret it for an interference of the video signal to the monitor.
My take on Film Grain effect
All the time I have been using the procedural noise approach which is fast and gives nice results if the noise amount is very little, but as I mentioned it looks more like an interference in video signal.
After doing some research in this matter I collected bunch of reference images taken with film camera. I extracted the noise pattern from them and compared it to the noise shader I have been using. As you see it is lacking the graininess of the real thing.
I opened the image of my noise shader in Photoshop and tried to replicate the real grain texture. Blurring a little and adding 3 passes of sharpening did actually the trick. Unfortunately doing that for full-screen texture in shader would significantly slow the process and make it unusable in real-time.
So now I had to find a procedural or semi-procedural approach to simulate the same pattern in the shader without having to blur or rendering it in multiple passes.
Few years ago I did a vertex displacement mapping experiments with a procedural Simplex noise algorithm which created a nice grainy pattern. I resurrected the shader and applied it to a grey color and here is the result:
That is a really pleasant uniform grain. It is lacking a bit of the randomness but otherwise I call this a success!
Comparison shots of noise and grain applied to a gradient.
noise:
simplex grain:
Results
There is yet long way to go for more accurate results. It could be extended to include the real science behind it like varying graininess based on camera`s relative aperture. But I am only an artist so I go by whatever looks the best :)
This whole thing is a work in process, but I feel that even at this stage it looks already better than many other real-time film grain shaders. As you see the grain is not making the image look dull. It is less visible at bright areas of the image, but more noticeable in darker shades. An option to change the grain size is yet to be done.
Perlin noise grain applied in CryEngine (big images):
screenshot 1
screenshot 2
screenshot 3
100% crops from the shots above:
Continuing
today during further grain shader development I tried to replicate the grain in the image with the rally car. I had to de-noise the original image with resulted in some loss of detail. Then I applied the new grain shader on it. Here is the result:
original:
de-noised and artificially added film grain shader:
real film grain compared to new film grain shader:
There are some significant changes from the original shader:
- user variable grain size
- added varying coordinate orientation for noise pass to eliminate any directional artifacts
- option to reduce grain based on luminance value
- added more tweakables for color noise
downloads
v1.0 (old one):
HERE you can find the GLSL shader file.
v1.1:
HERE
References:
- noise algorithm I copied from HERE by toneburst, but original implementation comes from Stefan Gustavson found HERE
I am talking about lens flares, vignetting and chromatic aberration, depth of field, bloom effects and film noise/grain. In photography or film they are considered as visual artifacts caused by imperfections and properties of film and lenses and mainly - the physics behind optics. Most of photo/cinemato-graphers do their best to avoid them by using better lenses and lens hoods to reduce vignetting, lens flares and chromatic aberration and use different sensitivity films for appropriate scenes to reduce image noisiness so in the end they get as clear image as possible that is usable for editing - tracking, compositing or whatever they do.. In the gaming industry it is pretty opposite - renderer outputs a perfectly clear image and artists do whatever they can to make it imperfect.
Few years ago these effects were done with some moving view-aligned textures, but now with clever shader tricks we can fairly accurate simulate them as an image post-process effects.
I have re-created most of these effects already and posted results in my blog. Links:
lens distortion
lens blur with bokeh v1
dof with bokeh v2.1
lens flare
And here are very nice results from other guys
Lens Flare by Max Planck Institut Informatik
Lens Flare by John Chapman
DoF with bokeh by Epic Games
DoF with bokeh by Matt Pettineo (MJP)
Film Grain..
..is the reason why I am writing this post here right now.
Film grain is a texture on the photographic film caused by an emulsion containing photon sensitive silver halide salt crystals. They are sort of pixels of the photographic film. Depending of the size of the crystals varies the resolution and sensitivity of the film. Bigger the particle (higher ISO number), higher the light sensitivity, but the image is less detailed. Unlike the digital image sensor where light sensing pixels are arranged in a regular grid, film crystals are jittered randomly over the film which gives an image more pleasing for the human eye. The possible reason for that might be the fact that the film grain does resemble the pattern how the photoreceptors are arranged in the retina of the human eye. Awesome, right?
photoreceptors in human eye (source http://www.sciencecodex.com):
an extreme case of color film grain (source Wikipedia.com):
Now in the digital era of cinematography most movies are shot digitally, that`s why often the film grain effect is artificially added on digital image. Many of the Blu-ray movies have a very distinct graininess, which actually gives a nice high-def cinematic feeling.
So exactly the same should apply to computer games.
Film Grain does seem to be the least difficult to simulate compared to other lens effects, but surprisingly I have not yet seen any convincing real-time implementation that does resemble, for example, the nice granularity look of 35mm film. Well the best examples of film grain effect I found used in games are by Crytek and Valve software - Crysis Warhead/Crysis2 and L4D series to be specific. Unfortunately the effect can hardly be called "film grain", it is rather an overlay noise that makes the appearance of slight jitter. What they did right is the elusiveness of the effect. Increase the grain amount a little bit more and it gets annoying. For many game titles film grain effect bothered me so much I disabled it completely (if there was an option at all). Mass Effect was one of them, in fact in darker scenes it looked nice, but in highlights made the image look dull and dirty. It did a good job covering up some less detailed textures and models though.
The possible reason why film grain does not seem to have advanced over the years like other effects might be that the grain filter is so subtle the developers do not bring much attention to it. And why waste time, money and precious milliseconds of computing time to create an effect most gamers would never notice. Well, here exactly lies the problem - overdone effects. Most notorious are Bloom, SSAO, DoF and yeah.. Film Grain and they are certainly very easy to overdo.
Personally I love subtle details. For me the best effects are the ones that enhances the visual quality while not bothering me with its presence during gameplay.
And there is another point - high ISO film photograph can get very grainy but the image looks nice and natural, while a bit overdone film grain effect in game ruins any viewing pleasure.. So the problem lies in the technique which generates the grain pattern and mixes it with the scene image.
Approaches
The common methods of simulating it in games are either using a real grain texture or computing a noise pattern procedurally in runtime and then mixing them with the rendered image.
Pre-computed texture approach might make the best results as you can use actual grain texture taken on real film (filming against a grey background) and then overlaying this image to game scene. the downside is that it needs to be different in every frame. You can offset it a little and tile it, but a trained eye will always notice the tiling and this can make the effect very annoying. The approach does work best for still shots.
Procedural approach will ensure the grain will never tile, but the result is actually a noise and does not resemble the granularity of film grain at all. It does look more like a digital sensor noise. One might actually misinterpret it for an interference of the video signal to the monitor.
My take on Film Grain effect
All the time I have been using the procedural noise approach which is fast and gives nice results if the noise amount is very little, but as I mentioned it looks more like an interference in video signal.
After doing some research in this matter I collected bunch of reference images taken with film camera. I extracted the noise pattern from them and compared it to the noise shader I have been using. As you see it is lacking the graininess of the real thing.
I opened the image of my noise shader in Photoshop and tried to replicate the real grain texture. Blurring a little and adding 3 passes of sharpening did actually the trick. Unfortunately doing that for full-screen texture in shader would significantly slow the process and make it unusable in real-time.
So now I had to find a procedural or semi-procedural approach to simulate the same pattern in the shader without having to blur or rendering it in multiple passes.
Few years ago I did a vertex displacement mapping experiments with a procedural Simplex noise algorithm which created a nice grainy pattern. I resurrected the shader and applied it to a grey color and here is the result:
That is a really pleasant uniform grain. It is lacking a bit of the randomness but otherwise I call this a success!
Comparison shots of noise and grain applied to a gradient.
noise:
simplex grain:
Results
There is yet long way to go for more accurate results. It could be extended to include the real science behind it like varying graininess based on camera`s relative aperture. But I am only an artist so I go by whatever looks the best :)
This whole thing is a work in process, but I feel that even at this stage it looks already better than many other real-time film grain shaders. As you see the grain is not making the image look dull. It is less visible at bright areas of the image, but more noticeable in darker shades. An option to change the grain size is yet to be done.
Perlin noise grain applied in CryEngine (big images):
screenshot 1
screenshot 2
screenshot 3
100% crops from the shots above:
Continuing
today during further grain shader development I tried to replicate the grain in the image with the rally car. I had to de-noise the original image with resulted in some loss of detail. Then I applied the new grain shader on it. Here is the result:
original:
de-noised and artificially added film grain shader:
real film grain compared to new film grain shader:
There are some significant changes from the original shader:
- user variable grain size
- added varying coordinate orientation for noise pass to eliminate any directional artifacts
- option to reduce grain based on luminance value
- added more tweakables for color noise
downloads
v1.0 (old one):
HERE you can find the GLSL shader file.
v1.1:
HERE
References:
- noise algorithm I copied from HERE by toneburst, but original implementation comes from Stefan Gustavson found HERE
February 25, 2013
RGP day 15 - AI and a download link
So, as promised, I am finally giving you something to play with.
AI
I have added a very basic AI steering system and obstacle avoidance behaviors. I will write a more detailed article about it soon.
physics and handling
I completely rewrote handling and physics system using real world laws of aerodynamics. It was a really nice exercise and gave me the basic understanding of movement, drag, acceleration, etc.
The movement is now much smoother and the vehicle is very stable.
all math came from here: http://physics.info/drag/ & HERE
I will write a more artist-friendly overview of the physics behind the game.
UI
added subtle motion to the UI while steering
camera movement
The camera is now more dynamic. FOV, height and distance from vehicle increases with the velocity.
post-process filters
added a simple lens filter that distorts, blurs, creates vignette and adds some chromatic aberration near the edges of the viewport. I might make it react to the velocity as well.
a video:
and a download link to blend: https://dl.dropbox.com/u/11542084/RGPv01.zip
Now I have to finish few projects, so this is probably last (RGP related) blog post in next few months.
AI
I have added a very basic AI steering system and obstacle avoidance behaviors. I will write a more detailed article about it soon.
physics and handling
I completely rewrote handling and physics system using real world laws of aerodynamics. It was a really nice exercise and gave me the basic understanding of movement, drag, acceleration, etc.
The movement is now much smoother and the vehicle is very stable.
all math came from here: http://physics.info/drag/ & HERE
I will write a more artist-friendly overview of the physics behind the game.
UI
added subtle motion to the UI while steering
camera movement
The camera is now more dynamic. FOV, height and distance from vehicle increases with the velocity.
post-process filters
added a simple lens filter that distorts, blurs, creates vignette and adds some chromatic aberration near the edges of the viewport. I might make it react to the velocity as well.
a video:
and a download link to blend: https://dl.dropbox.com/u/11542084/RGPv01.zip
Now I have to finish few projects, so this is probably last (RGP related) blog post in next few months.
January 22, 2013
RGP day 10 - a bit of everything
First post in 2013, and I feel it is going to be a great year :]
I know it`s been a while, but I am working on the game again!
It is actually day 10 - 14 of the RGP. I worked on the project quite a lot, mostly tweaking the code to make it work just right. And finally here is also some visual stuff, while only sketchy, but something! So here is the stuff I`ve been busy these last 5 days.
physics and handling
I`ve been collecting some useful resources regarding physics, acceleration & springs`n`dampers aswell as browsing through YouTube videos of Wipeout, F-Zero and other futuristic racing games. I believe now that a nice vehicle handling system will be actually much bigger challenge than I initially thought. I hoped I could stay with Blender`s built in Bullet physics & material properties in UI, but I just could not get the feel and handling right as well as it caused stability issues at high speeds. So I created my own system. Basically it consists of spring-damper system for vehicle suspension, engine system for thrust and turning and a very basic inertia and gravity system.
race track & vehicle
I made a race track to push my physics system to the limits. Basically it is an oval loop with a twist - literally :). I created a race track based on Möbius strip - "A model can easily be created by taking a paper strip and giving it a half-twist, and then joining the ends of the strip together to form a loop". So you are actually racing on the both sides of the race track. Also the oval in the middle is bent around 90degrees up which at high velocity, will create very high negative or positive centrifugal forces, so that the race car will be either pressed against racetrack surface or pulled off it. In the game speedways will have a gravitational force field which will keep the race cars from falling off the track either at high centrifugal forces or regardless if the track is upside down, so I think that this kind of racetrack configuration is perfect for testing and tweaking purposes.
overview of the "Möbius race circuit"
clearer view of the configuration
This is a generic racecar you would find in similar racing games. As the rest of the game this is only a placeholder. More race car concept-art is on the way :)
UI
This is the first time I am working with Moguri`s BGUI - a graphical user interface (GUI) library for BGE. I have just started to mess around with it, so nothing much to see yet, but I intend to keep it simple and minimal, close to what you can see in the screenshots below.
Camera movement
I worked also on the camera movement a little. A good setup can add a great amount of immersion into the game. Just parenting it to the race car`s chassis does not look good. I will do a deeper look at it sometime later.
Graphics & FX
Nothing fancy yet - a simple skylight setup like THIS, completely texture baked terrain, simple fogging that gives an atmospheric feel. Exhaust trails are cross shaped , textured planes spawned each frame - I should find some more efficient way of doing them.
screenshots showing all of this together which starts to form up the feel of an actual game:
(I am having some difficulties with screen capture software working on Windows 8 so perhaps I will switch back to win7 to be able to make some videos)
Back to Win7 and video is here.
blend file is on the way.
I know it`s been a while, but I am working on the game again!
It is actually day 10 - 14 of the RGP. I worked on the project quite a lot, mostly tweaking the code to make it work just right. And finally here is also some visual stuff, while only sketchy, but something! So here is the stuff I`ve been busy these last 5 days.
physics and handling
I`ve been collecting some useful resources regarding physics, acceleration & springs`n`dampers aswell as browsing through YouTube videos of Wipeout, F-Zero and other futuristic racing games. I believe now that a nice vehicle handling system will be actually much bigger challenge than I initially thought. I hoped I could stay with Blender`s built in Bullet physics & material properties in UI, but I just could not get the feel and handling right as well as it caused stability issues at high speeds. So I created my own system. Basically it consists of spring-damper system for vehicle suspension, engine system for thrust and turning and a very basic inertia and gravity system.
race track & vehicle
I made a race track to push my physics system to the limits. Basically it is an oval loop with a twist - literally :). I created a race track based on Möbius strip - "A model can easily be created by taking a paper strip and giving it a half-twist, and then joining the ends of the strip together to form a loop". So you are actually racing on the both sides of the race track. Also the oval in the middle is bent around 90degrees up which at high velocity, will create very high negative or positive centrifugal forces, so that the race car will be either pressed against racetrack surface or pulled off it. In the game speedways will have a gravitational force field which will keep the race cars from falling off the track either at high centrifugal forces or regardless if the track is upside down, so I think that this kind of racetrack configuration is perfect for testing and tweaking purposes.
overview of the "Möbius race circuit"
clearer view of the configuration
This is a generic racecar you would find in similar racing games. As the rest of the game this is only a placeholder. More race car concept-art is on the way :)
UI
This is the first time I am working with Moguri`s BGUI - a graphical user interface (GUI) library for BGE. I have just started to mess around with it, so nothing much to see yet, but I intend to keep it simple and minimal, close to what you can see in the screenshots below.
Camera movement
I worked also on the camera movement a little. A good setup can add a great amount of immersion into the game. Just parenting it to the race car`s chassis does not look good. I will do a deeper look at it sometime later.
Graphics & FX
Nothing fancy yet - a simple skylight setup like THIS, completely texture baked terrain, simple fogging that gives an atmospheric feel. Exhaust trails are cross shaped , textured planes spawned each frame - I should find some more efficient way of doing them.
screenshots showing all of this together which starts to form up the feel of an actual game:
Back to Win7 and video is here.
blend file is on the way.
Subscribe to:
Posts (Atom)