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

技術 - 3Dの記事一覧

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

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

もっと見る

List

  • 2020/10/31

Keyboard Simulator - Web上でキーボードのデザインを確認

最近はキーボードを自作する方が増えています。また、これまでようにキーが整然と並んだものだけでなく、特徴的なものもあります。キーボードの入力速度は生産性に大きく関わるので、キーボードの使い勝手は大きな要素になります。Keyboard Simulatorはそんなキーボードのデザインを3D空間で確認できるソフトウェアになりま...

List

  • 2020/10/19

RiggingJs - 機械学習を使ってWebカメラの人物に沿って3Dモデルを動かす

機械学習はさまざまな分野で活用されています。画像や動画の分析で使われていることも多いです。人の目で見れば認知できる情報も、従来のアルゴリズムではコンピュータには判別しがたいものでした。しかし、機械学習の柔軟性によって乗り越えられています。そんな機械学習を使ってスケルトンモデルに動きを与えられるのがRiggingJsです...

List

  • 2020/10/02

ztext.js - テキストや絵文字、画像を3D化

2Dのものを3Dで表現する試みは多数あります。人の脳は2次元であったとしても、奥行きを持たせることで、向こう側にある空間を意識します。さらに静的ではなく、動かしたりするとより、立体感が生まれます。今回紹介するztext.jsはテキストや絵文字を3D化するソフトウェアです。## ztext.jsの使い方実際に試していると...

List

  • 2020/09/27

css3d-game - CSS3製のファーストパーソンゲームエンジン

自分視点で楽しめるゲーム、いわゆるファーストパーソン系のゲームは主にシューティングで採用されています。しかし、自分の視点なのでより没入感が高く、他のジャンルでも応用できます。脱出ゲームなどもこの視点で提供されることが多いジャンルです。今回紹介するcss3d-gameはCSS3を駆使して提供されるファーストパーソン視点の...

List

  • 2020/08/06

map33.js - Three.jsを使って3D地図を生成

ただ地図を表示するだけでも面白いのに、それが立体になるとさらにワクワクします。これはGoogleアースなどで立体的な地図を見た時、誰もが感じた感情でしょう。立体化されることで、より体験がリアルに感じられます。今回紹介するmap33.jsはWeb上で地図を立体的に表示してくれます。建物などではなく、等高線に基づいた立体化...

List

  • 2020/08/01

ベクトルタイルを用いた3D風地図 - 地図上にベクトルタイルの建物データを表示

地図好きな人は大勢います。地図を見ているだけで、その街を空想したり、旅している自分を想像できます。さらに最近ではストリートマップや、写真によって、自分が本当にいるかのように感じることだってできるようになりました。今回紹介するベクトルタイルを用いた3D風地図は、地図の上に3Dオブジェクトを配置し、建物データを描画するデモ...

List

  • 2020/07/27

Parallax-effect - Webカメラを使ったパララックスエフェクト

パララックスエフェクトというと、マウスのスクロールに差異を持たせて奥行きを感じさせるのが一般的です。手前は早く、奥はゆっくり動かすことで、距離を感じさせるのはアニメやゲームでもよく行われている手法です。今回紹介するParallax-effectはWebベースで、顔をトラッキングして行うパララックスエフェクトです。## ...

List

  • 2020/07/16

CindyJS - インタラクティブなコンテンツ作成に役立つJavaScriptフレームワーク

JavaScriptを使えば画面内の要素を動かすことができます。とはいえ、それを素のJavaScriptだけで自力で実装するのは現実的ではありません。特に物理的な動きと組み合わせるのは大変です。今回はインタラクティブなコンテンツを作るのに特化したJavaScriptフレームワーク、CindyJSを紹介します。## Ci...

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の使い方各惑星は線の上を動きます。!