2024年5月25日(土)に、ゲームメーカーズは、ゲームづくりに関わる方同士で盛り上がるためのリアルイベント「ゲームメーカーズ スクランブル2024」を開催しました。 本イベントでは、ゲームづくりに関する10本の講演が行われました。その中から、グラフィクスエンジニア もんしょ氏による「シェーダコードも怖くない? UEのCustomノードで学ぶHLSL入門」の講演動画およびスライドを公開します。
![グラフィクスエンジニア もんしょ氏による「シェーダコードも怖くない? UEのCustomノードで学ぶHLSL入門」講演動画・スライドを公開!|ゲームメーカーズ](https://cdn-ak-scissors.b.st-hatena.com/image/square/c374b1f2fde26454d338a7794095e784045d712c/height=288;version=1;width=512/https%3A%2F%2Fgamemakers.jp%2Fcms%2Fwp-content%2Fuploads%2F2024%2F05%2Fb38569c594cbbd612dc9dc9a829951de.jpg)
先月、聖剣伝説3 TRIALS of MANA のスマホ版がリリースされました。 スーファミ版リアルタイム世代なのもあって楽しく遊んでます! フレームレートの安定ためにコンシューマ版に比べて一部ポストエフェクトを切っていたり色域が違うように見えたりと、細かに調整されていて、スマホでもスムーズに遊べていて感動です・・・。(コンシューマ版開発時点でスマホ対応も構想に入っていたらしい) 聖剣3TOMを遊んでいて印象的だったのが、光沢を感じるような独特の陰影の付け方でした。 「何かグラフィックに関するインタビューとかないかなぁ」と探したところ、 UNREAL FEST EXTREME 2020 WINTER でドンピシャな講演をされていたようで、そのアーカイブが見つかりました!(36:07〜) ありがたや…。 講演の中でシェーダーに関する細かいお話があって良い足がかりになったので、聖剣3TOMのキ
トゥーンシェーダなどを使ってアニメ調の塗りをする場合、モデルにアウトラインを付けたいことがあります。ここでは、モデルと背景の境界線上にアウトラインを表示するシェーダを作る方法を紹介します。 今回の記事の内容は次のとおりです。 アウトラインの概要 シェーダファイルの準備 モデルにマテリアルをアタッチする まとめ アウトラインの概要 モデルにアウトラインをつけるには次のように幾つかの方法があります。 ステンシルバッファを使う 法線情報から境界を計算する 少し膨らませたモデルを使う ポストエフェクトで輪郭抽出する ここでは直感的に分かりやすい3つめの「少し膨らませたモデルを使う」方法を紹介したいと思います。この方法は2パス(モデルを2回描画する)でアウトラインを描画します。 まず1パス目では、法線方向にモデルを少し膨らませてから、モデルの裏面を塗りつぶしで描画します。これが輪郭線になります。 続
参考リンク: Microsoft DirectX - Wikipedia OpenGL - Wikipedia OpenGL ES - Wikipedia Metal (API) - Wikipedia Vulkan (API) - Wikipedia Unity (ゲームエンジン) - Wikipedia Unreal Engine - Wikipedia 基礎知識 よく使うのは頂点シェーダとフラグメントシェーダ (OpenGL ではフラグメントシェーダ、DirectX ではピクセルシェーダと呼ぶ) Unity では ShaderLab という枠組みの中で、専ら HLSL でシェーダを実装する Unity が各プラットフォーム向けに最適化したものに変換してくれる 時々 Cg/HLSL のように表現されることがあるが、Cg は NVIDIA とマイクロソフトが共同開発したシェーダ言語で、H
この記事はTech KAYAC Advent Calendar 2019の10日目の記事です。 こんにちは! jsdo.itでCreativeCodingの世界を知り、jsdo.itに惚れて入社を決め、jsdo.itの譲渡とともに入社し、jsdo.itの終了とともに退職した有給消化期間中の浅利(@kasari39)です! 今回はシェーダーの世界へ一歩踏み出してみませんか?という内容です。 *1 シェーダーコーディングの世界 作品例として手前味噌ですが、このような映像をシェーダーのみで生成できます。 http://glslsandbox.com/e#59292.1 http://glslsandbox.com/e#59293.0 これらは100行にも満たないシェーダーから生成されています。 こんな短いのにこんな豪華な見た目が出るなんて面白いですよね。 それでは一歩踏み出してみましょう! 開発
この記事ではUnityにおけるシェーダプログラムの読み方・書き方を解説します! その中でもUnity特有の機能であるShaderLabと、頂点シェーダ・フラグメントシェーダというものを中心に扱っていきます。 なお現在はShaderGraphなどのビジュアルエディタを利用することでシェーダプログラムを書かなくてもシェーダを作ることが可能です。 そんな時代ですがシェーダプログラムを読み書きできるようになっておくメリットも大きいので、今回はあえてビジュアルエディタについては一切取り扱いません。 Unityでシェーダの使い方は分かるけど、書いたことはないシェーダを編集しようと思ってファイルを開いたものの、ナンモワカランC#など、他のプログラムはある程度分かる(C言語が分かるとGood)ShaderGraphに対応していない環境(VRChat等)のシェーダを書きたい
とりあえずこの映像を見てください。 昨日の勉強会の懇親会中に20分間のライブコーディングでシェーダーを作りました! 初めて人前でコーディングをしたんですが、めちゃくちゃ楽しかったです!! (当日動かなかったpmod修正済です...) 差分 - q.x = abs(p.x ) - 10.; + q.x = abs(q.x ) - 10.;https://t.co/LH3TT4YzSU#klab_meetup pic.twitter.com/k61c3O2ZA1 — かねた (@kanetaaaaa) 2019年6月19日 20分間のライブコーディング映像フル 先日の #klab_meetup の懇親会で行った20分のライブコーディング映像を公開しました! 実況解説は@gam0022 さんと@songofsaya_さんです 突発ながら面白い実況で場を盛り上げてくださって非常に楽しかったです!
「Shaderって何それ?」ってレベルから、Shaderを雰囲気で理解できるレベルになりました(多分) ここまで到達できたのは、”間違いなく”先人たちの最強すぎる情報のお陰様です。 そんな役立った有用すぎるShader学習リンクを紹介していきます! 2019/3/19 追記 まんてらさんによるシェーダーの解説スライドを追加しました! シェーダーについて無知であっても、噛み砕いて解説してくださっております。シェーダー学びたい初心者は必見です! 対象レベル Vertex/Fragment Shader(頂点/フラグメントシェーダー)を一から学ぶ予定の方 Shaderやろうとして、何度も挫折した方 Shaderを雰囲気で理解してみたい方 ※注意 Geometry ShaderやCompute Shaderは含まれていません。理由は私がまだ使えないからです(^p^) こちら扱えるようになったら、ま
この記事は、KLab Engineer Advent Calendar 2018 10日目の記事です。 はじめに 今月頭の12/1から12/2にかけて、日本で唯一のデモパーティであるTokyo Demo Fest 2018が開催されました。 デモパーティをご存じではない方のために、公式サイトから引用します。 デモパーティは、コンピュータを用いたプログラミングとアートに 興味のある人々が日本中、世界中から一堂に会し、 デモ作品のコンペティション(コンポ)やセミナーなどを行います。 また、イベント開催中は集まった様々な人たちとの交流が深められます。 またデモについて詳しく知りたい方はこちらをご覧ください。 今回私は、このパーティのGLSL Graphics CompoというGLSLコードのみで映像を作って競うコンポにTraveler 2という作品を応募して1位に選んで頂きました! #Tokyo
Patricio Gonzalez Vivo、Jen Lowe著 この本はフラグメントシェーダーについてのガイドブックです。難解で複雑なフラグメントシェーダーの世界を、一歩一歩わかりやすくご案内します。 翻訳について この文書はPatricio Gonzalez VivoのThe Book of Shaderの日本語訳です。 技術的な内容はできる限り正確に伝えるように心がけていますが、その他の部分では言葉を補ったり簡略化したり、表現を変えている部分もあります。英語が得意な方はぜひ原文もお読みください。 フィードバックにはgithubのレポジトリをご利用ください。 目次 イントロダクション 初めの一歩 シェーダーとは? ハロー・ワールド! ユニフォーム変数 シェーダーを使う アルゴリズムで絵を描く シェイピング関数 色について 形について 二次元行列 パターン Generative desi
概要 ジオメトリシェーダとは コードを見てみる ドキュメント Syntax パラメーター ストリーム出力オブジェクト Syntax パラメーター 違ったコードを見てみる 実例を見てみる 実際に動いている動画 概要 今回はジオメトリシェーダ入門という形で記事を書いていきます。 頂点シェーダ、フラグメントシェーダに比べるとあまり書く機会の少ないシェーダ。 その2シェーダに比べて違いが結構あるのでそのあたりについてのメモを書いていこうと思います。 実際に使った例はこんな感じ↓ ジオメトリシェーダとは Wikipediaによると以下のように説明されています。 ジオメトリシェーダー ジオメトリシェーダー(英: Geometry Shader, GS)はピクセルシェーダーに渡されるオブジェクト内の頂点の集合を加工するために使用される。ジオメトリシェーダーにより、実行時に頂点数を増減させたり、プリミティ
はじめに 先行事例と課題 陰影と色彩 シェーディングマップによる嘘陰影 頂点シェーダアニメーション ドット絵的なモデルとアニメーション 結果 問題点とか その他テクニックとか 今後 (追記:続いた) 実践ドット絵シェーダー その2 - チラつき抑制編 - 水鳥コンビナート はじめに 自分はドット絵が好きだが、描くのはあまり好きではない。 正確に言うと、1,2 枚を描くのはよいがひとつのゲームに使用する大量のドット絵を全部自力で描くのは大変つらい。 例えばアクションゲームかなにかを作る場合を考えてみると、 キャラクターについてだけでも、必要なドット絵枚数は (登場キャラクター数) × (各キャラができるアクションの数) × (各アクションに必要な枚数) × (リテイクのコスト) で相当なものになるのがわかる。 そこでドット絵っぽいものをレンダリングできるシェーダを用いることで横着をしようとい
この記事は、これまでにおもちゃラボで紹介してきたUnityのシェーダ入門記事40本のまとめです。 1日に5記事読めば7日間で読み切れるはず...今のところ(笑) シェーダって時々聞くけど難しそう・・・というイメージをお持ちの方も多いと思います。でも、Unityを使えばかなりのメンドウな部分はUnityにおまかせできちゃうので、本当に必要な部分のシェーダを書くだけでイメージ通りの絵作りができるようになります。 使用するシェーダ Unityで使えるシェーダにはsurfaceシェーダと頂点/フラグメントシェーダの2種類があります。ここではこの2つのシェーダの他、ライティング・ポストエフェクトの内容も解説しています。それぞれの各記事へのリンクを下にまとめておきます。また、Unity2018からはノードベースでシェーダを作成できるShader Graphという機能も提供されるようになりました。これか
去る1993年、『 DOOM 』がゲームデザインやゲームメカニクスに根本的な変化をもたらしました。これは世界的な現象となり、 John Carmack や John Romero など、開発に関わった象徴的な存在の名声を広げました。 それから23年が経った現在、 id Software は Zenimax の傘下に入り、当初の創設者は会社から全員去りました。しかし、かつてid Softwareに属していたチームは最高のゲームを作り、変わらずに優秀であることを示しました。 この『 DOOM 』は非の打ちどころのないシリーズ最新作となりました。使用されている id Tech 6 engine については、元Crytekの社員だった Tiago Sousa がJohn Carmackから引き継いだ部署のレンダラプログラマを率いて取り組んでいます。 歴史的には、id Softwareはエンジンをオ
2017年末の現状 Unity の3Dを触り始めて約1年。そこそこちゃんとした Shader が書けるようになってきました。 レンダリングサンプルはこんな感じ。 ケータイゲームに使うすごく軽いシェーダー完成しました!、最新ゲームとくらべ悪くならないよう無茶したんですけど、くまき(@kumak1)さんのほうでPBSの機能は持つくらい持って最大軽く出来るように無茶してもらったのが現実です、私は二つのアルゴリズム作っただけですぅ(キャラ△8000) pic.twitter.com/3L0gUo7yXJ— D.K (@dkground) 2017年11月11日 全編スクラッチしており、Normal Map や Matcap の設定はもちろん、アーティスティックな光や影の色を設定で作れるようになっています。 なんでまとめ記事書くの? 年末なので振り返り。 あと、よくゲーム開発系の話をする、同僚の い
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く