← デモ一覧Ken Creations

01 — Registration / 見当

曖昧なアイデアに見当をつけ、版を重ね、ずれなく合わせる。このページは、その仕事を画面の上で再現した技術デモです。

Ken Creations — Demo 03 / DOM × WebGL

Scroll

02 — Mirror / 鏡像

同じ座標に、
二つの層。

画像と見出しは通常の HTML（DOM）に置き、同じ位置に WebGL の板を重ねて描いています。スクロールの速さで板は曲がり、版はずれ、止まると合います。

グルマッチAI のトップ画面。気分や利用シーンから飲食店を探せます。
Fig. 01 — 画像を WebGL の板にグルマッチAI — 自社で企画・開発・運営しているサービス
01Planning / Discovery企画・業務整理
Fig. 02 — HTML を描き写して WebGL の板に構える：目的と業務を整理し、作るものを決める。
02Prototype / MVPプロトタイプ・MVP
Fig. 03試す：触れる画面で、認識を早くそろえる。
グルマッチAI のマスコットキャラクター「ぐるこん」
Fig. 04 — 原寸 190 × 256ぐるこん — グルマッチAI のマスコットキャラクター
03Developmentプロダクト・システム開発
Fig. 05作る：検証で残ったものを、本番の形に。
04Operation運用・改善
Fig. 06育てる：使われ方を見て、手を入れ続ける。
板
画像と図版の 7 枚それぞれに、同じ位置・同じ大きさの WebGL の板を重ねています。
画像
板に貼る画像は、ページに表示している画像をそのまま使います（二重には読み込みません）。
曲がり
板の曲がりと版ずれはスクロールの速さに比例し、止まると 0 に戻ります。
奥行き
3 つの列は奥行きが −160 / 0 / +160 px ずつ違い、止まっているときは HTML とぴったり重なります。
Fig. 07 — 次の章をそのまま描画この図は画像ではなく、次の章の 3D シーンをそのまま描いています。

03 — Assembly / 組み立て

前の章の図は、この 3D シーンそのものです。

  1. 01事業背景を理解する何のための事業・業務なのかを伺います。
  2. 02課題・業務を整理する今の業務を図にして、課題をほどきます。
  3. 03仮説をプロトタイプにする整理した内容を、触れる画面にします。
  4. 04検証する社内・顧客・使う人の反応を確かめます。
  5. 05プロダクトとして作る検証で残ったものを、本番の形にします。
  6. 06利用状況を見て改善する数字と声を見ながら、手を入れ続けます。

整理し、試し、組み立てる。

04 — Studies / 習作

習作 — 6 つのシェーダー

画像を使わず、数式だけで。色はすべてこのサイトのパレットから。

01Contourノイズを重ねた起伏を、太さのそろった等高線で描きます。カーソルの位置に丘が立ちます。
02Flowノイズでノイズをゆがませる「ドメインワーピング」。速くスクロールすると、ゆがみが強まります。
03Lattice弧の入ったタイルを向きを変えて敷き詰める「トルシェ・タイル」。カーソルから広がる波で、順に裏返ります。
04Interference3 つの波源（1 つはカーソル）から広がる波の重なりを、細い線で描きます。
05Cells最も近い点ごとに平面を区切る「ボロノイ図」の境界線。カーソルの下の細胞だけが塗られます。
06Form光線を少しずつ進めて形を探る「レイマーチング」。5 つの球（アイデア）が、板（プロダクト）へ溶けていきます。

WebGL が使えない環境のため、各習作の代わりに CSS の模様を表示しています。

05 — Field / 粒子

動くプロダクトへ。

06 — Engine Room / 内部

この 1 ページで、
起きていること。

文字とレイアウトは DOM、描画は WebGL。二つの層は毎フレーム、同じスクロール値・同じポインタ・同じ進捗を共有して、ずれなく重なっています。

描画の実測値LIVE

いま、この端末で測っている値です。グラフは 1 フレームあたりの時間です（横線は 60 fps の目安）。

フレーム
— ms — fps 95% が — ms 以内
CPU 処理
—
GPU 処理
—
描画
— 回 三角形 — 点 —
GPU 資源
テクスチャ — シェーダー —
解像度
— 画質 —
このページの最後のフレーム（WebGL から DOM のキャンバスへ渡した 1 枚）

07 — Back to Paper / 紙へ

アイデアの段階から、
一緒に。

Ken Creations は、構想の整理から開発・運用までを伴走する個人事業です。

相談するデモ一覧Ken Creations トップへ

Nuxt 3 · three.js (MIT) · GSAP (Standard ‘No Charge’ License) · Lenis (MIT) · webgl-noise (MIT) · Shippori Mincho B1 / Noto Sans JP / Bodoni Moda / JetBrains Mono (SIL OFL 1.1)

LOADING 000% — 準備中