フロントエンドカンファレンス北海道2025 発表用スライド Satoshi Komatsu
目次 目次 はじめに 変換の流れ HLSL→SPIR-V SPIR-V→WGSL 環境構築 DirectX Shader Compiler（DXC） Tint depot-toolsのインストール Tintのビルド Tintのインストール 変換をする HLSL→SPIR-V（DXCを使用） SPIR-V→WGSL（Tintを使用） おわりに 参考にしたもの はじめに DirectX向けにHLSL言語で書かれたシェーダプログラムを、WebGPUで使えるWGSLへと変換してみる記事です。 いわゆるトランスパイルというやつです。 実験してみたものの、すぐに忘れそうなので備忘録を兼ねて記事にしておきます。 SPIR-VとTintを使います。（詳細は後述） 余談ですが、WebGPUについて、C++でブラウザ向けに使う入門記事を先日書いたので、試してみたい方はぜひご参照ください。 zenn.dev ま
欲しかったので作ってしまいました。HGSL 開発リポジトリはこちら。Haxe の環境を VSCode に導入すれば誰でも使えます。 以下開発経緯や言語の特長、技術的解説、苦労した話などが続きます。 なぜ作ろうと思ったか AltGLSL が欲しかったからです。Works にあるように以前から WebGL を用いた作品で GLSL を書いてきましたが、 GPGPU のような複雑なロジックを書こうとするとなかなかしんどい 実行したときにブラウザ上でエラーが判明するのがしんどい int から float への暗黙の型変換すら存在しないのがしんどい [1] typo がその場で判明しないのがしんどい など様々な不満が毎日少しずつ蓄積していきました。文字列としてプログラムに埋め込んでいるのが悪いと言えば悪いのですが、メインのプログラムと uniform 変数の名前を揃える必要性もあり、String を
ゲームプログラマ、時々VRでエンジニアな「IZUN∀」の技術系？ブログ メモや仕事で困ったことがあったりなときに書いていきます。 IZUN∀のソロでやるごった煮 Advent Calendar 2020 10日目！（ΦωΦ） このアドカレの記事はIZUN∀個人の経験や考えがベースになっているので 今の開発環境や、人によっては合わないこともあります。 中にはバッドノウハウになってるものもありますのでご了承ください。 今回もWebGPUのお話になりますー。 今回は「wgpu-rs」というWebGPUのrust向けwrapperです。 wgpu-coreというものをrust向けに使いやすくしてくれてるものです。 最近Rustで色々遊んでるのでどっちも触れる面白そう！でちょっと弄ってみますー。 DX12やVulkanみたいなインターフェース持ってるみたいですなぁ（ΦωΦ） wgpu-rsのリポジト
この記事はWeb グラフィックス Advent Calendar 2020の13日目の記事です。 ※ 2023年1月7日、内容が古くなっていた為、記事の内容を最新化しました。 変更箇所は「主な変更内容（2020年12月～2022年12月）」を参照ください。 はじめに WebGPU は WebGL や WebGL2 の後継とされているグラフィックス API です。 今のところリリース時期としては 2023年5月 Chrome 113 を目標 としているようです。 API の仕様は固まりつつありますが、まだ仕様変更等が入る可能性があることにご注意ください。 ここでは、主に、シェーダ機能「WGSL」（WebGPU Shading Language）について試してみようと思います。 2019年時点は WebGPU 用のシェーダの方針が決まっていなかった為、glslang と呼ばれるライブラリを用い
![[忙しい人向け] 100行から始めるWebGPU（WGSL対応版） - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/5d9092a38c81d5cca6f0e61186f0b02750bee594/backend=imagemagick;height=288;version=1;width=512/https%3A%2F%2Fproxy.goincop1.workers.dev%3A443%2Fhttps%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fqiita-user-contents.imgix.net%252Fhttps%25253A%25252F%25252Fcdn.qiita.com%25252Fassets%25252Fpublic%25252Fadvent-calendar-ogp-background-7940cd1c8db80a7ec40711d90f43539e.jpg%253Fixlib%253Drb-4.0.0%2526w%253D1200%2526blend64%253DaHR0cHM6Ly9xaWl0YS11c2VyLXByb2ZpbGUtaW1hZ2VzLmltZ2l4Lm5ldC9odHRwcyUzQSUyRiUyRnFpaXRhLWltYWdlLXN0b3JlLnMzLmFtYXpvbmF3cy5jb20lMkYwJTJGMjYwOTQlMkZwcm9maWxlLWltYWdlcyUyRjE0NzM2ODQ0OTM_aXhsaWI9cmItNC4wLjAmYXI9MSUzQTEmZml0PWNyb3AmbWFzaz1lbGxpcHNlJmJnPUZGRkZGRiZmbT1wbmczMiZzPWJhMmUzOGFiODMzYWU0Y2M4ZTExZDM3ZTkyNTFmMWFj%2526blend-x%253D120%2526blend-y%253D467%2526blend-w%253D82%2526blend-h%253D82%2526blend-mode%253Dnormal%2526s%253D44d04ec6a179566f20e6af5f47b3a5bd%3Fixlib%3Drb-4.0.0%26w%3D1200%26fm%3Djpg%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk2MCZoPTMyNCZ0eHQ9JTVCJUU1JUJGJTk5JUUzJTgxJTk3JUUzJTgxJTg0JUU0JUJBJUJBJUU1JTkwJTkxJUUzJTgxJTkxJTVEJTIwMTAwJUU4JUExJThDJUUzJTgxJThCJUUzJTgyJTg5JUU1JUE3JThCJUUzJTgyJTgxJUUzJTgyJThCV2ViR1BVJUVGJUJDJTg4V0dTTCVFNSVBRiVCRSVFNSVCRiU5QyVFNyU4OSU4OCVFRiVCQyU4OSZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZ0eHQtY29sb3I9JTIzM0EzQzNDJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTU2JnR4dC1wYWQ9MCZzPThmZWI1OGY0NjI2NGUwMGMyNjcwZGM2ZmJlZjMwYjMz%26mark-x%3D120%26mark-y%3D112%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTgzOCZoPTU4JnR4dD0lNDBjeDIwJnR4dC1jb2xvcj0lMjMzQTNDM0MmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9MzYmdHh0LXBhZD0wJnM9NDM0NTkyZmFkM2Q2NWIzNWZiNDI2YjBkZmMzZDg4ZGY%26blend-x%3D242%26blend-y%3D480%26blend-w%3D838%26blend-h%3D46%26blend-fit%3Dcrop%26blend-crop%3Dleft%252Cbottom%26blend-mode%3Dnormal%26s%3D1e1708f27dde7b72cad36f15073e777f)
たいそうなタイトルから始まりましたが。。 自分のGLSL力を向上させるために本企画始動しました。 （一回で終わらないようにしないとな） 「これいいな〜」と思った表現を、 コピペではなくソースコードを見ながら理解していきたい！という趣旨の、 超個人的学習記録です。 みなさま、お手柔らかにお願いします。。 ちなみに5月くらいからシェーダーを少しずつ勉強してまして、 下記が学習の記録です。 合わせてご覧いただけると嬉しいです。 【WebGL / GLSL】デザイナーにモテるためのWebGL入門（概念編） 【WebGL / GLSL】ド文系だけど、行列とかラスタライズとか頑張って理解する 【WebGL / GLSL】「The Book of Shaders」のサンプルを、WebGL APIいじるところから頑張って再現する 【WebGL / GLSL】GLSLはconsole.log()なんてできな
概要 WebGLでは固定機能パイプライン (Fixed-function pipeline) が使えないので、すべてシェーダ (Shader) を自作する必要がある。 Shader記述言語であるGLSL (OpenGL Shading Language)を使ってシェーダを書くというのはどういうことか理解する。 動機 個人的にHTMLとJavaScriptを行ったり来たりするので、どこがどうなってるのか分からなかった（いまだにわかってない部分も多いが）、のでメモがてら書く。 シェーダの種類 シェーダには2つの種類がある。頂点シェーダ (Vertex shader)とフラグメントシェーダ (Fragment shader)。 基本的には頂点シェーダを使って座標系を操作し、フラグメントシェーダを使って色や光などをつけるイメージ。 各シェーダの役割 頂点シェーダ 最初に呼ばれるシェーダ。頂点情報を
Build and Share your best shaders with the world and get Inspired Latest contributions: "fractal glow 2" by nayk 10 minutes ago, "glow fractal " by nayk 13 minutes ago, "Jitter blend" by fakeljl 55 minutes ago, "Smokey Trail [287 Chars]" by SnoopethDuckDuck 1 hour ago, "infinite nested frame" by yufengjie 2 hours ago
※この記事は 情報系を勉強する女子大生 Advent Calendar 2017 21日目投稿記事です。 はじめに こんにちはー。 周囲にCGやってるおじさんはいてもJDはいないので、CG布教のために書きました。対象読者層には、プログラミングをやったことがあり、かつ3DCGをあまり触ったことがない人を想定しています。 個人的に、CGの楽しさは紙の上で式を立てて考えながら実装したものがすぐに画面に反映されるところだと思っているので、特に変化がわかりやすいシェーダプログラミングをテーマに記事を書くことにしました。 ただ、ちゃんと理解してシェーダを書くにはまず座標系やアフィン変換などのちょっとめんどくさいお話をしないといけません。今回はその辺の話を一旦カッ飛ばすため、あまり面倒なことを考えなくても書けるシェーダを実装することにします。あんまり高度なことはしていないので、「え、物理ベースレンダリン
Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter. Visual Studio Code - Shader Toy With this extension, view a live WebGL preview of GLSL shaders within VSCode, similar to shadertoy.com by providing a "Show GLSL Preview" command. To run the command, either open the "Command Palette" and type "Shader Toy: Show GLSL Preview" or right-click inside a text editor and sele
Metalでグラフィック処理を行うにしろ並列演算を行うにしろ、GPUに処理をさせるためのシェーダを書かないといけないわけですが、これがまだ情報が少なくて、「こういうシェーダを書きたいんだけど、誰かもう書いてないかな・・・」というときに参考になる近いものとかはそうそう都合よく出てこないわけです。 ただ、WebGL/GLSLの情報はググると山ほどあって、GLSL Sandbox という、Web上で編集できてプレビューできてシェアできるサイトもあり、何がどうなってそうなるのか理解できない難しそうなものから、ただの円といったシンプルなものまで、既に偉大な先人たちのサンプルがたくさんアップされています Metalのシェーダというのは正しくは Metal Shading Language といいまして、C++をベースとする独自言語なのですが、まー概ねGLSLと一緒です。 実際にやってみたところ、GLS
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
