【Frontend Up!】WebフロントでもShaderが書きたい！

Webフロントでも Shaderが書きたい！ Frontend Up! 〜放課後LT大会！（クイズもあるよ！）〜 2025-02-21 ゲームサービス事業本部開発運営統括部第一技術部 テクノロジー推進第一グループ yuma.kasahara

自己紹介 笠原 有真 ゲームサービス事業本部開発運営統括部第一技術部 テクノロジー推進第一グループ 24卒 グラフィックスエンジニア メディカル事業部でWebアプリ開発（インターン） GTTA（Graphics Technology and Technical Artist）所属 業務でFEのコード書いてないです 🥺（今は）

みなさん、Webサイト作ってますか？

オシャレにしてますか？

もっとオシャレにしたくないですか？

CSSならたくさん書いた

新しい世界へ

Shader’s got me looking so crazy…

WebページをShaderで装飾する方法 ● WebGL(WebGPU) 難しそう…🤔 🤔

もっと簡単に ● ● ● ● ● Three.js Babylon.js PixiJS pixi-react react-vfx いけそう！😁 😁

もっと簡単に ● ● ● ● ● Three.js Babylon.js PixiJS pixi-react react-vfx 今回やるやつ

実践！ リポジトリ：https://github.com/himantyu-yuma/frontendup-lt

• https://github.com/himantyu-yuma/frontendup-lt

以上！

良いFEライフを！

参考 https://developer.mozilla.org/ja/docs/Web/API/WebGL_API https://codesandbox.io/examples/package/react-vfx https://amagi.dev/react-vfx/

• https://developer.mozilla.org/ja/docs/Web/API/WebGL_API
• https://codesandbox.io/examples/package/react-vfx
• https://amagi.dev/react-vfx/

質問と回答 Q. 良いシェーダーとか参考になるシェーダーってありますか？ A. react-vfxの作者の方がプリセットのコードやLPのコードを公開しているので そちらを参考にすると良いかもしれません！ Q. シンタックスハイライトとか効かないの辛いですね A. 辛いです…。GLSLを別ファイルで書いてコピペとか、textとしてimportとか で回避はできるかも🤔

• https://github.com/fand/vfx-js/blob/96b1affcd21f99bf6ea6e8f47e0baac8541d6c23/packages/vfx-js/src/constants.ts
• https://github.com/fand/vfx-js/tree/main/packages/docs-react-vfx