Announcement

Collapse
No announcement yet.

Simple Outline Shader For Mobile (iOS)

Collapse
X
  • Filter
  • Time
  • Show
Clear All
new posts

    Simple Outline Shader For Mobile (iOS)

    I'm looking to render an outline for my game meshes which are mainly simple rocks and wooden planks/items/buildings. I'm hoping to use tiling textures which are can then be rendered with an outline of the mesh rather than having to use unique textures.

    I have seen that this is possible with post processing effects, but I have not had any luck getting this to work for mobile. Would I be better off texturing in this outline instead? Or is this fairly simple to do for an iOS mobile game?

    Cheers!

    #2
    If you are looking for outline of 3d models then "Fresnel" node is your friend, together with camera vector X (world normal X normalmap), (X for dot product). You can make outline and fake shadows simple material, maybe not accurate but cheap to render. Just play with those nodes in material editor.

    If you are looking for outline of flat meshes (like 2d platformer game), well i could not find solution to this, if you find one, please post about it.

    There is also quite good cell shading material on market, you probably could buy it and strip down to fit mobiles.

    PS. google for "Udk cell shading" and "unreal cell shading" many examples of materials are out there.

    Comment


      #3
      Originally posted by Nawrot View Post
      If you are looking for outline of 3d models then "Fresnel" node is your friend, together with camera vector X (world normal X normalmap), (X for dot product). You can make outline and fake shadows simple material, maybe not accurate but cheap to render. Just play with those nodes in material editor.

      If you are looking for outline of flat meshes (like 2d platformer game), well i could not find solution to this, if you find one, please post about it.

      There is also quite good cell shading material on market, you probably could buy it and strip down to fit mobiles.

      PS. google for "Udk cell shading" and "unreal cell shading" many examples of materials are out there.
      Thanks for your response and suggestions. It's mainly 3d stuff i'm looking to detect the edges for, although I'm also using some planes for foliage and scenery.

      The cell shaders I've been able to find all use post processing effects which I cannot get to work on the mobile emulator. So unless it is possible to get post processing on mobile I think i'll need a different approach.

      Fresnel looks like it could be useful for detecting edges, although i'm still a long way off where i'd like it to be. Do you know how I can add in the camera vector etc?

      Click image for larger version

Name:	fresneltestimage.jpg
Views:	1
Size:	386.8 KB
ID:	1065132

      Thanks!
      Attached Files

      Comment


        #4
        you could also make a duplicate of your geometry in your 3d app, increase the size along the vertex normals slightly, make all the vertex normals smooth(no hard edges) and invert the faces. that's a really oldschool trick for it and will obviously almost double your vertex counts, but it works fairly well and keeps the shaders simple.

        Comment


          #5
          Originally posted by divi View Post
          you could also make a duplicate of your geometry in your 3d app, increase the size along the vertex normals slightly, make all the vertex normals smooth(no hard edges) and invert the faces. that's a really oldschool trick for it and will obviously almost double your vertex counts, but it works fairly well and keeps the shaders simple.
          Thanks, yeah I read about this technique, but especially as this has to run on iOS I don't want to double my polycount. I'd probably be better off using up more texture space and using unique textures than doubling my texture space. Unless anyone else has another suggestion?

          Comment


            #6
            Yup, thanks for pointing this old trick out.

            Since mobiles do not care much about polycount, but more about pixelshaders. I think this duplicate geometry trick will do well on mobiles.

            I am not at my home desktop now, but what i remember from my materials:

            I fake global directional light, because its much cheaper, i can get some "phong" fake lighting model this way, all with dark surfaces that are in shadow (no shadows casted).
            You would want this to make darker (shaded) are on models. It is simply dot product of normal map, world normal, and lightvector (that i supply as parameter).

            Currently i am trying to make (fake) shiny metallic reflections of global light, but android for some reason cannot produce bright pixels at all. Everything at best is what you would get with 0.75 brightness on PC in editor, and that is when i supply 4 up to 16 as brightness value in android. I know it cuts that to 1 if there is no postprocess with bloom. But finding reasons for this is for later time when i do facelifting pass on my game.

            Ps. well then ios is opposite to android in regrads to polycount vs shaders
            Last edited by Nawrot; 01-14-2015, 09:25 AM.

            Comment


              #7
              We want to share our current mobile outline result.

              After some investigation, we could list up main obstacles to implement mobile outline in UE4, which are as follows.

              1. Hard to implement as PP because of no scene texture support in mobile PP.
              2. Hard to implement as drawing-twice because no support of front-face culling. To go through this, a separated face-inverted mesh is needed. The package and memory size become doubled.
              3. Rim-light (or Fresnel) way is affected by polygon size and normal quality. Generally the lines are poorer than PP or drawing-twice methods.

              Today we could achieve the following result. It is basically based on the drawing-twice method. The difference is we could achieve this by using the same single mesh twice. That is, we didn't make any separated face-inverted mesh outside UE4.

              Click image for larger version

Name:	jiffycrew_mobile_outline_wip.png
Views:	2
Size:	411.6 KB
ID:	1113910

              We are planning to include this feature in our Character Cel Shading Pack (https://www.unrealengine.com/marketp...l-shading-pack). Another possible option can be packaging a cheap independent mobile outline pack. We are considering that too.

              https://jiffycrew.com
              https://www.unrealengine.com/marketp...file/Jiffycrew
              Last edited by Jiffycrew; 08-17-2016, 09:49 AM.
              https://jiffycrew.com

              Comment


                #8
                Originally posted by Jiffycrew View Post
                We want to share our current mobile outline result.

                2. Hard to implement as drawing-twice because no support of front-face culling. To go through this, a separated face-inverted mesh is needed. The package and memory size become doubled.

                Today we could achieve the following result. It is basically based on the drawing-twice method. The difference is we could achieve this by using the same single mesh twice. That is, we didn't make any separated face-inverted mesh outside UE4.
                ]
                So you used the "double vertex count" method? I think this is very good and usefull to highlight a selected item in a game but i'm still looking for a full (or almost) outline effect like in GTA Chinatown wars and can't double the whole vertex count.

                Comment


                  #9
                  Originally posted by Haoris View Post
                  So you used the "double vertex count" method? I think this is very good and usefull to highlight a selected item in a game but i'm still looking for a full (or almost) outline effect like in GTA Chinatown wars and can't double the whole vertex count.
                  Hi Haoris,

                  I agree with you on that you'd better not using our All Platform Outline Pack method (double vertex count) for your whole scene.
                  A good news is UE 4.14 now supports scene textures so that you can draw PP outlines on mobile devices. Our cartoon rendering pack has such a PP material (PP_crp_silhouette) that works in mobile.

                  Check the following document for the detailed comparison of our mobile outline implementations:
                  http://docs.jiffycrew.com/?docs=cart...k/line-drawing
                  https://jiffycrew.com

                  Comment


                    #10
                    Originally posted by Jiffycrew View Post
                    Hi Haoris,

                    I agree with you on that you'd better not using our All Platform Outline Pack method (double vertex count) for your whole scene.
                    A good news is UE 4.14 now supports scene textures so that you can draw PP outlines on mobile devices. Our cartoon rendering pack has such a PP material (PP_crp_silhouette) that works in mobile.

                    Check the following document for the detailed comparison of our mobile outline implementations:
                    http://docs.jiffycrew.com/?docs=cart...k/line-drawing
                    Oh nice, I've bought it some month ago but never checked it for mobile games.

                    Comment

                    Working...
                    X