WebGPU
前々回アップした、XPBD(extended position-based dynamics) による Cloth シミュレーションの解説です。今回はマウス操作について説明しています。実行結果 cloth の上でマウスをクリックしドラッグすると、cloth が引っ張られた状態になります。１ mouse d…
前回アップした、XPBD(extended position-based dynamics) による Cloth シミュレーションの解説です。１ GPU StorageBuffer compute shader で扱うデータは、storage buffer を介して利用する。 mesh の各vertex point のデータは、Particle 構造体とし、そ…
Babylon.js WebGPU を用いて、XPBD(extended position-based dynamics) による Cloth シミュレーションを行なってみました。 XPBD の計算は、compute shader で GPU 計算を行なっています。XPBD による Cloth シミュレーションは、下記を参照しました。 http…
2022/07/05/ chrome stable version 103 WebGPU: version 2022/05/13 WGSL: version 2022/04/11chrome の安定版（現在のバージョンは 103）でも、WebGPU を利用できます。 WebGPU Samples https://austin-eng.com/webgpu-samples/ このサンプルでは、Next.js…
06/28/2022 chrome canary version 105 WebGPU, WGSL 06/17/2022chrome canary について （WebGPU を利用するには、chrome://flags/#enable-unsafe-webgpu を設定する。） この時点では GPUDevice の読み込みが不安定になっています。 requestDevice の read…
最近のWebGPUとWGSLの仕様 update により、前回プログラムにエラーが出て表示できなくなっていました。WebGPUでは、ワーニングが出ます。 Error : WGSL E1: a compute shader must include 'workgroup_size' in its attributes fn main([[builtin(global_inv…
最近、W3C が WebGPUとWGSL仕様書の published version を出すようになりました。（６月７日修正） WGSL の最近の仕様変更により、４月２６日付のプログラム「WebGPU SPH シミュレーション(2)」は実行できなくなりました。 以下のようなエラーとワーニングが…
Babylon.js WebGPU で流体シミュレーションを行なってみました。計算には、MAC法を用いています。 以下のサイトと本を参考にしました。 １ 「数学とか語学とか楽しいよね」 【Navier-Stokes方程式】MAC法によるNavier-Stokes方程式の離散化 https://mathlang…
Babylon.js WebGPU Compute Shaders examples にある Compute_Boids を参考にして、instancing にトライしました。実行結果 プログラム instancing.html <html> <head> <title>Babylon.js WebGPU Instancing</title> <script src="https://preview.babylonjs.com/babylon.js"></script> </head> <body> </body></html>
Babylon.js のWebGPUで Compute Shader が使えるようになりました。 ( v5.0.0-alpha で動作します。)Compute Shaders | Babylon.js Documentation https://doc.babylonjs.com/advanced_topics/shaders/computeShader この画面からSimple compute shaders exa…
（４月26日修正） WGSL の最近の仕様変更により、４月６日付のプログラムは実行できなくなり ました。 エラー箇所 １Parser error: A structure type with a [[block]] decoration cannot be used as an element of an array 変更 [[block]] struct Particle…
前回の WebGPU に続いて、ThreeJS WebGPU で、Neighbor Search を 行ってみました。 （粒子の表示は、前回同様です。）プログラム NeighborSearch-ThreeJS-WebGPU.html <html> <head> <title>Neighbor Search ThreeJS</title> <meta charset="utf-8"> </head> <body> <script type="module"> import * as THREE from '../build/three.module.js'; </body></html>…
WebGPU で Compute Shader を用いて、Neighbor Search を行ってみました。2d 画面を 9個のセルに区切り、注目の粒子を赤色、同じセル内の粒子を黄色、 その隣のセル内にある粒子を緑色、それ以外の粒子を灰色で示しています。 隣接セルは、注目粒子に近いセ…
Three.js WebGPU compute shader instancing に関する以下の記事がありました。 WebGPURenderer: Initial instancing support https://github.com/mrdoob/three.js/pull/20407 この記事を参考にして、Three.js WebGPU を用いて SPH (Smoothed Particle Hydro…
WebGPUを使って、SPH(Smoothed Particle Hydrodynamics)のシミュレーションを行いました。 メインPCをMacBook Pro(13in.)に変えました。Chrome Canaryを使って表示して います。SPHの計算は、前回のjuliaによる計算と同様ですが、ここではcompute shaderを …
HTMLとJavaScriptで書かれたWebGPUのサンプルがありましたので、 Firefox Nightlyでトライしてみました。 プログラムは、以下のサイトにあります。 tsherif/webgpu-examples https://github.com/tsherif/webgpu-examplestriangle particles cube cube-textur…
最近、「A Taste of WebGPU in Firefox」という記事（2020/04/23の記事）を見つけました。 Firefox Nightly で WebGPU が使えるようになっています。 hacks.mozilla.orgこれまで、Windows版の「Chrome Canary」を使って、WebGPU を試していました。 Firefox …
