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

技術 - 3Dの記事一覧

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

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

もっと見る

List

  • 2019/01/06

fur - 3Dモデルからぬいぐるみ用の型紙を作る

個人的に立体物をコンピュータの中で表現できる人を尊敬します。平面なディスプレイの中で、立体を想像して描くのは非常に難易度が高い操作です。さらにそれをリアルな物体に展開することを考慮して(3Dプリンタのような)作成するとなると高度なスキルでしょう。今回紹介するfurは3Dモデルをベースに、ぬいぐるみの型紙に展開する作業を...

List

  • 2018/12/08

model-viewer - Webコンポーネントの3D/ARビューワー

HTML5の機能が追加されている中で、Web上でできることが増えています。その一つとして注目したいのがWebVRであったり、AR技術です。これまでは専用のソフトウェアがなければ実現できなかったことがWeb標準の技術で実現できます。そんなAR/VRを簡単に表示、操作できるライブラリがmodel-viewerです。## m...

List

  • 2018/11/22

Slye - WebGLを使って3D文字スライドを作成

プレゼンテーションは聴衆の目を引かなければなりません。そのため、ちょっとしたアニメーションであったり、文字サイズの変化など見た目の急激な変更が行われたりします。個人的にはあまり使いませんが、逆に多用する人もいます。今回紹介するSlyeはWebGLを使って派手な3Dテキストとアニメーションを実現するソフトウェアです。##...

List

  • 2018/09/11

3D Builder - SVGで3Dを描く

HTML5以降、APIがどんどん拡張されており、Webにおける表現力が増しています。支える技術として知られているのがSVGとCanvasでしょう。これらは2Dグラフィックスを描画するのに使われることが多いです。そんな中、登場したのが3D Builderです。なんとSVGで3Dを描くためのライブラリです。## 3D Bu...

List

  • 2018/02/13

DepthKit.js - 奥行きをもった動画を再生

従来のコンピュータでは平面の情報を取り扱うだけでしたが、最近では奥行きを数値化するのがトレンドです。それによってARやVR、MRといった分野に活かされたり、3Dがより本格的に楽しめるようになります。そんな奥行きを計測するデモを紹介します。Three.jsと組み合わせたDepthKit.jsです。## DepthKit....

List

  • 2017/12/29

satella.io - オープンソース版Live2D!

まだ完成途中ですが、期待を込めて!Live2Dというサービスがあります。画像をアップロードすると動き出して、まるで3Dデータを作ったかのように扱えるサービスです。2D画像を分析することで、目を閉じたり口を開いたりと言った操作が可能になります。そんなLive2Dのオープンソース版がsatella.ioです。平面だったイラ...

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もそうです。表示するまでにやるべき面倒な(だいたい毎回同じ)ことを取り除いてくれるライブラ...