Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Sign up for free
Menu
Search
Features
All features
Private URLs
Password Protection
Custom URLS
Scheduled publishing
Remove Branding
Restrict embedding
Deck Collections
Notes
Features
All features
Private URLs
Password Protection
Custom URLS
Scheduled publishing
Remove Branding
Restrict embedding
Deck Collections
Notes
Explore
Featured decks
Featured speakers
Programming
Technology
Storyboards
Explore
Featured decks
Featured speakers
Programming
Technology
Storyboards
Pricing
Search
Sign in
Sign up for free
Sirius ~統合スタイライズド レンダリングシステム~
Search
TakayukiKiyohara
October 06, 2023
Programming
1.6k
1
Share
Embed
Copy iframe code
Copy JS code
Copy link
Start on current slide
Sirius ~統合スタイライズド レンダリングシステム~
SGEコア技術本部( 通称コアテク )で開発中の統合スタイライズドレンダリングシステムのSiriusでのアウトライン描画の手法ついて解説します。
TakayukiKiyohara
October 06, 2023
More Decks by TakayukiKiyohara
See All by TakayukiKiyohara
ラスタライザとレイトレのハイブリッドレンダリングエンジン
takayukikiyohara
1
1.9k
Other Decks in Programming
See All in Programming
AIがコードを書いてくれる時代、我々は何を確かめるのか
yosuke_furukawa
PRO
12
4.9k
見えないものを探る要求要件定義に必要な基本的思考 / invisible-requirement-thinking
minodriven
15
8.8k
Railsバージョンを4倍にした話
optim
0
800
Augmenting AI with the Power of Jakarta EE
ivargrimstad
0
450
GraphQL の onError と Nullability のこれから
quramy
0
190
golang-bob.pdf
iwatsukayura
0
140
Kotlinの15年とServer-Side Kotlin
n_takehata
1
170
Compiling a real-world CLI tool to native with Static Hermes
tmikov2023
0
130
【加筆修正版】Laravel のアプリケーションをどこにデプロイするか #phpcon_ehime
akase244
0
160
When benchmarks go bad - what I learned from measuring performance wrong
hollycummins
0
240
Inertia Rails: The One-Person Framework with React & Friends
skryukov
0
160
APNsからLive Activityを開始する話
yumnumm
0
180
Featured
See All Featured
We Analyzed 250 Million AI Search Results: Here's What I Found
joshbly
2
2.1k
技術選定の審美眼(2025年版) / Understanding the Spiral of Technologies 2025 edition
twada
PRO
120
120k
Why Mistakes Are the Best Teachers: Turning Failure into a Pathway for Growth
auna
0
330
The Anti-SEO Checklist Checklist. Pubcon Cyber Week
ryanjones
0
270
jQuery: Nuts, Bolts and Bling
dougneiner
66
8.6k
Producing Creativity
orderedlist
PRO
348
41k
We Have a Design System, Now What?
morganepeng
55
8.4k
Java REST API Framework Comparison - PWX 2021
mraible
34
9.8k
Highjacked: Video Game Concept Design
rkendrick25
PRO
1
490
Believing is Seeing
oripsolob
1
250
Building Adaptive Systems
keathley
44
3.3k
How to Think Like a Performance Engineer
csswizardry
28
2.9k
Transcript
Sirius ~統合スタイライズド レンダリングシステム~ 株式会社サイバーエージェント 2023.09.07 清原 隆行
自己紹介 SGEコア技術本部(通称コアテク)という横断組織でグラ フィックエンジニアとして働きつつ、ゲーム系の専 門 学 校で非常勤講師もやっています。 「HLSLシェーダーの魔 導 書」という本も書きました。 現在の人生のメインミッションは育児です。
清原 隆行
Siriusとは? Chapter : 01
Siriusとは? キャラシェーディング、アウトライン 描 画 、 ポストプロセスなどを 含 んだスタイライズド な表現を行える基盤を目指してSGEコア技術 本部(コアテク)で開発中のシステム
統合スタイライズドレンダリングシステム
Siriusとは? • ランプシェーディング、シェーディングマップなどいくつかのシェーディング手法が選択可能 • 背面法とポスト法による高品質なアウトライン描画が行える • 軽量で高品質なポストエフェクトを使える • カメラライトシャドウによる高品質なセルフシャドウが落とせる •
現在のミドルスペック端末で十分なパフォーマンスを出せる 現在の特徴と目指しているところ 今回はここに焦点を 当ててお話しします
Siriusでのアウトライン処理 Chapter : 02
Siriusでのアウトライン処理 背 面 法 とポストエフェクトのハイブリッド 式 を 採 用 している
下記のゲームでハイブリッド式のアウトライン処理が採用されていた • 鬼滅の刃 ヒノカミ血風譚[1] • ナルティメットストーム4[2] • ブループロトコル[3] 背面法とポストエフェクトのハイブリッド式
Siriusでのアウトライン処理 背面法とポストエフェクト法のデメリットを相殺することが期待できたため なぜハイブリッド式を採用したのか?
Siriusでのアウトライン処理 • メリット ◦ 処理が速い ◦ アウトラインの強弱がつけやすい ◦ アウトラインの色の制御が容易 •
デメリット ◦ カメラとの距離でアウトラインの太さが変わる ◦ モデルの形状によってアウトラインが消えてしまったり、モデルから離れてしまっている ように見える ◦ アルファで抜いている箇所にアウトラインを描くことが難しい 背面法のメリット/デメリット
Siriusでのアウトライン処理 • メリット ◦ カメラとの距離に関係なく一定の太さのアウトラインを表示できる ◦ アルファで抜いている箇所にアウトラインを描くことができる • デメリット ◦
処理負荷が高い。特に解像度が高く、メモリ帯域が狭いスマホでは採用しづらい ◦ アウトラインに強い強弱をつけることが難しい ◦ アウトラインの色の細かな制御が難しい ポストエフェクト法のメリット/デメリット
Siriusでのアウトライン処理 現在のアウトライン処理
ハイブリッド式の苦労 Chapter : 03
ハイブリッド式の苦労 ポストエフェクト法はアウトライン用のG-Bufferを使ってラインを引いている 苦労話の前に・・・
3枚のG-Buffer • 深度値 • アウトラインの強さ • 明度 • キャラエリアウェイト •
オブジェクトID • アウトラインカラーなど
ハイブリッド式の苦労 • 太さが馴染まない • 色が馴染まない 背面法とポストエフェクトのアウトラインを馴染ませるのに苦労
太さが馴染まない ポストエフェクト式のアウトラインが内側に入ってきてしまう 背面法のみ 背面法+ポストエフェクト
太さが馴染まない ポストエフェクト式のアウトラインが内側に入ってきてしまう 背面法のみ 背面法+ポストエフェクト
太さが馴染まない 背面押し出しした絵をG-Bufferに描画することで解決 背面法のみ 背面法+ポストエフェクト
太さが馴染まない 背面押し出しした絵をG-Bufferに描画することで解決 背面法のみ 背面法+ポストエフェクト
色が馴染まない • 背面法は頂点カラーやライティングなどで細かな調整ができる • ポストエフェクト法のアウトラインが浮いてしまう 色が違う ライトの影響を受けない
色が馴染まない アウトライン用のG-Bufferに色情報を書き出すことで解決
色が馴染まない G-Bufferをそのまま使うではなく、ひと手間を加えている 1/4解像度にダウンサンプルしつつ、周囲に浸食させる
色が馴染まない 拡大して比べてみる
色が馴染まない 改良後 色が馴染んだ ライトの影響も受ける
パフォーマンス Chapter : 04
パフォーマンス 下記の動画のシーンでPixel5aで24ミリ秒ほど(約40fps)
まとめ • コアテクにて統合スタイライズドレンダリングシステムを開発中 • アウトラインは背面法とポストエフェクト法のハイブリッド手法を採用している • ハイブリッド手法は様々な問題に遭遇しました(現在進行形) • 高品質でありつつ、現在のミドルスペック端末で十分に使えるものを目指している
参考文献 • [1] CGWorld 2022 01月号 • [2] ゲームグラフィックス 2016
特別編集版 • [3] 「BLUE PROTOCOL」は“劇場アニメクオリティ”。壮大で精緻なアニメ表現はどのように制 作されているのか - GAME Watch