まずは挑戦してみよう シェーダを自分でコーディングするなんて…… きっとお難しいんでしょ…… と、お思いの奥様方。そんなことはないんです。コツをつかめば意外と楽しめます。当連載では、シェーダというものに対して抱かれてしまいがちな、漠然とした 難しそう感 を払拭すべく、簡単なシェーダの記述とその基本について解説したいと思います。 想定する読者 当連載では、シェーダってなんか難しそう……とか、シェーダプログラミング始めてみたいけど……とか、なんとなく興味を持ってるけどシェーダを記述したことがない方を読者に想定しています。 たとえば Unity などのツール、あるいはマインクラフトのようなゲーム、またはモデリングソフトなどでもシェーダを自分で記述することができるような世の中です。きっとシェーダに触れた経験は無駄にはならないでしょう。 すぐに業務で活かすとか、そういう壮大な話はさておいてまずは気軽
![[連載]やってみれば超簡単！ WebGL と GLSL で始める、はじめてのシェーダコーディング（１） - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/f69d8dfbe06235fa817e41f5ef485c6f842cfdf6/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%25252Farticle-ogp-background-afbab5eb44e0b055cce1258705637a91.png%253Fixlib%253Drb-4.1.1%2526w%253D1200%2526blend64%253DaHR0cHM6Ly9xaWl0YS11c2VyLXByb2ZpbGUtaW1hZ2VzLmltZ2l4Lm5ldC9odHRwcyUzQSUyRiUyRnFpaXRhLWltYWdlLXN0b3JlLnMzLmFtYXpvbmF3cy5jb20lMkYwJTJGMzk2MzglMkZwcm9maWxlLWltYWdlcyUyRjE0NzM2ODgxNzY_aXhsaWI9cmItNC4xLjEmYXI9MSUzQTEmZml0PWNyb3AmbWFzaz1lbGxpcHNlJmJnPUZGRkZGRiZmbT1wbmczMiZzPWMxMTdiZGMzODg0M2RjOTljNTkyNTZmYjVlNGQ5YjJm%2526blend-x%253D120%2526blend-y%253D467%2526blend-w%253D82%2526blend-h%253D82%2526blend-mode%253Dnormal%2526s%253Daf4aaea39cbb3c2581ee61b8d2a035a6%3Fixlib%3Drb-4.1.1%26w%3D1200%26fm%3Djpg%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjEuMSZ3PTk2MCZoPTMyNCZ0eHQ9JTVCJUU5JTgwJUEzJUU4JUJDJTg5JTVEJUUzJTgyJTg0JUUzJTgxJUEzJUUzJTgxJUE2JUUzJTgxJUJGJUUzJTgyJThDJUUzJTgxJUIwJUU4JUI2JTg1JUU3JUIwJUExJUU1JThEJTk4JUVGJUJDJTgxJTIwV2ViR0wlMjAlRTMlODElQTglMjBHTFNMJTIwJUUzJTgxJUE3JUU1JUE3JThCJUUzJTgyJTgxJUUzJTgyJThCJUUzJTgwJTgxJUUzJTgxJUFGJUUzJTgxJTk4JUUzJTgyJTgxJUUzJTgxJUE2JUUzJTgxJUFFJUUzJTgyJUI3JUUzJTgyJUE3JUUzJTgzJUJDJUUzJTgzJTgwJUUzJTgyJUIzJUUzJTgzJUJDJUUzJTgzJTg3JUUzJTgyJUEzJUUzJTgzJUIzJUUzJTgyJUIwJUVGJUJDJTg4JUVGJUJDJTkxJUVGJUJDJTg5JnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnR4dC1jb2xvcj0lMjMxRTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9NTYmdHh0LXBhZD0wJnM9ZTVmNjU2ZDdmNmQ1MTBkODM1YWQ4YzM1ZTZlNzRlNmM%26mark-x%3D120%26mark-y%3D112%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjEuMSZ3PTgzOCZoPTU4JnR4dD0lNDBkb3hhcyZ0eHQtY29sb3I9JTIzMUUyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTM2JnR4dC1wYWQ9MCZzPWIzMzY1OTJkOTZhNjNiODI3YTEyZWRjYjhjNjlkOTlm%26blend-x%3D242%26blend-y%3D480%26blend-w%3D838%26blend-h%3D46%26blend-fit%3Dcrop%26blend-crop%3Dleft%252Cbottom%26blend-mode%3Dnormal%26s%3D6a8775e4ec7deafacd232d9353715d6e)
こんにちは。Eukaryaの佐々木です。 弊社では、新しい3D地図エンジンの開発を進めています。地図エンジンとは、Google Earthのように3次元空間上で地球儀を表示し、ズームするとより詳細な画像を表示する仕組みで、Google Earthのような地図としての用途だけでなく、位置情報データのビジュアライゼーションにも活用できます。既存の地図エンジンの例としては、CesiumJSやMaplibre GL JSなどがあります。 地図エンジンでは、約 6000 km という非常に大きなシーンを扱います。GPUでこのような大きな値を扱うと精度が足りずにレンダリングが安定しないことがあります。 GPUにおける精度の問題 地球規模で 3D を描くと、カメラを動かすたびに、「頂点がガタガタ震える」、「ポリゴンがチラつく（Z-fighting）」、「位置が微妙にズレる」といった現象に直面します。これ
WebGLメモリ対策概要 メモリが不足すると起動しない 利用できるメモリは300MB程度が現実的な限度 メモリが不足した場合画像が乱れたり、動作が重くなる、止まるといった現象が起こる 画像、音声等のリソースはアプリと違い全てオンメモリで展開されるため、リソースを減らす・減色・圧縮しても大きく劣化しないデザインとする WebGL.data：こちらに全てのリソースが含まれているので、まずはdataの容量を削減すること WebGL.wasm：ソースコードやライブラリ 参考リンク: https://blog.unity.com/technology/understanding-memory-in-unity-webgl https://docs.unity3d.com/ja/2021.2/Manual/class-TextureImporterOverride.html その他: Unity 20
問題点 Unity で InputSystem を使ってコントローラー操作を実装していた時に、エディタ上では正しく動作するのに、WebGL ビルドをした際にスティックの上下操作が効かなくなってしまいました。 ただ上下操作が効かないだけではなく、スティックの左右操作やコントローラー十字ボタンでの操作は正常に動作していました。 対処法 この現象の原因は、以下のようにVector2のInputActionにおいて、コントローラーのスティックをバインディングする際にCompositeを使っていることにありました。 以下の画像のように、本来、Left Stick[Gamepad]をバインディングするだけでいいのに、Compositeを使用したバインディングをしてしまっていました。 間違ったバインディング 以下の画像のように、Compositeを使用せずに、Left Stick[Gamepad]をバイ
![[Unity, InputSystem] WebGLでスティックの上下操作が効かなくなった時の対処法](https://cdn-ak-scissors.b.st-hatena.com/image/square/3451b7484832d9a22d8b83cee374a55982315ffa/backend=imagemagick;height=288;version=1;width=512/https%3A%2F%2Fproxy.goincop1.workers.dev%3A443%2Fhttps%2Fres.cloudinary.com%2Fzenn%2Fimage%2Fupload%2Fs--gSNVfeHA--%2Fc_fit%252Cg_north_west%252Cl_text%3Anotosansjp-medium.otf_55%3A%25255BUnity%25252C%252520InputSystem%25255D%252520WebGL%2525E3%252581%2525A7%2525E3%252582%2525B9%2525E3%252583%252586%2525E3%252582%2525A3%2525E3%252583%252583%2525E3%252582%2525AF%2525E3%252581%2525AE%2525E4%2525B8%25258A%2525E4%2525B8%25258B%2525E6%252593%25258D%2525E4%2525BD%25259C%2525E3%252581%25258C%2525E5%25258A%2525B9%2525E3%252581%25258B%2525E3%252581%2525AA%2525E3%252581%25258F%2525E3%252581%2525AA%2525E3%252581%2525A3%2525E3%252581%25259F%2525E6%252599%252582%2525E3%252581%2525AE%2525E5%2525AF%2525BE%2525E5%252587%2525A6%2525E6%2525B3%252595%252Cw_1010%252Cx_90%252Cy_100%2Fg_south_west%252Cl_text%3Anotosansjp-medium.otf_37%3Avoid2610%252Cx_203%252Cy_121%2Fg_south_west%252Ch_90%252Cl_fetch%3AaHR0cHM6Ly9zdGF0aWMuemVubi5zdHVkaW8vdXNlci11cGxvYWQvYXZhdGFyLzU1ZmQ2NDg5NWMuanBlZw%3D%3D%252Cr_max%252Cw_90%252Cx_87%252Cy_95%2Fv1627283836%2Fdefault%2Fog-base-w1200-v2.png%3F_a%3DBACMTiAE)
この記事はUnity Advent Calendar 2024 12/3の記事です この記事について この記事では最近公開されたUnity6のVFXGraphがWebビルド対応をしたとのことで、VFXGraphのサンプルエフェクトをWebビルドすることを目的としています 先に伝えると、ProjectSettingの「webGLEnableWebGPU」の設定でほとんどの方が躓くと思うので、もしVFXGraphsをWebビルドで出力する予定がある方は確認をおすすめします VFXGraphとは Visual Effect Graph（VFX Graph）はノードベースのビジュアルエフェクトエディターです。 旧来のパーティクルエディタである Particle System と使用すべき用途は似ていますが、大きな違いはシミュレーションにGPUを使っており、大量のパーティクルの複雑な処理を高速で行う
WebGL環境でHLS形式の動画を再生する方法を探しているの。 HLS対応ブラウザならVideoPlayerでそのまま再生できるわ。それ以外ではhls.jsなどのライブラリが必要になるわ。 WebGLのビルド環境でHLS（HTTP Live Streaming）形式の動画を再生する方法の解説記事です。 Safariなどの一部のブラウザではHLS形式が標準でサポートされており、Unity標準のVideoPlayerコンポーネントでそのまま再生可能です。 しかし、執筆時点では非対応ブラウザが多数存在し、再生には別途対策が必要です。 参考：“hls” | Can I use… Support tables for HTML5, CSS3, etc WebGL環境限定となりますが、hls.jsというライブラリを使用することでHLS非対応ブラウザでのHLS動画の再生に対応できます。 GitHub –
Unity 6 では Web プラットフォーム（Web ブラウザ）のサポートが強化されています。この動画では、注目のポイントや、オススメの設定方法などについて解説します。 リファレンスマニュアル：Web プラットフォーム https://docs.unity3d.com/Manual/webgl.html WebGPU についての公式スレッド https://discussions.unity.com/t/early-access-to-the-new-webgpu-backend-in-unity-2023-3/933493 WebGPU サンプルビルド集 https://www.keijiro.tokyo/WebGPU-Test/ 0:00 イントロ 0:14 名前の変更について 0:56 モバイル対応 1:51 WebGPU 対応 5:05 非対応機能について 6:26 最適
var WebNativeDialog = { NativeDialogPrompt: function (title, defaultValue) { defaultValue = UTF8ToString(defaultValue); title = UTF8ToString(title); var result = window.prompt(title, defaultValue); if (!result) { result = defaultValue; } var buffer = _malloc(lengthBytesUTF8(result) + 1); stringToUTF8(result, buffer, lengthBytesUTF8(result) + 1); return buffer; }, SetupOverlayDialogHtml: function (
Unity標準のVideoPlayerを使わずにWebGLで動画再生する処理を自作したいの。 標準のVideoPlayerの内部実装を参考に自作する方法を見ていくね。 WebGL環境において、Unity標準のVideoPlayerのような動画再生機能を自作する方法の解説記事です。 次のような動画再生をjslibプラグインでネイティブ実装して実現するところを目指します。 Unityでは、動画再生機能はVideoPlayerコンポーネントとして提供されており、WebGL含めたあらゆるプラットフォームでの再生が可能です。 参考：Unity – Scripting API: VideoPlayer 通常の動画再生であれば、Unity標準のVideoPlayerコンポーネントで事足りる場面も多いと考えられますが、動画再生をネイティブ実装することで次のようなことが期待できるかもしれません。 ネイティブ
visionOS 1 系だった人は visionOS 2.0 にアップデートが完了したタイミングから自動的に WebXR Device API が有効化されているので、アップデート直後に WebXR Device API が有効化されていなければ動作しない WebXR Samples の Immersive VR Session にアクセスしたとしても、正常に動作します。 visionOS 1 系の Safari on Vision Pro で WebXR Device API が動作するだけでも “待ちに待った” 状況でしたが、ユーザー自身による変更が必要である以上はまだ “当たり前” とは言い切れませんでした。しかし visionOS 2.0 で有効化されていることが標準的な状態となったため、Safari on Vision Pro にとっての WebXR は “当たり前” と言っても
Introducing Niantic Studio: The Future of Web-Based XR and 3D Content CreationBuild immersive XR, 3D experiences, and casual web games with the public beta of our new visual editor and powerful web gaming engine—now available for free. Today, we’re excited to announce Niantic Studio, a new visual editor and web gaming engine for Niantic 8th Wall developers that offers an entirely new way to build
こんにちは、ミラティブ菅谷です。MirrativのWebGL製ライブゲームにて、アセットのロード方法をインスペクタでの直接参照からAddressable Asset System（以下Addressable）に変更したことで、クラッシュ率が大幅に改善し、クラッシュせずにプレイが終了した「正常プレイ率」は98%まで改善しました。本記事では、その具体的な手順と効果について紹介します。 課題背景 MirrativのライブゲームはWebGLで動いていますが、特にモバイルのWebGLではパフォーマンスに気をつける必要があります。今回改善を行ったプロジェクトではもともとAddressableを使用していませんでした。プロジェクトの初期リリース時点では大きな問題もなく運用できていましたが、アセットやリソースを追加していくにつれてクラッシュが多く見られるようになりました。ただし、WebGLではクラッシュし
はじめに モバイルは正式対応してないWebGLですが、やらなきゃならないときが来たので、無理やり対応する所存です ちなみに、正式対応は次のUnity6バージョンからだそうです WebGLでの日本語入力 日本語が表示されない問題 Unityのデフォルトのフォントだと表示されないので、商用利用可能な日本語対応フォントを適用する必要があります WebGLInputというプラグインを導入する モバイル端末であれば、デフォルトの状態でも日本語入力できますが、PC端末だと日本語入力ができません そこで、以下のプラグインを利用して対応します ですが、こちらのプラグインを利用してモバイル端末で日本語入力を行うと、挙動が怪しくなります InputFieldタッチしても表示されない、など なので、「PCではWebGLInputを利用して、モバイル端末では導入せずデフォルトのまま」というように区別をさせます P
Webブラウザで3Dモデルを高速に描画する「Babylon.js 7.0」正式リリース。MMD（MikuMikuDance）やApple Vision Proサポート Webブラウザで3Dモデルを高速に描画する「Babylon.js 7.0」正式リリース。MMD（MikuMikuDance）やApple Vision Pro、WebXRなどをサポートし、よりリアルなレンダリングを実現する機能追加も行われた。 マイクロソフトは、Webブラウザ上で2Dや3Dモデルの高速なレンダリングなどを可能にするオープンソースのJavaScriptライブラリ「Babylon.js」の最新版「Babylon.js 7.0」正式版をリリースしました。 We are proud to announce that Babylon.js 7.0 has officially been released! The ne
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
