粒子が形をつくる
数万個の点をGPUで動かします。ロゴや商品の形に集まったり、ほどけたりできます。 画像を1枚渡せば、その形になります。
GPGPU パーティクル / 画像→粒子
0%
SAPPORO / WEBGL PRODUCTION
背景で動いているのは動画ではありません。GPU が1コマずつ計算して描いています。 マウスを動かすと反応します。
※ この背景は レイマーチングという描き方です。3Dの形をデータではなく数式で表しています。
WHAT WE CAN DO
動画は撮ったものを流すだけですが、WebGL は見る人の操作にその場で反応します。 重さも動画より軽く済みます。下の3つは、実際にこのページで動いているものです。
数万個の点をGPUで動かします。ロゴや商品の形に集まったり、ほどけたりできます。 画像を1枚渡せば、その形になります。
GPGPU パーティクル / 画像→粒子
ガラス・金属・発光。写真を使わずに、光の計算だけで質感を出します。 色や粗さは数値なので、商談のその場で変えてお見せできます。
屈折 / 環境反射 / フレネル発光
ページを送ると、3Dの側が連動して動きます。読み進めるほど話が展開する、 紙では作れない見せ方ができます。
スクロール連動 / ポストエフェクト
INTERACTION
この帯の上でマウスを動かしてください（スマートフォンは指でなぞってください）。
粒がよけて、また戻ります。
「見ているだけのページ」と「さわれるページ」では、滞在時間が変わります。
LEVELS
「全部盛り」にする必要はありません。予算と目的で段を選べます。 当社が実際にお受けしているのは 3〜4 です。
押したら開く、スクロールしたら出てくる。いわゆる「動きのあるサイト」。
既存の部品を組み合わせた演出。世に出回っている表現はここが多い。
Three.js の標準機能でモデルを置き、光を当て、スクロールと連動させる。実績あり。
質感そのものを数式で書く段。このページの背景と粒子はここ。国内でも扱える会社は限られます。
GPUで物理演算を回す、独自エンジンを積むなど。世の中のサイトの1%未満。お受けしていません。
できないことを「できます」と言わないのが、うちのやり方です。
FLOW
提案書ではなく、動くものでご判断ください。ご依頼いただく前に、御社の社名と色で作った ページをお見せします。見てから決めていただけます。
社名・業種・今のホームページ。5分で終わります。
実際に動くページのURLをお送りします。ここまで無料です。
色も動きも数値なので、その場で変えられます。
公開したあとの手直しと見守りまで含めてお受けします。