Tag Archives: graphics

Working on the arenas

I find 3D modelling in blender very fun, but it sure is time consuming. And it get even more time consuming when I all the time need to render out my scenes even though I only need the models for Unity.

Heres my latest render of Shackles Bay, Chuck’s home and arena. It’s in no way final, alot of it needs to change before it’s done, but it has about the right feel already.


What do you think?

Animating characters

The two last days I’ve been creating one of the characters for the Wacky Waves game,”Chuck Shackles” the ghost pirate. I’m creating the characters in Blender3D. My skills are limited, but I’m taking my time with the models, keeping the poly count low, and keeping everything flat shaded and polygons single colored! Here is an early render of the character: 

I also tried out Adobe’s mixamo autorigger and animations to take him for a spin!

Any thoughts on the style I’m going for? 

Wacky Waves

I’ve started focusing all my development energy on a game project named “Wacky Waves”. It’s going to be a fast paced action boating game with battles between players and the environment. I’ve put up a site www.wackywaves.com that will have some info on the game, and a twitter account @wackywavesgame that I’m sharing my progress on! I’ll be sharing my bigger progress posts on this blog mainly, to keep things in one place! Hopefully I’ll be able to share more regularly than I’ve been able to before! Here’s some very early screens from the game I’m working on!

Screen Space Texture Shader: Part 1

Redditor u/pigrockets asked a few days ago on r/Unity3D “What’s do you call this kind of static pattern shader?”

I call it the “Screen space Texture Shader” and here is how to make one in Unity.

First of all: What do we need to make this?

We need some way to calculate the screen position of every point on your model so that you know what pixel of your screen space texture/static pattern goes where. In Unity you can get this position calculated for free!

And as you can see from the video you want the shader to have an outline to get that cartoony look! This we will accomplish with a vertex program, where we want to scale our model a little bigger depending on the width we want on our outline, and then we color this model without any lighting in a fragment program. This “pass” will render underneath the static pattern.

For this simple shader example we won’t make a custom lighting model, which we would do if we wanted a more cartoony look.

Create your custom shader

CreateSurfaceShader.JPG

First you create your shader Create>Shader>Standard Surface Shader, and name it “ScreenSpaceTextureShader” or whatever you wan’t to call it! Open up the shader and you will see that you’ve got a lot of free code for your new shader:

