A rapid prototype for phone AR design, demos how we enter the cyberpunk version of the world.
AR设计的快速原型实现，展示我们怎样进入赛博朋克版本的世界。
The basic idea is that there are many version of our world we live and they are always there, all we need is just a portal to enter it, and regardless of what AR device we are using. So these AR worlds are consistent, and have location based contents to either provide useful information, or help entertain the users.
The development of this demo consists of the following sections:
Cyberpunk Postprocess
Postprocess in Unreal is a way of image processing, the difference is the process is more suitable for dealing with real-time rendering output of 3D geometry, with the depth buffer of the 3D scene.
Here since I have a portal, the postprocess effect sometimes need to be applied partially on the screen (refer to portal section in the following, ensure the effects are the same). So I did all the post process in the post process material, directly apply to the CameraImage texture. The processes are:
- Apply color grading lookup table got from photoshop. Applying color grading in Photoshop is easy and strong, but Unreal does not provide much image processing functions built-in in shaders, so Color Lookup Table (LUT) is a very convenient way to applying pre-defined color grading in Unreal materials.
- Get the bright areas and blur them, to create the feeling of neon lights.
- Add very thin moving fog texture.
- Add LOMO style darker edge and corner to the screen output.
Portal Effect and Function
The portal function demoed here used Scene Color behind translucent for cyberpunk image color grading, and Scene Capture function for capturing the holo cat, grids and planes, then add them together.
The visual effect for portal is a combination of circling particles, ribbon particle trails, and event triggered particle sparks.
Hologram Cat
The cat is from my personal asset library collected. The cat was well rigged and animated, with all animations in one take. What I did for the animation this time is separating and importing the animations, creating the animation state machine and blueprint, and add character blueprint for it with simple logic and triggers.
The shader of the holo cat is done from scratch. It consists of the following parts:
- Screen aligned dots showing it’s a virtual animal projected by high tech;
- Semi-random glitches make it more a cyber buggy feeling.
The tutorial of this glitching hologram cat is available in this post.
Other Hologram Effects
Grid, holo arrow on the road, and cat adoption advertisement panels, are all simple dynamic material effects to add a bit feeling to the cyberpunk world for this demo.
