shader之 移動端次時代

2021-08-14 01:10:30 字數 1714 閱讀 8569

做ta有兩年多了,市面上有比較多的次時代手遊出現,然而很多專案組還是望而卻步。最糾結的還是效率問題,

今天就按照自己的理解,聊聊如何可以做乙個高效率的次時代手遊。

次時代手遊,最有代表性的一塊,是場景,它在人的視野中佔據大部分比例,而場景最重要的是地表,所以今天

只談談地表的次時代製作。

一.貼圖部分

首先,乙個地表需要包含diffcuse、 bump、spemask 如下圖

spemask 是可以放在diffuse的通道裡的,但是壓縮帶通道的貼圖就不是那麼容易了,所以把它提出來作為一張新的貼圖

而且只需要他的乙個通道就可以了,其他的通道可以留著別的貼圖來使用,一張mask貼圖的rgb可以成為3張地表貼圖的

spemask,這樣看也不算特別的浪費。

二 模型部分

這個模型沒什麼好說的,記得乙個原則,大結構用模型做結構,小結構靠法線跟貼圖來表現,這是次時代的基本要求

能省則省

三 shader部分

這個是個重點,我們會發現支援法線支援高光貼圖,那麼我們就需要乙個實時燈光,不然烘焙完後,燈光關閉了,就sheng

下最原本的diffuse效果+烘焙圖效果了。如下圖:左圖是烘焙前  右圖是烘焙後

在烘焙後的基礎上,再加一盞directional light,它的法線效果跟高光效果才會出來。但是加了一盞燈,就要考慮到實時光影,它的消耗是

可想而知的。囉嗦了半天,我們要實現的就是,在不要實時光的情況下如何實現高光跟法線效果。那麼我就得從shader下手,在shader裡面

加上乙個能模擬實時燈光的變數

一盞directional light包含的表面資訊是

1 lightdir      方向

2 lightcolor   顏色

3 intensity     強度

至於深層次的資訊,比如讓物體產生陰影 是否參與烘焙 ....... 等太多太多的東西,我想也是造成他影響效率的主要原因,但是對我們來說並

不重要,我們把這三個變數去替換shader中的light引數:

properties部分

shader "game_***/scenes/ref_static"
我們將這3個引數去貼換真正燈光裡的這幾個引數,就可以了,結果如下圖:

我們會發現,這個高光效果跟真正的光沒有區別,會跟著角色移動而動,而很難想象,這並不是實時光

為了效果明顯,故意把效果調的過強了...

總結:我們應該用這樣的方式去做次時代手遊,看到別的遊戲有光影變化效率卻很高的時候也不用詫異,並不一定是實時光

這只是模擬了平行光,點光源的原理也是如此......

移動端效果之swiper

最近在做移動端方面運用到了餓了麼的vue前端元件庫,因為不想單純用元件而使用它,故想深入了解一下實現原理。後續將會繼續研究一下其他的元件實現原理,有興趣的可以關注下。在這裡 戳我 父容器overflow hidden 子頁面transform translatex 100 width 100 由於所...

移動端效果之ScrollList

請看這裡 github 移動端效果之swiper 移動端效果之picker 移動端效果之cellswiper 移動端效果之indexlist id loadmore class loadmore id loadmorecontent class loadmore content class page...

移動端適配之rem

現在手機業務的逐漸發展,移動端的業務原來越多,但是我們的手機品牌有很多,同乙個牌子又有很多不同的型號,比如iphone就有從iphone iphonex多種型號,每種不同型號的手機螢幕大小也不盡相同,很多時候要做適配。總結一下目前個人用的幾種適配方式 1.js less 首先在頁面的頭部加上這麼一段...