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

技術 - 3Dの記事一覧

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

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

もっと見る

List

  • 2019/12/12

Spacekit - 太陽系の動きを3Dで表現

宇宙に憧れる人は大勢います。宇宙を知れば知るほど、自分の存在が小さなものだと思い知ります。また、地球以外には移住もできず、まだ月にしか足を踏み入れていない現状が未来を感じさせます。そんな宇宙の様子を3Dで表現するのがSpacekitです。## Spacekitの使い方各惑星は線の上を動きます。!

List

  • 2019/05/23

IsometricSass - CSSだけで実現する3Dライブラリ

Web上で3Dを描くのは大変です。多くの場合、CanvasであったりWebGLを使いますが、そのためのライブラリを利用しなければなりません。覚えることもたくさんあり、ちょっとした表示を行うのには不便です。そこで使ってみたいのがIsometricSassです。Sassライブラリとなっており、CSSだけで3D表現を実現でき...

List

  • 2019/05/17

maprayJS - 地理空間情報を3Dに高速表示

地図は様々な楽しみ方があります。Googleマップのようにドローイングされたもの、航空写真、Google Earth、路線図など様々な情報が地図として表現されています。それぞれ楽しみ方が異なり、見ていて飽きないことでしょう。今回は地理空間情報とユーザの情報を合わせて3Dマップを生成するmaprayJSを紹介します。##...

List

  • 2019/03/02

JS.Sketcher - Web上で3Dモデリング

IoTや3Dプリンタと言った文脈の中でハードウェアが存在意義を増しています。ちょっとしたオリジナルの部品を3Dプリンタで作ったり、IoTプロジェクトのハードカバーを作ったりします。そんな時に必要なのが3D CADになるでしょう。今回はWebブラウザ上で3DモデリングができるJS.Sketcherを紹介します。## JS...

List

  • 2019/01/31

dimage.js - アニメーションGIFよ、進化せよ!

人は常に進化していなければなりません。立ち止まったら、それは停滞ではなく退化のはじまりであると捉えるべきです。写真から動画、二次元から三次元が作られるように次のアクションが求められるのです。今回紹介するdimage.jsも同じです。二次元に留まるな、がコンセプトなソフトウェアとなっています。## dimage.jsの使...

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...