Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
cocone Teck Talk Vol.3 - (Unity) 3D表現を豊かに Shade...
Search
cocone
October 13, 2021
Programming
0
1.6k
cocone Teck Talk Vol.3 - (Unity) 3D表現を豊かに Shader Graphの実践事例
Unity ShaderGraphの概念、使い方を当社のサービスの使用事例を通じて説明します。
cocone
October 13, 2021
Tweet
Share
More Decks by cocone
See All by cocone
Cocone_Research_Center_2025.pdf
cocone
0
160
20240301_cocone_EMゆるミートアップvol6_LT資料
cocone
0
880
2024_cocone-avatarservice.pdf
cocone
0
2k
2024_cocone-wellbeing
cocone
0
4.8k
2023夏季合同企業説明会ココネ
cocone
0
370
cocone TECH TALK Vol.6 - リアルタイム対戦xバックエンドアーキテクチャ
cocone
0
610
cocone TECH TALK Vol.6 - ココネグループのブロックチェーン MOOI Network とのバックエンド連携
cocone
0
530
cocone TECH TALK Vol.6 - Kotlin バックエンドアーキテクチャ of アバターサービス
cocone
0
560
ココネ株式会社 会社紹介
cocone
0
130k
Other Decks in Programming
See All in Programming
Developer Joy - The New Paradigm
hollycummins
1
370
CSC305 Lecture 08
javiergs
PRO
0
280
Server Side Kotlin Meetup vol.16: 内部動作を理解して ハイパフォーマンスなサーバサイド Kotlin アプリケーションを書こう
ternbusty
3
260
釣り地図SNSにおける有料機能の実装
nokonoko1203
0
200
フロントエンド開発のためのブラウザ組み込みAI入門
masashi
7
3.6k
CSC509 Lecture 08
javiergs
PRO
0
260
他言語経験者が Golangci-lint を最初のコーディングメンターにした話 / How Golangci-lint Became My First Coding Mentor: A Story from a Polyglot Programmer
uma31
0
450
テーブル定義書の構造化抽出して、生成AIでDWH分析を試してみた / devio2025tokyo
kasacchiful
0
320
PHPに関数型の魂を宿す〜PHP 8.5 で実現する堅牢なコードとは〜 #phpcon_hiroshima / phpcon-hiroshima-2025
shogogg
1
340
オンデバイスAIとXcode
ryodeveloper
0
260
React Nativeならぬ"Vue Native"が実現するかも?_新世代マルチプラットフォーム開発フレームワークのLynxとLynxのVue.js対応を追ってみよう_Vue Lynx
yut0naga1_fa
2
1.8k
あなたとKaigi on Rails / Kaigi on Rails + You
shimoju
0
210
Featured
See All Featured
Java REST API Framework Comparison - PWX 2021
mraible
34
8.9k
GraphQLの誤解/rethinking-graphql
sonatard
73
11k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
34
2.5k
Optimizing for Happiness
mojombo
379
70k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
21
1.2k
Building Applications with DynamoDB
mza
96
6.7k
How To Stay Up To Date on Web Technology
chriscoyier
791
250k
Visualization
eitanlees
150
16k
How Fast Is Fast Enough? [PerfNow 2025]
tammyeverts
2
120
Site-Speed That Sticks
csswizardry
13
930
Large-scale JavaScript Application Architecture
addyosmani
514
110k
What's in a price? How to price your products and services
michaelherold
246
12k
Transcript
(Unity) 3D表現を豊かに Shader Graphの実践事例 ココネ クライアント開発 辛東根
自己紹介 辛 東根(シン ドングン) 韓国出身 韓国 → アメリカ → 日本(現)
ココネ歴8年 現)新規プロジェクトの開発リーダー、クライアント担当
ココネといえば
ココネといえば
3Dへの挑戦
Shader Graph
Shaderとは?
3Dの描画プロセス Screen Pixels VertexBuffer Stream World Transform Lighting Color Texture
VIew Projection Trasform Clipping Scan Conversion Light Color Matrix Object Color Texture Data Camera Matrix Ambient Color
3Dの描画プロセス Screen Pixels VertexBuffer Stream World Transform Lighting Color Texture
VIew Projection Trasform Clipping Scan Conversion Light Color Matrix Object Color Texture Data Camera Matrix Ambient Color Render Pipeline
3Dの描画プロセス Screen Pixels VertexBuffer Stream World Transform Lighting Color Texture
VIew Projection Trasform Clipping Scan Conversion Light Color Matrix Object Color Texture Data Camera Matrix Ambient Color Render Pipeline GPU Embedded Program(変更不可) 開発側で調整できる部分
雰囲気が大体似ている
Shaderの描画プロセス Screen Pixels VertexBuffer Stream Vertex Shader Rasterized PixelBuffer Fragment
Shader Vertex毎に計算を行う (位置、法線など) 画面ピクセル毎に計算を行う (色、透明度など) Material Parameters
Shaderの登場による3D表現の多様化
Shader言語 OpenGL:GLSL Microsoft Direct3D:HLSL Nvidia:CG FX Unity:Shader Lab
Shaderの問題点 Shader作成にはCodingが必要 →デザインセンスとプログラミング能力が両方必要 Designer Programmer Shader 作成
Shaderの問題点 Shader作成にはCodingが必要 →デザインセンスとプログラミング能力が両方必要 Designer Programmer Shader 作成 TA(Technical Artist)
Shader Graphの登場
ShaderGraph コードベースのShaderをノード、グラフ形で実装
Tutorial Shader Graph 使用準備
Tutorial Shader Graph 基本操作
Tutorial Shader Graph 例題 縦グラデーション
ShaderGraphの良いところ 直観的で分かりやすい コーディング無しでShader作成が可能 デバッグしやすい
実践事例
水面の動き 頂点の位置のNoiseを 少し加えて 水面の歪みを表現
透明、屈折 Custom Functionを利用 屈折の計算し、ズレた 差分をスクリンに反映
水の流れ NormalマップのUVを 動かして滝の流れを表現
まとめ • ShaderGraphの登場でShader制作のハードルが下がる • 多様な機能を活用し、豊かな表現が実装可能 ※新規3Dアプリのリリースも楽しみにして下さい
ご静聴ありがとうございました。