Skip to content

WebGLを体感する。Web上で3Dモデリングするサービスまとめ

by : 2014/07/23

WebGLの普及にともないWebブラウザ上でお手軽に3Dデータを扱えるようになってきました。そこで今回はWebGLを活用したツールとして、Webブラウザ上で動作する3Dモデリングツールについてまとめてみました。

Webブラウザで動作するということもあり、お手軽に3Dモデリングを試してみることができるので、3Dモデリングに興味がある方はぜひ試してみてください。


Tinkercad


3Dモデリングを始めようと思い立ったものの、モデリングツールの使い方が分からないという方にオススメです。チュートリアルで3Dモデリング手順が解説されており、ツールの操作方法を覚えながら3Dモデリングのコツを学べる内容になっています。立方体や円柱、三角錐といった基本的なオブジェクトの他にアルファベットや「!」「?」といった記号のオブジェクトも用意されており、ちょっとしたロゴをモデリングする用途にも活用できそうです。

作成したデータはSTL、X3D、VRML97といった3Dプリンタで出力できる形式でダウンロード可能です。また、MinecraftのSchematicデータとしても出力できます。チュートリアルはアカウント登録不要なので、まずはツールの使い方を一通り覚えてから本格的な活用を考えてみてはいかがでしょうか。

Tinkercad | Create 3D digital designs with online CAD

Tridiv


3DモデリングデータをHTMLとCSSのみで表現するという、一風変わったアプローチが特徴です。作成した3DモデリングデータはHTMLとCSSとして出力される他、EMBEDタグで参照できます。HTMLとCSSでデータを表示した場合は一枚の止め絵になりますが、EMBEDタグ経由でデータを表示した場合は、拡大縮小、回転などのビューア機能が付与されます。

TRIDIVに用意されているオブジェクトは立方体、円柱、三角柱、三角錐といった基本的なもののみであり、他のツールに比べ、思い通りのモデリングには練習が必要かもしれません。

Tridiv | CSS 3D Editor

Clara.io


作成した3Dモデルデータを活用して3Dコンテンツを作成したい場合に便利です。3Dデータ作成にとどまらずアニメーション作成やレンダリングといった機能が提供されており、β版と銘打っているものの、Webブラウザ上で一通りの3Dコンテンツ作成が行える完成度の高いWebアプリケーションです。

面白い特徴として、操作内容が全てJavaScriptとして記録されるという点があります。3Dモデルデータの作成をJavaScriptから自動化したり、計算結果のシミュレーションを3Dアニメーションで表現するといった活用法方が考えられるでしょう。

Clara.io: Online 3D Modeling, 3D Rendering, Free 3D Models

3DTin


3DTinは手軽に3Dモデリングを行えるWebアプリケーションです。用意されている3Dオブジェクトを用いて、ペタペタとスタンプを押していく感覚でモデリングできます。チュートリアル動画も提供されていますが、シンプルなインタフェースであるため操作方法で迷うことは少ないでしょう。また、動画撮影機能が提供されており、3Dモデルデータを用いたアニメーションも作成が可能で
す。

3Dモデリングデータのエクスポート機能は他のツールにもありますが、3DTinでは3Dデータのエクスポート先として、i.materialiseなどの3Dプリントサービスを直接指定できます。

3DTin

Sketchfab


Sketchfabを利用すると3Dモデリングデータの公開と共有が簡単に行えます。3Dデータ共有をメインにしたWebサイトであり、27種類以上のデータフォーマットのアップロードに対応しています。また、3D Coat、Blender、Photoshopといったアプリケーションから直接Sketchfabにデータをアップロードすることも可能です。

Sketchfab自体には3Dモデリング機能はありませんが、簡単な3DモデリングツールとしてScriptGLというツールが用意されています。

Sketchfab – The web platform for publishing your interactive 3D models

Away3D TypeScript


WebGLを利用したWebアプリケーションを作成する場合に便利なのがAway 3DTypeScriptです。Adobe Flash用の3Dエンジンとして提供されているAway 3Dを移植したもので、JavaScriptまたはTypeScriptから利用可能なライブラリとなっています。

Away 3D TypeScriptはAway3Dで作成したアプリケーションをHTML5とWebGLによるWebアプリケーションに移行しやすくすることを目標としており、Away 3DとActionScript3を使ったことがあるユーザには馴染みやすいライブラリになっています。

Away3D TypeScript

csg.js


CSG(Constructive Solid Geometry)は3Dモデリング用のJavaScriptライブラリです。Webブラウザ上で3Dモデリングを行うのではなく、JavsScriptから3Dオブジェクトを操作して3Dモデルを作成します。例えば、土管のような3Dモデルを作成したい場合は、円柱オブジェクトに対して一回り小さな円柱オブジェクトで引き算の操作を行うことで、中がくり抜かれて空洞になった3Dデータを作成できます。

使用できる操作はunion、subtract、intersectの3種類ですが、CSGのWebサイトではこれらの操作を組み合わせた複雑な形状の作成例が示されています。

evanw.github.io/csg.js/

Project Shapeshifter


3Dプリンタ向けに少し複雑なモデリングデータが欲しい人には、AutoDeskがテクノロジプレビューとして公開しているShapeshifterがオススメです。テンプレートとなる3Dモデリングデータとパターンデータが用意されており、Webブラウザ上から3Dモデリングデータのパラメータを変更することで、3Dモデルを捻ったり圧縮したりできます。

表面の形状は豊富に用意されているパターンデータから変更可能です。例えばフラットな表面の形状からゴルフボールの表面のようなデコボコした形状に変更したりできます。

Project Shapeshifter


いかがだったでしょうか。3DプリンタやUnityゲームエンジンなど、一般ユーザーの間でも3Dデータを利用する場面が少しずつ増えてきています。自分で作った3Dデータを活用するとより楽しみの幅が広がるかと思います。

hifive – HTML5企業Webシステムのための開発プラットフォーム – hifive

HTML5企業Webシステムのための開発プラットフォーム

From → まとめ

One Comment

Trackbacks & Pingbacks

  1. WebGLを体感する。Web上で3Dモデリングするサービスまとめ | hifive開発者ブログ | MOONGIFTメモ

現在コメントは受け付けていません。

%d人のブロガーが「いいね」をつけました。