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

技術 - 3Dの記事一覧

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

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

もっと見る

List

  • 2020/06/15

twigl - オンラインのGLSLエディタ

GLSLはOpenGLやWebGLなどで使われているシェーダーを記述するための言語になります。3D CGなどを行っている方であれば馴染みのある言語でしょう。書き方がJavaScriptなどのプログラミング言語とは異なるので、慣れないとなかなか使い方を覚えられないかも知れません。そんなGLSLをWeb上で書いて試せるのが...

List

  • 2020/05/09

unsup3d - 2D画像を3Dに展開

2Dと3Dには超えられない壁が存在します。しかし描かれている絵、または撮影された写真の奥にものを見てみたいと思う欲求は常にあります。最近では3D調に撮影できるカメラや、2Dのイラストを動かす技術も出てきました。今回紹介するunsup3dもそんな2Dと3Dの境目を乗り越えるための技術になります。2Dの顔写真(またはイラス...

List

  • 2020/04/22

Raycast - HTML5でレイキャスティングを楽しむコンポーネント

3Dゲームでよくあるのがレイキャスティングによる表示です。壁などが垂直に表示されて、前後左右に動いたり、視点を変えると見える映像が変わるというものです。DOOMなどでよく知られている表示形式です。そんなレイキャスティングをReactで再現したのがRaycastになります。HTML5でも十分に3Dゲームが楽しめそうです。...

List

  • 2020/04/18

ROYGBIV - Web向けの3Dゲームエンジン

ゲームを開発する際にスクラッチでゼロから開発するのは非効率的です。作りたいゲームジャンルに応じてフレームワークを選ぶことで、より早く、効率的に開発できます。ゲームで求められる要素はそれくらい複雑になっています。もしあなたが3Dゲームを開発したいならばROYGBIVをチェックしてみましょう。3Dアクションゲーム対応のフレ...

List

  • 2020/04/02

OpenJSCAD - JavaScriptで描く3D CAD

3D CADは元々専門家のものでしたが、3Dプリンターの普及に伴って、一般のデザイナーやプログラマでも扱うようになっています。慣れないと造形が難しいですが、3DはゲームやVRでも利用できる技術なので、今後可能性が広がる期待ができるでしょう。そんな3D CADとしてOpenJSCADを紹介します。ユニークなのはWebベー...

List

  • 2020/03/29

EasyVTuberRel - 簡単にバ美肉を楽しんだり、VTuberになれる!

バ美肉を楽しんでみたいと思ったことはないでしょうか。普段の自分ではない、魅力的なキャラクターに扮した自分自身になってみたいと思ったことはないでしょうか。程度の差こそあれ、誰しも一度は考えたことがあるはずです。それをコスプレとして発憤できる人もいますが、多くの人にとっては敷居が高いはずです。そこで使ってみたいのがEasy...

List

  • 2020/03/14

glTF Viewer - WebGLを使ったglTFビューワー

glTFは3Dモデル界隈で今最も注目されているフォーマットだそうです。3Dモデル界隈におけるJPEGを目指すと言われているので、まさにデファクトを目指すべく作られています。執筆時点での最新版は2.0で、1.0とは互換性がないとのことです。そんなglTFのファイルをWebブラウザ上で閲覧するビューワーがglTF View...

List

  • 2020/03/13

Panolens.js - Three.jsを使ったパノラマビューワー

全天球動画(画像)やパノラマ写真など、従来の写真にはなかった形のメディアが登場しています。そうしたメディアを楽しむためには専用のビューワーが必要です。それによって、より強い没入感や楽しみ方が生まれるでしょう。今回紹介するPanolens.jsはThree.jsを使ったパノラマビューワーです。## Panolens.js...

List

  • 2020/02/20

MMDLoader-app - THREE.MMDLoaderを使ったMMDサンプル集

3Dモデルによるアニメーション、ダンスなどを行うフォーマットとして有名なのがMMD(MikuMikuDance)です。同名ソフトウェアで作ったデータを読み込めばWeb上でのMMDを動かせます。そのためのライブラリがMMDLoaderです。今回紹介するMMDLoader-appは、そんなMMDLoaderを利用するThr...

List

  • 2020/02/04

The Aviator - 飛行機を飛ばし続ける3Dゲーム

ゲームを作ってみたいと思っている方は多いでしょう。凝ったゲームを作るのは時間も技術も必要になりますが、簡易的なものを作って徐々にステップアップしていくこともできます。今回紹介するThe Aviatorはそんなステップを歩んで作られた3Dゲームです。## The Aviatorの使い方ゲーム画面です。!

List

  • 2019/12/22

WebGLStudio.js - 本格的な3D Webアプリケーション

デスクトップアプリケーションが続々Webアプリケーション化されています。開発環境や画像編集ソフトウェア、オフィススイートまで幅広くWebブラウザで動作するようになっています。今回紹介するWebGLStudio.jsはWebブラウザ上で3Dグラフィックスを作成できるソフトウェアです。## WebGLStudio.jsの使...

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