-->

分類

2017年3月22日 星期三

Unity depth mask using additional camera

reference
sample unity package
Note: this trick doesn't work with Unity SteamVR plugin's CameraRig
Note: this is a different implementation from the depth mask from unity wiki

The basic idea of depth mask is just like normal z-test. You use transparent objects (say mask objects) that are closer to the camera so other objects behind the mask objects will not pass the z-test and not be rendered.

However the problem is that under the same camera rendering, transparent objects can't be considered as passed z-test when opaque objects are behind them.

So the trick is just like the reference link above, use another camera (say camera2) that draws masked object after previous camera(say camera1) rendered the transparent masks.

In this case, camera1 draws first and makes transparent objects write to the z-buffer, then when camera2 is drawing, since the z-buffer is occupied by the transparent objects, the object behind the mask will fail the z-test.

Apparently, the camera1 and camera2 need some settings to achieve the mask effect. Just like the reference link, camera1 needs to render before camera2, so the "depth" property in Unity camera needs to be setup. Just set camera2's depth be larger than camera1's depth to achieve the rendering order.

Then since camera2 draws on top of camera1, camera2's "clear flags" needs to be set as "Don't clear".

Make sure that camera2 has exactly the same camera properties and 3D objects settings as camera1(transforms, fov...), otherwise the rendered scenes will not match.

Add transparent objects into the scene as mask. The transparent objects need to write into the z-buffer, you can use the shader code below to achieve this.

Finally, add a User Layer in Unity (say MaskedObject as the layer name), set masked object to be in the MaskedObject layer, set camera2's culling mask to MaskedObject, then try to move the masked object behind the transparent masks.



here is the result

the moving cube is masked at certain positions, those positions actually are occupied by transparent cubes and the transparent cubes occlude the masked cube.

the shader code for transparent mask object
Shader "SimpleTransparentZWrite"
{
 SubShader
 {
  Tags{ "Queue" = "Transparent" }
  Pass{
   Blend SrcAlpha OneMinusSrcAlpha
   ZTest LEqual
   Cull Back

   ZWrite On
   CGPROGRAM
   #pragma vertex vert
   #pragma fragment frag
   #include "UnityCG.cginc"
   struct appdata {
    float4 vertex : POSITION;
   };
   struct v2f {
    float4 pos : SV_POSITION;
   };
   v2f vert(appdata v) {
    v2f o;
    o.pos = UnityObjectToClipPos(v.vertex);
    return o;
   }
   half4 frag(v2f i) : SV_Target{
    return half4(0,0,0,0.0);
   }
   ENDCG
  }
 }
}

2017年3月8日 星期三

Windows Node JS app deployed on heroku(using GitHub)

03/14/2017 update: add new heroku deploy notes about modifying the app entry point. if the entry point is not modified, the heroku server always runs the heroku NodeJS sample

1. Download NodeJS here: https://nodejs.org/en/download/ , install NodeJS

2.  Go to GitHub and create a repository: https://github.com/

my repository name is TestNodeJS


3. Go to heroku and create an app: https://dashboard.heroku.com/apps

my heroku app name is myynodejstest

4. Setup heroku's NodeJS sample (follow the steps in the link): https://devcenter.heroku.com/articles/getting-started-with-nodejs#introduction

clone heroku NodeJS sample:
https://devcenter.heroku.com/articles/getting-started-with-nodejs#prepare-the-app

5. git push the heroku NodeJS sample to the GitHub repository created in step 2

6. link GitHub repository to heroku app and deploy to heroku

go to your heroku app dashboard: https://dashboard.heroku.com/apps/your_app_name
press the Deploy button


connect to the GitHub repository of your NodeJS project


deploy the GitHub repository branch


7. check your app by the link: https://your_heroku_app_name.herokuapp.com/

8. Windows NodeJS dev environment setup:
to make npm module globally accessible, you need to add npm module path to user's environment variable:
variable name: NODE_PATH
variable value: %USERPROFILE%\AppData\Roaming\npm\node_modules
for more info, please check here: http://stackoverflow.com/questions/9587665/nodejs-cannot-find-installed-module-on-windows

9. modify app entry point(03/14/2017 added)
not so sure but I changed the following fields
 -"app.json" - repository
 -"package.json" - main, scripts.start
 -"Procfile" - web: node {your_entry_point_file}(your server.js)

10 other things need to be noticed
 - npm package dependencies: need to modify "package.json" - dependencies
 - server's port: please use "port = process.env.PORT || 5000", if heroku can't bind the port