HAOQI.DESIGN

TikTokでデザインシステムとAIを担当するプロダクトデザイナー／デザインエンジニア Haoqi Wen の個人ポートフォリオ。2026年8月14日に Awwwards Site of the Day（7.36）と Developer Award（7.43）を同時受賞しています。 Next.js製で、初期HTMLの時点で react-three-fiber のキャンバスが2枚SSRされており、WebGLがアクセントではなくページの中核になっています。技術的な見どころは本物のGPU流体シミュレーション。シェーダのuniformが uVelocity / uPressure / uDivergence / uCurl / uTexelSize / uSimSize / uDissipation と揃っており、これは ping-pong FBO によるナビエ・ストークスソルバの完全なuniformセットです。ポインタは uPointer / uPointerDelta / uTrail / uPointerColor を通じて流体場に運動量を注入します。 【参考になるポイント】 ・velocity・pressure・divergence・curl をそれぞれ別のレンダーターゲットに持つ、教科書どおりのマルチパス流体ソルバ。Developer Award の理由はここだと思われる ・屈折ガラス（transmission、refractionRatio、uFresnelSideDir、uChromaticAberration）と、ビネット／色収差／トーンマッピング／ブルーノイズディザ／ASCII効果までのポストプロセスチェーンを併用している ・一方で3Dジオメトリは驚くほど控えめ。/model/hello.gltf と /model/cnt.gltf はノード名が全部「Path」「Group」で、彫刻されたメッシュではなく2Dベクターパスを押し出したもの（合計約4.6MB）。加えて cursor.glb（約40KB）が3Dカスタムカーソルとして載っている ・uDotPixelSize、uEdgeIntensity、uTintColorA/B、uStripeColorA/B、uBlueNoiseResolution など効果ごとのuniformが多数あり、Shadertoy由来の iTime / iResolution も混ざっている。プロトタイプをShadertoyで作ってから移植した形跡 ・※このサイトは og:image を持っていない（Nextのメタデータルートも404）。当面のサムネイルはAwwwardsの投稿画像を使っているので、管理画面から自前のスクリーンショットに差し替え推奨