3D capture at your fingertips.With Matterport for Mobile, you can capture any space in immersive 3D, from the phone in your pocket.
これは小さな粒を生成するものです。あなたがクリックした場所から、小さな円が生まれて飛び出していくのです。マウスを持って、動かしてみましょう。粒はカーソルから生み出され続けます。 モバイル機器や、マウスではなく指で動かすタイプのコンピュータだったらどうでしょうか。同じように動きます。 私はオタクなので、これが楽しいと思います。皆さんの見解は様々かもしれません。埋め込み画像をクリックして、円が飛ぶのを見てください。クールじゃないですか? 仕組み これは全てReact、Redux、D3を使って作られています。アニメーションのトリックはありません。少しの賢さが必要なだけです。 一般的な方法を、以下で説明してみます。 私たちは、ページ、SVGエレメント、内部の粒といった 全てをレンダリングするためにReact を使います。この全ては、propを使ってDOMを返す、Reactコンポーネントを使って作ら
宇宙航空研究開発機構(JAXA)は、陸域観測技術衛星「だいち」(ALOS)による観測画像を用いて整備した、全世界の陸地の起伏を水平方向30mの細かさで表現できる標高データセット(30mメッシュ版)の無償公開を開始します。今回、日本を含む東アジア、東南アジア域から公開を開始し、順次、全世界の陸地(緯度82度以内)に拡大する予定です。(別紙1.参照) 今回、公開するデータセットは、全世界規模で整備される標高データセットとして現時点で世界最高精度を持つ「全世界デジタル3D地形データ」(別紙3.参照)の標高データセット(5mメッシュ版)をベースとして作成しており、30mメッシュ版としての高さ精度も世界最高水準です。本データセットは、科学研究分野や教育、地理空間情報を活用した民間サービス等での利用が期待されています。(別紙2.参照)
ブラウザでWebGLが使えるようになって3DCGプログラミングはずいぶん身近なものになりました。と書いてるそばから違和感を感じるくらい生のWebGLをJavaScriptで書くのは敷居が高かったりします。できなくはないけど前提となる知識がかなり必要な感じ。 three.jsが登場したときは、これで普通に3DCGができるということで一気にひろまりました。とはいえ、それでもまだやることは多く、画面に四角い箱を表示する場合以下のようなプログラムを書くことになります。 ・シーンを作成 ・ライトを作成、位置と向きを設定、シーンに追加 ・カメラを作成、位置と向きを設定、シーンに追加 ・マテリアルを作成、色を指定 ・BoxGeometryを作成、サイズを指定 ・メッシュを作成、位置と向きを設定、シーンに追加 ・レンダラーを作成 ・レンダリングループ処理 これらのひとつでも間違えたりパラメーターが適切でな
前回のWebGL(Three.js)とStage3D(Away3D)の比較ですが、Mr.doobさんを始め国内外の多くの方からご指摘頂きWebGL(Three.js)版を最適化したところ、最終的にはFlash(Away3D)版と同じぐらいのパフォーマンスになりました。当初、最適化・検証不足で間違った情報を掲載してしまい申し訳ありませんでした。 さて、そのWebGL(Three.js)版を最適化した手法が有意義だったのでシェアしたいと思います。 デモの紹介 まずはこちらの2つのデモの再生を比較してみてください。WebGL対応のブラウザ(例:Google Chrome)でご覧ください。 ▼最適化前 ▼最適化後 どうでしょう? 圧倒的に後者のほうが滑らかに再生できているのではないかと思います。 後者のほうは配置している3Dのオブジェクト数が10倍近く多いにもかかわらずです。 ※ちなみにFlash
Away3D TypeScriptはHTMLの3D技術「WebGL」を扱いやすくしたフレームワークです。個人ブログ(HTML5で3Dを実現する本格派WebGLフレームワーク、Away3D TypeScriptの公式デモ)で紹介したようにAway3Dを使えばGPUによる本格的な3D表現をプラグイン無しで作成できます。 そこで、初級者にもやさしいAway3D TypeScript(以下、Away3D)チュートリアルをはじめてみることにしました。必要となるスキルレベルは、JavaScriptの入門書を一冊読み終えたぐらいを想定してます。Away3DはJavaScriptやTypeScriptのどちらでも利用できますが、本連載ではJavaScriptで解説します。 この記事について AwayJSは活発に開発されていないため、本サイトとしては利用は推奨しません。WebGLを活用したい方は、Three
blog.bouze.me Away3Dの座標系 Posted on 2012.07.05 by bouze Tweet Tweet Author 西村斉輝 1984年兵庫県生まれ。 2011年多摩美術大学グラフィックデザイン学科卒業。 2018年までtha ltd.所属。 Search for: Recent Posts TDC賞もらいました 2013年 よかったランキング – ウェブサイト編 創造の狂気 ウォルト・ディズニー 2013年 よかったランキング – 映画編 のらもじ発見プロジェクト WebWorkerで爆速プリロード のめりこませる技術 色のない世界 POOL inc. Kazumiabe.com 近況0714 近況0710 Require.jsを試してみた Grunt導入してみた ExternalInterface.callが重い 近況0604 近況0519 AfterE
Away3Dで複数Cube表示 複数3DCubeオブジェクトを表示して、 Geometryオブジェクト、ColorMaterialオブジェクト が使いまわせるかテストしてみました // forked from siouxcitizen's "Away3DでCube表示" http://jsdo.it/siouxcitizen/eHXY var cube1; var cube2; var cube3; var cube4; var cube5; var view3d; function init() { // コンフィグ設定を行います away.Debug.THROW_ERRORS = false; // 3Dの土台を作成します view3d = new away.containers.View3D(); view3d.width = 450; view3d.height = 450; //
Away3D TypeScriptはHTMLの3D技術「WebGL」を扱いやすくしたフレームワークです。個人ブログ(HTML5で3Dを実現する本格派WebGLフレームワーク、Away3D TypeScriptの公式デモ)で紹介したようにAway3Dを使えばGPUによる本格的な3D表現をプラグイン無しで作成できます。 そこで、初級者にもやさしいAway3D TypeScript(以下、Away3D)チュートリアルをはじめてみることにしました。必要となるスキルレベルは、JavaScriptの入門書を一冊読み終えたぐらいを想定してます。Away3DはJavaScriptやTypeScriptのどちらでも利用できますが、本連載ではJavaScriptで解説します。 この記事について AwayJSは活発に開発されていないため、本サイトとしては利用は推奨しません。WebGLを活用したい方は、Three
Away3Dはオープンソースのリアルタイム3Dエンジンです。もともとはFlashプラットフォーム向けに開発されました。そのAway3Dエンジンが、「Away3D TypeScript」としてJavaScriptライブラリへの移植が進んでおり、現在アルファリリースが公開されています。このAway3D TypeScriptを使ったごく簡単なJavaScriptコードで、3次元空間に立方体をつくって回してみましょう。 01 Away3D TypeScriptライブラリを使う 「Away3D TypeScript」サイトには、作例やソースファイルのリンクなどが掲げられています。最新のライブラリは、「Source Files」の欄に示された「GitHub: AwayJS Core TypeScript」と「GitHub: StageGL Core TypeScript」および「GitHub: Sta
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く