glTF Viewer
Drag-and-drop preview tool for glTF 2.0 3D models.
Blender2.8でglTFを出力
「glTFをThree.jsで読み込み」でglTFをThree.jsで読み込みましたが、その頃は3DCGを始めたばかりでわからないことも多く、Three.jsで読み込んだとき色や質感が再現できませんでした。最近Blender2.8が正式リリースされ、標準でglTFが出力できるようになったので、「BlenderでiPhoneXSを制作(2)」で制作したiPhoneXSをglTFで出力して、Three.jsで読み込んでみました。 Blenderにも慣れてきて参考書も出始めてきたので、そろそろBlender2.8を使い始めようと思います。 ● PBRマテリアルの設定 マテリアルとテクスチャを表示させるため、BlenderのプリンシプルBSDFでPBRマテリアルを設定します。PBR（物理ベースレンダリング）は現実の光学現象をシミュレートすることにより、リアルな質感を表現できるレンダリング方法です。
WebGLでなんか綺麗なキラキラなパーティクルの演出を作ってみた · けんごのお屋敷
元々 OpenGL を使っていたことがあって 3D の基礎についてはある程度わかっていたので WebGL には本当にすんなり入ることができた。WebGL は OpenGL ES の仕様を元にしているので当然といえば当然なのですが、他の OpenGL のプラットフォームと比べて WebGL はテキストエディタとブラウザさえあれば開発環境が整うという手軽さ、さらに WebGL 界隈ではとても有名な three.js というライブラリがあるおかげで、さらに敷居が下がってる。ということで、前々から WebGL で作ってみたかった綺麗でしなやかなパーティクルの演出を作ってみました。 The XSEEDS ※ちなみに XSEEDS というのは、有志で集まったエンジニアがお酒飲みながらワイワイ開発やってる集団です。 作ってみたので、せっかくなので WebGL ってこんなことができるよ、こうやって作れるん
three.js - mesh group example? (THREE.Object3D() advanced)
The dragging will be a bit more tricky because you need to work out where would the x/y positions of the mouse on the screen (screen space) will be in the 3D world, then you will need to cast a ray and check if it intersects the object you want to drag. I presume this will be a different question. Setting object hierarchy is fairly simple. As you hinted, you will use a THREE.Object3D instance to n
MMDLoader will be in Three.js r74 - やる気のないブログ(A boring diary)
THREE.MMDLoader which I've been developing will be available in Three.js r74. It was already merged into r74 dev. https://github.com/mrdoob/three.js/pull/7687 MMDLoader enables you to use MMD data on browser with Three.js. Demo: http://takahirox.github.io/three.js/examples/index.html#webgl_loader_mmd_stage (Sound comes out) http://takahirox.github.io/MMDLoader-app/index.html Source code: https://g
THREE.jsをサンプルのまま作るとCPU使用率が半端じゃない件 - tsuge development page
最初に、ここで使っているのはTHREE.jsのRev.49なのでそのつもりで。 バージョン違いの場合はまた別の解があるかもです。 THREE.jsをサンプルのまま作ると、デュアルCPUであろうと最大限にCPUを使ってくれて常時100％近い。 ちなみにグラフィックボードをちゃんと搭載しているPCなら別として、ビジネス向けノートPCなどソフトウェアでがんばってる場合ね。 Webサイト表示してCPU100％なんて、正直いやだよねと。 CPU時間なんて最近そんな気になるもんでもないけど、ノートは熱くなるし、バッテリの消費も早いし、どっちにしろ使用率は少ないに越したことないだろと。 サンプルでよく見るのはこういう処理。 function animate() { requestAnimationFrame(animate); render(); } function render() { render
安藤日記 [&] WebGL Performance Tuning
安藤日記 安藤日記：デジタルガジェット好き「安藤幸央」の日々のメモ ( yukio.andoh@gmail.com ) [ http://twitter.com/yukio_andoh ] Design Sprint Newsletter https://designsprint.substack.com/ ( via. Behind the magic of AKQA Winterlands ) #WebGL Performance Tuning WebGLコンテンツ／プログラムの速度をコツコツと速くするための、 パフォーマンスチューニング観点をまとめました。 まずはプロファイリングが重要。 闇雲にチューニングしても、あまり速くならない場合もあります。 また、最初の設計や、ハードウェア性能を知った上でのデータ量の見積もりも重要です。 ■WebGLプロファイリングのコツ ●グラフィックスパ
atpages.jp - このウェブサイトは販売用です！ - atpages リソースおよび情報
This webpage was generated by the domain owner using Sedo Domain Parking. Disclaimer: Sedo maintains no relationship with third party advertisers. Reference to any specific service or trade mark is not controlled by Sedo nor does it constitute or imply its association, endorsement or recommendation.
WebGL対応のライブラリThree.jsを爆速にする方法 | ClockMaker Blog
前回のWebGL(Three.js)とStage3D(Away3D)の比較ですが、Mr.doobさんを始め国内外の多くの方からご指摘頂きWebGL(Three.js)版を最適化したところ、最終的にはFlash(Away3D)版と同じぐらいのパフォーマンスになりました。当初、最適化・検証不足で間違った情報を掲載してしまい申し訳ありませんでした。 さて、そのWebGL(Three.js)版を最適化した手法が有意義だったのでシェアしたいと思います。 デモの紹介 まずはこちらの2つのデモの再生を比較してみてください。WebGL対応のブラウザ(例：Google Chrome)でご覧ください。 ▼最適化前 ▼最適化後 どうでしょう？ 圧倒的に後者のほうが滑らかに再生できているのではないかと思います。 後者のほうは配置している3Dのオブジェクト数が10倍近く多いにもかかわらずです。 ※ちなみにFlash
Three.jsで雪を降らせる
WebGL Advent Calender 16日目の記事です。 何番煎じかわからないですが、この季節ですのでThree.jsの入門用として雪っぽいのを降らせようと思います。 Three.jsで雪を降らせる デモ 基本的に通常のThree.jsでオブジェクトを表示させる時と同じで簡単です。 PointCloudMaterialに色とサイズとテクスチャを渡してマテリアルとしています。（いつのまにか名前が変わってました。） ちなみにテクスチャは見えにくいですがこんな感じです↓ これでPointCloudを生成してパーティクルを追加しています。（いつのまにかこれも名前がParticleSystemから変更されていました。） また、FogExp2でフォグを設定して、遠くのパーティクルを指定した色に近ずけて、霞んで見えるようにしています。 あとはこのPointCloudのy軸中心回転とパーティクルの
Blenderとthree.jsを使って行うモーフィングアニメーション | KnockKnock
今回は、Blenderでモデリング、アニメーションをつけて、JSON形式で書き出して、three.jsでJSONデータを読み込んで、モーフィングアニメーションを再現する流れを、ざっくりと説明出来ればと思います。 ソースコードは、以下よりダウンロード頂けます。 ソースコード モデリングとアニメーションの作成にBlenderを使っています。Blenderはオープンソース（無償）の3DCG制作ツール で、現時点での最新バージョンは2.72bになります。3DCG制作ツールはMayaや3dsMaxやLightwave3D等、高機能なプロ用ソフトが多くありますが、どれもそれなりの価格になります。Webコンテンツでの利用においては、レンダリングはあくまでブラウザ上なので、使う機能と言えば、せいぜいモデリングとアニメーション程度になり、高価で高機能な3DCG制作ツールは、オーバースペックだと思います。Bl
How to convert MMD files to JSON for three.js | Yomotsu net
I published a video, which is explaining the way to convert MMD files ( PMX and VMD ) to a JSON file for three.js. Here is it. The convert was operated on Blender. Preparation Check the language setting at preference to display Japanese characters. Install and activate following addons mmd-tools io_mesh_threejs Load MMD files Load a PMX file Select all bones Load a VMD file Bake Actionsome bones o
Three.jsでJSON形式でモデルを読み込んでBoneアニメーションさせるときの注意点 - Qiita
ちょっと（だいぶ？）ハマったのでメモ。 いやー、Three.jsはupdateが激しいのと、そもそも日本語記事が少ないのでだいぶ苦戦した。（というか、まだ全然しっかり把握できてないけど） とりあえず モデルを読み込んでアニメーションさせる 、というWebGLでなにかやるときに避けて通れない処理でハマったのでメモ。 まず結論から言うと、**Boneアニメーションをさせる際は、Boneの数が問題になる**ぽい。 boneの数はどうやら関係ないぽい。改めて書きだしてみたら正常にアニメーションしました。 ちなみにモデルデータはBlenderでThree.jsのJSON形式にExportしたものを使用。 Export設定 モデルを作成してBoneをいくつか適当に追加してから（17くらい？）Exportして読み込ませたところ、モデル自体は正常に読み込まれているものの、アニメーションしない。 試しにBo
日記 | ヨモツネット
blog移行しました。新しいblogで更新を続けています。 XMLェ… text ja 2012-07-08 http://www.yomotsu.net/wp/?p=603 XMLェ… 日々の出来事2012年7月8日日曜日 ブログ作りなおそうかなーと思って、この Webサイト をみなおしてたら、Web ページのメタ情報としてダブリンコア (RDF) を混在させていたことを思い出した。バリデーターにかければ、グラフも取り出せて みたいな感じになる。でも結局あまり意味なかったです多分。いまは OGP とかありますしね。 Web ページは XHTML にしてたけど、ブログのコメントで参照先のない数値参照とか混ぜられると XML パースエラーになるし、XML だから他の語彙混在できるけど、RDF くらいしか混ぜてなかったし、XHTML 意味なかったです多分。いまは HTML に SVG 混在でき
three.js で Blender のデータを表示してみるテスト - jsdo.it - Share JavaScript, HTML5 and CSS
three.js で Blender のデータを表示してみるテスト ＜対応した点＞ @boxheadroom さんの立体浮世絵データ（Blender形式）を three.js で表示してみました。 ＜手順＞ 1. Blender のダウンロード ■ Download Blender 2.72 for Windows http://www.blender.org/download/ 2. Blender のインストール 3. Blender にてデータ読み込み ■ 浮世絵をBlenderのsculptで立体っぽくしてみた http://boxheadroom.com/webgl/ukiyoe.zip 4. ポリゴン数削減 ■ Blenderを用いたポリゴン数削減 - 情報メディア実験 http://slis.tsukuba.ac.jp/~fujisawa.makoto.fu/lecture/
『Three.jsとBlenderによるWebGL』
1 pixel｜サイバーエージェント公式クリエイターズブログ サイバーエージェントのクリエイターの取り組みを紹介するオフィシャルブログです。最新技術への挑戦やサービス誕生の裏話、勉強会やイベントのレポートなどCAクリエイターの情報が満載です。 初めまして。 html5、javascript、flashなどのクライアント開発を メインに担当しております、 菅家(@KA_ka_YY)と申します。 弊社3月に行われました、エンジニア、デザイナーを対象とした アプリコンテストというイベントにて WebGLを使用した野球盤ゲームを作成しました。 その際利用したThree.js（WebGLのjavascriptライブラリ）を用いた WebGLの使用方法を紹介させていただこうと思います。 （1）レンダリングまずは Blender というフリーの3Dモデリングソフトで 以下のようなキャラクターを作りました
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CubeTexture orientation · Issue #16328 · mrdoob/three.js
Adreno 300 series GPU black texture flickering · Issue #9988 · mrdoob/three.js
THREE.MMDLoader / examples
SSSSLIDE
