ITエンジニア/デザイナ向けにオープンソースを毎日紹介

技術 - 3Dの記事一覧

プレミアムユーザー限定記事

MOONGIFTプレミアムは、月額500円の有料サービスです。詳細はこちらから

もっと見る

List

  • 2017/04/27

nunuStudio - Webベースの3Dコンテンツ開発環境

3Dコンテンツは作成が難しいイメージがあります。特に作る環境を整えるのが難しく、専用のソフトウェアも高かったりします。作るためのテクニックも必要など、素人には非常に高い敷居がある分野と言えるでしょう。そんな3DコンテンツをWeb上で作成できるのがnunuStudioです。## nunuStudioの使い方nunuStu...

List

  • 2016/12/29

WhitestormJS - 物理エンジンを備えた3D Webアプリケーションフレームワーク

Web上で3Dを表現するのはコツがいります。THREE.jsのような専用のライブラリもありますので、そうしたものを使うのが良いでしょう。そこに物理演算を追加するとさらに込み入った難しさが出てきます。今回紹介するオープンソース・ソフトウェアはWhitestormJS、物理エンジンを備えた3D Webアプリケーションフレー...

List

  • 2016/11/17

Astray - WebGLを使った迷路ゲーム

Webの表現力が低いと言われたのはとうに昔で、HTML5によってぐっと向上しています。とは言え、簡単にできるかと言われるとそうでもないのですが、それでも多くのライブラリやフレームワークによって実現する方法も増えています。今回はWebGLを使った迷路ゲーム、Astrayを紹介します。単純な2Dに比べて高度な表現が特徴です...

List

  • 2016/09/17

City Generator - Web上に動かせる3D地図を表示

JAXAが公開している細かいメッシュでの地球上の高度データを使ってどんなことができるのか。主な目的は災害対策であったり、都市計画を立てる際の基礎データになるのですが、そういった目的で使う人は限られた業界の人たちになるでしょう。もっと面白い使い方が考えられれば、地図データの活用幅も広がります。今回はその一つ、City G...

List

  • 2016/09/07

Hakoniwa - 標高メッシュデータを使った3D表示

JAXAでは30mメートル単位でメッシュを作った標高データを公開しています

List

  • 2016/03/06

ln - 線を組み合わせて3Dを生成

3Dというと3D CADやグラフィックスソフトウェアを使って描かれたポリゴンや滑らかなテクスチャのものを思い浮かべるのではないでしょうか。今回はそういった3Dではなく、線を使って立体物を描き出すlnを紹介します。## lnの使い方lnはGo製のスクリプトで3Dを描きます。例えば一例です。線の幅や間隔を変えることで立体的...

List

  • 2016/02/27

voxel.css - ここまでできる!CSS3製ボクセル

マインクラフトに代表される、立方体をボクセルと呼びます。単なる立方体をながら、模様があり、それを積み重ねることで様々な造形を可能にしています。そんなボクセルをCSS3を駆使して可能にしているのがvoxel.cssです。Webベースのボクセルエンジン開発が進みそうです。## voxel.cssの使い方トップページです。こ...

List

  • 2015/12/09

Goo Engine - 多彩な機能をもったWebGLエンジン

Webの進化によって、今後はますますリッチなUIに注目が集まっていくでしょう。その一つとして3Dが考えられます。そし3Dを担っている技術といえばWebGLになります。そのままでは扱いづらいWebGLですが、Goo Engineを使うことで3Dコンテンツが開発しやすくなるかもしれません。## Goo Engineの使い方...

List

  • 2015/12/07

Web VR Starter Kit - WebでVRをはじめるならここから

gumiがVR専門の子会社を設立するなど、VRに対する期待は大いに高まっています。ゲームでの利用はもちろんのこと、遠隔地操作など多くの利用が考えられるだけに、その可能性を考えるとわくわくしてきます。そんなVRをWebブラウザ上で楽しむためのスターターキットと言えるのがWeb VR Starter Kitです。## We...

List

  • 2015/07/04

Blend4Web – Blenderで作った3DデータをWeb上で

WebGLの登場もあって、今後3DをはじめとしてリアルなグラフィックスがWeb上でも実現することでしょう。WebGLとOpenGLは似ているとは言え、WebGL向けにはまだ専用のツールなどは揃っていません。作るのに大きなコストがかかるのではなかなか広まらないでしょう。そこで既存の仕組みで作られたデータを取り込めるのがベ...

List

  • 2015/07/02

