webサイトに3D表現を

webGL表現の可能性

web制作をしていく上で、webGLという単語を耳にすることがあると思います。
webGLは、ブラウザ上で3Dグラフィックを実現させるために開発された技術で、HTMLのcanvas要素を利用して描画されます。

ブラウザを表示できるものなら、ほとんどどのデバイスでも動作する、標準化された仕様です。
もちろん、スマホでも高速に動作します。

フォトリアリスティックな3DCGを、上から見せたり、横を向けたりでき、
マウスコントロールで3Dモデルを自由に動かす事もできます。

画面上に商品を表示して、色変えをしたり、
洋服を着せ替えたり、部屋の模様替えのシミュレーションを実装しているサイトもあります。

グラフィックの3D効果

3次元の奥行きを加えたポインティングや運動を表現できます。
3Dのインターフェイスを備えたUIも実装できます。

出来上がった3Dモデルの頂点のコントロール。平面座標上での色のコントロール、テクスチャの色変化など。
回転、移動、変形、衝突など物理演算まで、さまざまな効果をつけることができます。

料金について

webGLは活き活きとしたイメージをhtml表現の中で実現できますが、実装の難易度が高く、敷居の高い技術と思われています。
大手スポンサーがバックについた大規模で資金力豊富なプロジェクトでしか実装できないと思っていませんか?
また、専門的な知識がないと、自分がやりたいことをうまく伝えられなそうだと思っていませんか?

webGLを使ったコンテンツを提案する会社はいくつもありますが、代理店経由で、中間マージンが乗せられていると、金額が莫大なものになります。
200万、300万という見積もりをもらったことがある方も多いと思います。
しかし、実際に作業している下請けに入る金額はその何分の1かになります。

当社では、コーディングの実作業を自社で行なっているので、コストパフォーマンスは高いです。
ただし、なるべく手軽にご利用いただきたいと考えていますが、専門知識が必要な上に複雑なプログラミングが必要なので、ある程度時間と費用はかかります。

目安としては1営業日¥40,000程度と考えてください。

制作期間は、簡単なもので10営業日、複雑なものだと40営業日ぐらいを目安にしてください。的確な指示と計画的なスケジュールがあれば、時間は短くすみ、コストを下げることができます。

逆に、確認の際に迷ったり、何パターンかのテストを必要とする場合はそれだけ作業時間がかかります。

了解していただきたい事

3DCGをブラウザ上で動かす場合は、javascriptの実装以外に、3Dモデルを別に用意しないといけません。
また、複雑な3Dモデルは、webで扱うために最適化する必要があります。

ビデオゲームに比べると再生速度に関係するパワーが低いので、非常に高速な動きや、非常に複雑なモデルの再生には一定の限界があります。

スペックの低いデバイスでは、ポリゴン数でいうと、3万〜5万ポリゴンぐらいから動きが重くなります。

CPUの処理能力とは別に、グラフィックカードの性能の影響を受けやすいです。特に、Android系のスマホや、廉価なノートPCでは限界がくるのが早いのでご注意ください。

発注をお待ちしております

コーディングはある意味建築物を作るのに似ています。建設業は8割が段取りとも言われているように、基礎から仕上げまで綿密に計画されている事が重要です。

イメージを追求する段階では自由に想像を膨らませ、試行錯誤をしていただきたいのですが、実作業にかかってからは、小さい変更でも全体に大きく影響を及ぼし、スケジュールや料金に影響が出ます。

以上のことを踏まえた上で、まずはお気軽にご相談ください。
コスト重視の案件にはあまり向きませんが、他と違う効果を狙う場合、webGLはチャレンジしてみる価値があります。

当社は、デザイン制作会社なので、テクニカルな視点ではなく、美しさ、わかりやすさといったグラフィック的な視点から実装を考えています。
また、インタラクティブで動きのあるコンテンツでは、ユーザーが自然に感じる挙動や、違和感のないスムースな動作を心がけています。

他の作例について

まずは当社の制作物ページをご覧ください。現在webで公開されている作例を紹介しています。

また、大人の事情で一般には公開できない作例もあります。 興味のある方はご相談ください。

CONTACT

お問い合わせはこちらから
メールフォーム
*印は必須項目
氏名*
会社名/組織名
メールアドレス*
電話番号
お問い合わせ内容*
添付ファイル
(容量1MB以内)
送信する
TOP