Okey! That’s a nice start! On the top we have
“Shader “Custom/ScreenSpaceTextureShader” {” This names our shader “ScreenSpaceTextureShader” and puts it in the Custom shader folder.

Then we have our properties to set up our materials from the inspector. You can actually skip the properties and set up your materials entirely from script, but that is another story.

Then there’s the Subshader. This is where the magic happens, the “Tags” defines certain parameters for the shader, mainly render order. You can set the LOD for your shader also.
In the CGPROGRAM you have your shader code.

“#pragma surface surf Standard fullforwardshadows” says that we will have a surface-function called “surf” using the Standard lighting model. And finally we want fullforwardshadows, which basically means we get shadows cast from all light sources in forward rendering.

“#pragma target 3.0” means we are targeting shader model 3.0, this gives a little nicer lighting i guess, but limits the compatibility of the shader, so you can remove this if you want it to work “everywhere”.

Next up is our definitions _MainTex is a sampler2D, _Glossiness is half, _Metallic is half and _Color is fixed4. float, half, and fixed is basically the same thing with different precisions, float being the most precise, then half which you should use alot for mobile optimization, and fixed which is the least precise.
Then we have our Input structure.

This sets up what we want to pass to our surface-function. Like our models UV info. Here we have uv_MainTex which is the first UV set of the rendered mesh.

Finally we have the surface-funtion:

“void” – we are not returning anything from this function. “surf” – like we said in our “#pragma surface surf” our function is called “surf”. “Input IN” – structure type Input, with variable name “IN” is passed to our surface-function. “inout SurfaceOutputStandard o” – what light model output structure we are using.
tex2D(_MainTex, IN.uv_MainTex) read the pixelcolor of our main texture in the xy position from the uv_map, this is multiplied with our _Color and we have our Albedo Color. Metallic and Smoothness is set directly in the inspector.

Now try making a material with this “Standard” Shader! Create a new material. I’ve called it “ScreenSpaceMaterial” and select our new custom shader like so:

CreateMaterial

The material should have an inspector view with these properties:

Inspector

As you can see we have material Color, Albedo Texture, Smoothness and Metallic, but we need more properties for our Screen Space Texture Shader. We need a “screen space texture”, “outline color”, and a way to set our “outline width”.

So we add some new properties to our shader. _ScreenTex, _OutlineColor and _Outline.

Our _ScreenTex defaults to all white, _Outline color defaults to black (0, 0, 0, 1), and our _Outline needs to be within the range 0.0 to 0.03 and defaults to 0.005. Save this and your material inspector will look like this.

Inspector2.JPG

The Screen space Texture implementation is quite simple compared to the outline so we’ll start there. We need to sample our _ScreenTex in the surface-function so add “sampler2D _ScreenTex;” like we have for our _MainTex. And we need to know what the screen position is in our surface-function so add “float4 screenPos” to the Input-structure. Like this:

When we add screenPos to our Input like this, with exactly that name Unity gives us this “for free”. We can also have worldPos, viewDir and others that is done by Unity. But we only need screenPos for this.

Now we want to get the screen position in normalized values and sample the texture. To get the normalized screenpos we do:
half2 screenUV = IN.screenPos.xy / IN.screenPos.w
then we sample the texture with this coordinate:
fixed4 sstc = tex2D(_ScreenTex, screenUV);
then we multiply this color with the color we already have and get this surface-function:

That is all you need for the screen space texture part. Save the shader and try it out! Add a screen space texture to your material and you should get a result like this:

In the next part we will wrap up the shader, by adding the outline! So long!

Low poly models

When I’m not making games or shaders I enjoy building 3D models in Blender. I’m  quite addicted to the low poly, flat shaded style so it’s all that kind of models. Of course the fact that low poly is simpler and faster to make is important for me since I don’t have time for anything else.. Here are some in progress renders I’ve done lately..

Nisse and varg..  The santa-like nisse is rigged as well, I’ve used the character in a Unity test project..   

   
Uppsala temple (Viking age)       

  

Custom shaders and shadows

Since I’m quite new to this shader business I’m bumping into problems here and there, and this time I’m really struggling with solving it.

I’ve made this shader that I’ve gotten to cast shadows with a custom ShadowCaster pass but I’m still not able to get it to collect shadows in any way. I’ve tried getting the fallback to handle the ShadowCollector pass, I’ve tried diffent ways to write the shadowcollector pass, and I’ve tried setting the Queue to geometry and RenderType to Opaque instead of Transparent..

Shader coding in Unity is hard, because there isn’t much info to be found anywhere about how things work and how it should be done. Does anyone out there have any tips on how I can get this to work?

See the code below or download the shader here.

Low poly water shader:evolved

Hi, folks! I’ve continued working on my water shader! I’ve added transparency and today I added impact waves to the shader, which I’m quite happy with managing to do! It’s limited to 10 simultaneous “impact waves” at the same time at the moment. But adding more is not a problem. The collision points and impact force is sent to shader from script. And waves are calculated in shader.
Have a look at what it looks like in action:

Low poly water shader

Edit: I’ve added a link to a downloadable version of the shader! Copying the code from this post does crazy stuff to the symbols..

The side tracking specialist strikes again.

I’ve been working on another project lately and ended up in need of low poly flat shaded animated water.

I tried editing the mesh at runtime by script. Using the method mentioned by joni.giuro here: http://forum.unity3d.com/threads/low-poly-water-help.276685/

But when using the standard plane with this script, basically 200 triangles and when you’ve separeted all vertices (600), FPS drops down from 1500 without script to 190 with script applied. If you add more planes or models with more triangles you quickly get to a point where you get 1 FPS. So I needed something else.

That’s when I figured I’d try my luck with shaders.

Tried googling for solutions, but nothing was to be found so I needed to build my own. With no experience in shader programming this proved to be harder than I expected. But fast forward through some horrible looking results to today. Now I’ve gotten to a point where I can take any plane (not having to worry about splitting verts) applying my shader and getting this:

Almost no hit on FPS with fully animated low poly flat shaded water with specular color. And with this solution:

I can add looots of planes with this shader with almost no hit on FPS. Here I’ve added got 30 standard Unity planes with 200 tris each, all animating off into the distance.

Here’s a video of it in motion:

So how is this done, you say?

Code below.

It’s not perfect but it works! F.ex. I’ve left the UV coords in there but don’t need them for this. And I’m not entirely happy with the waves just yet.. But here you go.

Link to downloadable version

Unity WP8 Shadow Problem

This weekend I recieved an update to Unity (v 4.5.4f1) and I decided to try out getting realtime shadows to work on the Windows Phone 8 Version of 3ounce. Since Unity actually claims “shadows on all platforms”, I still haven’t gotten shadows to work for my wp8 builds.. I’ve tried out every quality setting and tried building a simple scene just for testing purposes, but no go.. This really bothers me since I want my game to look the same for Android, iOS and Windows Phone.. What makes it worse is the fact that on the Windows phone Emulator it Works fine! So I’m guessing that some wp8-phone models could pull the shadows off just fine.. But some, including my Lumia 930 can’t handle shadows. What bugs me is the fact that when shadows isn’t working the entire light actually cast a gigantic shadow covering everything within the max shadow distance..

 

ShadowTest Editor

This is what the scene is supposed to look like (In editor)

ShadowTest wp8

This is what it looks like on my Lumia 930.

ShadowTest wp_emu

And on the Windows Phone Emulator….

I’m not sure if I want to disable shadows for all wp8 or have an option for switching shadows on/off in settings..

We’ll see what I end up With.. but the best thing would be for unity or Microsoft to fix whatever’s causing this..

The look

I thought I would post some screenshots of 3ounce with the latest graphical tweeks I’ve added, so you can get an idea of what direction I’m probably taking Battlemaze, graphics wise.

concept01

Concept02

Concept03

Concept04

As you can see I’m going for a clean and simple look. I’m a big fan of simple/cartoony graphics design, and will probably stick with this in some form.

What do you think?