Teddy.js/PaintUp – Webブラウザ上で簡単に3Dオブジェクトを作成

3Dで作品を作るというのはとても敷居が高いように感じられます。ものを三次元的に捉えないといけないですし、二次元のコンピュータの中で三次元を描くのはとても面倒なイメージがあります。そんな大変さを軽減してくれるのがTeddy.js/PaintUpです。Teddyは誰でも簡単に三次元モデルを作れるソフトウェアで、Teddy....

List

  • 2015/05/25

MagicaVoxel – マルチプラットフォーム対応のVoxelエディタ

Voxelと言えばドット絵を組み合わせた3Dモデルのことですが、MineCraftであったり、LEGOっぽさもあって人気があります。精密な3Dデータを作るのは難しいですが、ブロックを重ね合わせたVoxelは手軽で、かつ暖かみ、面白さがあります。そんなVoxelを作るためのエディタがMagicaVoxel

List

  • 2015/05/10

YASAI KUDAMONO – 野菜と果物を棚に載せるシンプルなゲーム

ゲームのフレームワークとしてUnityが注目を集めています。昔は3D向けと言った感じでしたが、最近は2Dゲームの開発でもUnityが使われるようになっています。そんなUnityで作られているのがYASAI KUDAMONO

List

  • 2015/02/13

ThreePiece.js - Three.jsをラッピングして3Dをもっと扱いやすく

3Dはとかく面倒なイメージがあります。2Dに比べると考えることが多く、行列やライトなど様々な計算を行った上で表現しなければなりません。それではなかなか手出ししづらいのではないでしょうか。3D系ライブラリとして有名なThree.jsもそうです。表示するまでにやるべき面倒な(だいたい毎回同じ)ことを取り除いてくれるライブラ...

List

  • 2014/09/27

Elegans - Webベースの3Dグラフライブラリ

グラフというのは実にたくさんの種類があります。Webにおいてグラフを表示するというのは意外と面倒な問題ではありますが、それでも最近ではライブラリを増えてきて使いやすくなってきているでしょう。しかしそれは2Dに限った話かも知れません。3Dグラフとなるとさらに厄介です。そこで使ってみたいのがElegans、3Dグラフライブ...

List

  • 2014/09/17

Enraged Fowls - HTML5製。3D版Angry Bird

HTML5 Japan Cupが行われ、色々なアイディアを凝らした作品が生まれました。HTML5/JavaScriptがソースコードを隠せない仕様とあってか、オープンソース・ソフトウェア(またはソースコードを公開)しているケースも多数あります。今回はその作品の一つ、Enraged Fowlsを紹介します。## Enra...

List

  • 2014/05/09

Isomer - Canvas上に等角図で立体を描くJavaScriptライブラリ

平面で立体を表現する手法の一つに等角図があります。120度ずつのY字型でXYZ軸を表現します。工作の図面を描くのに使ったり、コンピュータであればドット絵を描く際にも使われます。面の色を変えるとぐっと立体的に見えるのが面白いです。そんな等角図をWeb上、HTML5のCanvasで表現するのがIsomerです。等角図を用い...

List

  • 2014/02/18

ViziCities - 体験必須!オープンソースの3D地図

オープンソースでもここまで出来てしまう凄さが。Appleのマップは登場当時こそ叩かれましたが、それでも改善を重ねて徐々に使えるようになってきています。そんな中、注目されているのが建物の3D表示です。同様の機能はGoogleマップやBingでも開発されています。そんな3Dマップをオープンソース・ソフトウェアで実現してくれ...

List

  • 2014/01/17

JSC3D - JavaScript/Canvasを使った3Dビューワー

3Dプリンタの発展もあって、立体物に対する注目が集まっています。しかし3Dオブジェクトは2D以上に描いたり作成したりするのが難しいです。そんな中紹介したいのがJSC3Dです。オブジェクトの作成は容易ではありませんが、Webブラウザ上で3Dオブジェクトを描画するすごいビューワーです。!一例です。女性のアバターを表示してい...

List

  • 2013/12/24

Unfolding the Box Model – 3Dを使ったCSS3テクニックのお手本にどうぞ!

CSS3の妙技満載!スタイルシートというとWeb上のテキスト装飾や配置を決定するものというイメージがありますがCSS3によってアニメーションや表示上のイフェクトをサポートするなどプログラミング並のことができるようになっています。そのためにはCSS3を駆使すれば何ができるのかを知らなければなりません。知った上でどこで活か...