發表文章

【JS】Threejs 一場從2D變成3D的冒險

Threejs 是一套可以在網頁上面運行3D世界的HTML5 CANVAS 3D library,有興趣的朋友可以看下面我的入門簡報
Threejs官網 https://threejs.org/

【JS】CreateJS之我與Flash的愛恨情仇

CreateJS是一套間單好用的 HTML5 Canvas Library,因為有Animate CC幫助建立ui與動畫,讓你可以專心處理好邏輯,不要用再去處理其他繁瑣的工作

【Unity】Outline 外輪廓線效果

圖片
再製作遊戲時常常會有需要一個模型然後有外輪廓線的效果,這個效果我們稱之為Outline,如下圖






















今天就要來跟大家說怎麼樣可以做出這種效果,其實Outline效果在Unity官方提供的素材中有提供,在import Package -> Effects裡面








【Unity】Unlit Transparent 平面重疊交錯

圖片
我們在開發VR遊戲的時候一定會做到UI的部份,UI的話就會使用Plane去做,搭配Unlit Transparent材質球將光源影響給去除,但是當兩個Plane的貼圖同樣都帶有alpha然後排在一起時,攝影機在Render時常常會出現兩個Plane平面重疊交錯,階層混亂的問題,如下圖























會出現這問題是因為Unity在Render畫面的時候他無法分辨兩個Plane的深度,目前不知道正確原因是什麼,但是猜是因為alpha的貼圖造成Unlit Transparent出錯...
我查了一下Unity官方的文件上面寫到一句話

For special uses in-between queues can be used. Internally each queue is represented by integer index; Background is 1000, Geometry is 2000, AlphaTest is 2450, Transparent is 3000 and Overlay is 4000. If a shader uses a queue like this:

原文連結 https://docs.unity3d.com/462/Documentation/Manual/SL-SubshaderTags.html

這個意思是Unity在Render畫面的時候是有個順序的,數字越小越快Render,有點像是階層的概念,預設的Transparent是3000,所以目前的解法就是將UI前後的Transparent改成不一樣的值,不要同樣在3000就好~

接下來要自己寫 Shader 來達成這件事,新增一個Shader 命名為TransparentDepth






















以下是Shader 的 code

Shader "Mike/Transparent Depth" { Properties{ _MainTex("Base (RGB) Trans (A)", 2D) = "white" {} } SubShader{ Tags{ "Queue" = "Transparent-20""IgnoreProject…