Why? Can interact with mouse / touch Customize colors & style to match your brand No pixelation – Canvas runs at full resolution Smaller filesize than background videos and large background images – three.js is ~120kb minified and gzipped Runs fast (60fps) on most laptops/desktops What's the catch? Some WebGL effects are slow on older computers. Don't use more than one or two in a single page! Not
こんにちは、うえむーです。 今回はThree.js(WebGL)で一年以上勉強した成果と便利なクラス/ライブラリを紹介したいと思います。 Three.js(WebGL)とは？ Three.jsは、少しでも簡単にWebサイト上に3Dのコンテンツを表示するライブラリです。 ライブラリなしでカメラ・影・ライト・メッシュ実装する場合はそれなりの高度な技術が必要になりJavascriptのコード量が膨大になっていきます。 Three.jsのようなライブラリを導入することで、Javascriptの基礎と、Three.jsのクラスを利用することで気軽に3Dのコンテンツを表示することができます。 当初は、Three.jsを勉強したいけどまずどこから手をつければいいかわからず、公式ドキュメントを見ると英文で何をどうすればいいのかわからないかと思います。 Three.jsをこれから勉強するには、以下のサイトを
SculptGL is a small sculpting application powered by JavaScript and webGL.
どうも、まさとらん（@0310lan）です。 今回は、面倒な「インストール」や「ユーザー登録」など一切不要で、ブラウザから即座に起動できる無料の3Dゲーム開発エディタのご紹介です！ ゲームに限らず、3DコンテンツやVRアプリに興味のある方にもオススメのサービスですよ。 【 nunuStudio 】 「nunuStudio」は、既存のWeb技術（Web GL, Web Audio, Web VR…）を融合して構築されているのが特徴で、3D描画は「Three.js」をベースにしており、物理エンジンは「cannon.js」を活用しています。 ■「nunuStudio」を始めよう！ それでは、実際に「nunuStudio」の開発エディタを使ってみましょう！ まず、サイトにアクセスしたら、トップ画面にあるボタンをクリックします。 いくつかの選択肢が表示されますが、ここでは「Web版」のボタンをクリッ
eeGeo eeGeoは、「グランド・セフト・オート」や「レミングス」などのクリエイティブディレクターであったイアン ヘザーリントン氏が2010年9月に設立した3D地図を提供する会社です。 日本では、NTTドコモがライセンス供与を受け、屋内3Dマップの提供などを行っています。 今のところ、日本では3Dで表示できる地域がないのですが、ゲーム業界のノウハウを用いた地図サービスとして個人的に期待しています。 登録すれば個人ユーザーでもAPIを使用することができるので、紹介がてらサンプルを載せておきます。 Web版サンプル example 公式サイトに登録し、ダッシュボードから「Create new app」ボタンをクリックして「API Token」を取得してください。 スタイルシートとライブラリを読み込みます。 <link href="https://cdnjs.cloudflare.com/a
きっかけ Blenderでアペンドミクさん表示したい。Blenderにpmxを読み込みレンダリングまで ↓ Unityでアペンドミクさん動かしたい。[MMD4Mecanimを使用してMMDモデルにUnityで踊って頂いてみた。] (http://qiita.com/hiroyuki_hon/items/931c79164b0ffe19517f) ↓ WEBブラウザ上でMMD動くの！？MMD on three.js / three.jsで遊んでみる（29） ↓ とりあえずWEBGLと物理エンジン試してみよう ←イマココ この記事で行うこと 下のアニメーションが動く所まで。 ammo.js (JavaScriptの3D物理エンジン) の簡単な使い方 three.js (JavaScriptの3D描画ライブラリ) の簡単な使い方 この記事で行わないこと ベクトルとか物理数学関係の計算 three
MMD(MikuMikuDance)で作成したファイルをウェブページ上に表示し、閲覧者が視点を自由に操作できるようにするJavaScriptライブラリが「jThree」です。ページ上にモデルを表示させるにはWindows 7を搭載したPCでChrome・FireFox・Operaを使えばOK。また、Macの場合はOperaならば同様にページ上で動作させることが可能なようです。 3DCGコンテンツをjQueryスタイルで作るJavaScriptライブラリ - jThree http://www.jthree.jp/ 実際にウェブページ上でどんなことができるようになるのかは以下のムービーを見れば分かります。 「jThree」を使うとウェブページ上でこんなことができるようになる - YouTube jThreeのトップページにはデモページが3つ用意してあるので、今回は「千本桜 + カゲロウデイズ
FirefoxでもなんとかCanvasの内容を動画にしたくて 以前の作品でChromeではWhammyを使うことで、楽勝でVideoタグ要素を動的に生成することに 成功していたのだが、WebPをサポートしていない？Firefoxは2014年現在もこいつが 動かないので、なんとか、動的に作成したCanvasイメージをpure javascriptで 保存したいという熱い思いを実現したw さらに2014年ちっくな手法の考察 ffmpegをemscriptenでjs化して、こいつを使えば、Firefoxでもvideoタグ要素 として動画を作れそう。 （WhammyのIssuesでも、そういう案が書き込まれていた。） Link antimatter15/jsgif リアルタイムでレイトレするすごい作品のオリジナル Real Time Ray Tracing by keim_at_Si Blog k
初心者でも絶対わかる、WebGLプログラミング＜three.js最初の一歩＞ 小山田 晃浩（株式会社 ピクセルグリッド） WebGLはとても高度な技術である一方、APIは低レベルであるためそのまま使うにはどうしても冗長な準備を行う必要があります。一方で、JavaScriptライブラリーを通して高レベルなAPIとしてWebGLを利用する方法があります。こうしたJavaScriptライブラリーとしてはthree.js、Away3D.js、Babylon.jsなどが有名です。その中でも特に人気があるthree.jsを通して、WebGLを利用する方法を解説します。(three.jsのリビジョンは執筆現在の最新であるr65を利用します) three.jsを手に入れる three.jsはhttp://threejs.org/から手に入れることができます。downloadから、zipファイルを手に入れま
サービス終了のお知らせ NAVERまとめは2020年9月30日をもちましてサービス終了いたしました。 約11年間、NAVERまとめをご利用・ご愛顧いただき誠にありがとうございました。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く