[B! three.js] sawa_zenのブックマーク

sawa_zen id:sawa_zen

three.jsに関するsawa_zenのブックマーク (9)

安定しないフレームレートに効果的！ WebGLのカクつき対策まとめ（Three.js編） - ICS MEDIA
FlashのStage3Dや、WebGLの登場によってブラウザ上でも高度な3D表現ができるようになり、ウェブコンテンツの表現の幅が広がりました。しかし、高速と言ってもコンテンツの内容によっては処理負荷が高くなり、カクつきが生じる場合があります。カクつきはコンテンツの見栄えを損なわせ、作り手の想定とは異なる体験を与えてしまう可能性があります。そのような場合の対策として、本記事ではWebGLのカクつき解消方法をいくつか紹介します。解説用にカクつきの起こりやすい高負荷なデモを用意しました。本記事で紹介するカクつき解消方法はこのデモで実際に体験できるので、読み進めながら同時に触れておくとイメージがしやすいと思います。デモを別ウインドウで再生するソースコードを確認する ※このデモはThree.js(r141)とTypeScript 4.7とwebpack 5で作成しました。開発環境の構築は記事
sawa_zen 2016/07/11
安定しないフレームレートに効果的！ WebGLのカクつき対策まとめ(Three.js編)

WebGL

3d

three.js

js
リンク
three.js 用にボーンアニメを持つ 3D モデルを書き出すために | Yomotsu net
three.js は skeletal animation （ボーンやリグ）を持った 3D モデルを読み込み、再生することができます。3D モデルを three.js 用に書き出すため一番いいツールは Blender です。 Blender 上でボーンとアニメーションをつけていきます。Dope Sheet を使って、アニメーションを複数持たせると、three.js 上でも異なる複数のアニメーションとして利用することができます。なお、Blender 上のボーンをつけて書きだすまでの操作は動画にしているので合わせて参考にどうぞ。 1. アニメーションを Bake するFK のみでアニメーションをさせている場合には、この設定は必要ありません。 three.js 上では基本的に FK のみ対応しています。IK や物理演算による自動計算には対応していません。そのため、FK 以外で動かしているボーン
sawa_zen 2016/05/31
three.js
リンク
エフェクト作成入門講座 Three.js編 RPGのセーブポイント風の魔法陣 - ICS MEDIA
昨今のWebサイトではWebGLを利用した3Dコンテンツをしばしば見かけるようになってきました。WebGLに対応した端末が普及してきていることや、Three.jsなどのライブラリが充実していることもあり、実案件での採用が現実的になってきているからです。しかし、いざ3Dコンテンツを作ってみると、どこか味気のないものになってしまう事があります。そんな時はエフェクトの追加をオススメです。エフェクトを追加することで、コンテンツの見栄えが派手になったり、キャラやゲームの状態が伝わりやすくなります。今回エフェクトの例として、RPGのセーブポイントや回復ポイントで使用されそうなデモを制作してみました。デモを別ウインドウで再生するソースコードを見る ※このデモはThree.js r146とTypeScript 4.9によって書かれています。本記事では、セーブポイント風なエフェクトの作成を通して、T
sawa_zen 2016/03/23
three.js

WebGL

3d
リンク
[WebGL] Three.jsで、オブジェクトの「前方ベクトル」を取得する - Qiita
UnityではGameObjectのtransf ormにforwardが定義されていて、ワールド空間上で「前方はどちらか」というのが取得できます。ゲームに限らず、「オブジェクトの前方」を取得したいケースはあると思います。ということで、Three.jsでこの「オブジェクトの前方」ベクトルを取得するメモです。実際に動くサンプルをjsdo.itにあげてあります。つまりは「Z軸がどちらを向いているか」実際やることはとても簡単です。なにを持って前方か、というと、つまりは「Z軸が現在どこを向いているか」が分かれば求めたいベクトルが得られます。よく参考にさせてもらっているサイト（その39 知っていると便利？ワールド変換行列から情報を抜き出そう）にその答えがあります。ワールド変換行列が得られればあとは簡単な掛け算で求めることができます。原理、概要については上記サイトを見てください。 4次
sawa_zen 2016/02/18
three.js

ベクトル
リンク
Buy Instagram Likes - 100% Real & Instant | Just $1.49
Buy Instagram Likes with Instant Delivery Likes on Instagram can improve your brand’s engagement numbers. When you buy Instagram likes you get more engagement on your profile which means more reputation. Instagram likes are a good metric to measure your success.
sawa_zen 2016/01/08
EARTH

BUMP

STAR

sphere

three.js
リンク
Three.js　クォータニオン（Quaternion）による回転 - Three.jsを使って、作ってみた
今回は、Three.jsの「クォータニオン（Quaternion）」について書きます。クォータニオン（Quaternion）は、簡単に言いますと、物体を回転させる方法です。以前にも、物体を回転させる方法について書きましたが、それとは別のやり方です。以前のやり方は、オイラー角による回転で、今回は、クォータニオン（Quaternion）による回転です。クォータニオンについて、専門的に知りたい人は、コチラを見てください。その10 クォータニオンを学んでみよう！四元数 - Wikipedia まずは、コードから～クォータニオンはオイラー角より、複雑なコードを書きます。実際のコードはコチラです。 //cubeは直方体（CubeGeometry）のジオメトリです。 //クォータニオン利用の宣言（必須） cube.useQuaternion = true; //回転軸ベクトルの宣言・規格
sawa_zen 2016/01/07
Quaternion

three.js

AXIS

クォータニオン
リンク
wgld.org | WebGL: クォータニオンと球面線形補間 |
sawa_zen 2016/01/07
three.js

Quaternion
リンク
クォータニオンによる視点の移動（WebGL（Three.js））
特定非営利活動法人natural science は、知的好奇心がもたらす心豊かな社会の創造にむけて、現代社会では実感する機会の少ない科学や技術のプロセスを可視化・共有化する場づくりを通じて、科学を切り口とした地域づくりを目指す、若手主体の団体です。　|　More ≫ ３次元空間中の物体を任意の軸に対して、任意の角度回転させることを考えます。これは、コンピュータグラフィックなどの世界で、マウス操作などの入力装置を利用して３次元の物体の向きを変更させたいときに必須となります。一般的に「回転」といえば「オイラー角」を思い浮かべるわけですが、任意の軸に対する回転は不得意であることが知られています。それは、任意の軸に対する回転に対応する３つのオイラー角が直感的には定式化できないためです。また、場合によってはジンバルロックと呼ばれるオイラー角を利用時に特定の条件で発生する特有の問題もあり
sawa_zen 2016/01/07
three.js

Quaternion
リンク
[Three.js] Quaternionを使ってオブジェクトを向かせたい方向に向かせる - jsdo.it - Share JavaScript, HTML5 and CSS
任意のベクトルの方向にオブジェクトを向けるこちらの記事を参考にしました例えば、キャラクターを坂に載せるとき、頭の方向をその斜面に垂直にしたい、みたいなときがあると思います。そうしたときに使えるテクニック。というか、とあるベクトルと平行になるように回転させる、という目的にも使えます。 (function (win, doc) { var SCREEN_WIDTH = window.innerWidth; var SCREEN_HEIGHT= window.innerHeight; var camera, scene, renderer; var logEl; var mesh; var normal = null; function log(mes) { logEl.innerHTML = mes; } /* * 初期化 */ var init = function() { { /
sawa_zen 2016/01/07
javascript

AXIS

three.js

Quaternion
リンク
1