以前、 Three.js で EffectComposer の UnrealBloomPass を試しました。blog.kimizuka.org今回は、EffectComposer の GlitchPass を試してみました。 DEMO https://kimizuka-org-git-r154-kimizuka.vercel.app/glitch-passグリッチが掛かります。 ソースコー…

先日、 Blenderでオブジェクトを発光させました が、今回はThree.jsでオブジェクトを発光させる手順のメモです。 Three.jsとNext.jsを使っていますが、本質的な部分としては Three.jsのEffectComposer と postprocessing unreal bloom を使って実装します。t…

トゥーンレンダリングに憧れて色々試してみました。 使える場所はかなり限定されるのですが、❶ OrthographicCamera を使う ❷ MeshToonMaterial を使ったオブジェクトを作る ❸ ❷で作ったオブジェクトと同じ形で少し大きなオブジェクトを MeshBasicMaterial を…

前回の検証 のイメージトラッキング（NFT）版です。 結論としては、前回の結果と全く同様でした。ARとしてはARオブジェクトの位置を合わせるのが難しく、ちょっと実戦で使用するのは厳しいかなという印象だったイメージトラッキングですが、簡単な画像認証の…

かつて、 A-Frameでマーカーの検知イベントを使ったこと がありましたが、今回はThree.jsで実装してみます。blog.kimizuka.org といっても、A-Frameも内部ではThree.jsを使っているので、実装方法はほとんど変わりません。 ただし、認識時のイベント（marker…

いわゆるひとつのクロマキー合成です。❶ 背景が単色の動画をつくる ❷ 動画の背景色を透明に置き換えてCanvasにレンダリングする ❸ Canvasを CanvasTexture に設定するという流れで実装します。 ❶ 背景が単色の動画をつくる ひさしぶりに Animate を使ってつ…

ar-js-org.github.ioAR.jsのドキュメント にはA-Frame用を使ったコードが記載されているのですが、Three.jsを使った実装も検証します。 結論 先に結論を書いておきます。 A-Frame を使っても Three.js を使ってもイメージトラッキングの実装は可能でした。 …

最近は、もっぱらAR.jsの検証を行なっていますが、2つのマーカーを同時に認識できるかを検証しました。結果としては、PC版のChromeでも、mobile Safariでも、同時に認識できました。 いくつまで同時にいけるか試そうかとも思ったのですが、今回は一旦2つまで…

これまで、ARマーカーは白黒の画像で作成してきました。 しかし、 こちらのサイト でデフォルトで表示されている画像は青が入っていて、ずーっと気になってました。jeromeetienne.github.ioというのも、pattern-marker.pattをテキストエディタで開いてみると…

AR.jsの/three.js/examples/mobile-performance.htmlというサンプルを見ていて、THREEx.ArSmoothedControlsというものを見つけました。github.com早速、サンプルのコードを参考に 以前のコード を修正してみました。blog.kimizuka.org ソースコード（全文） …

こちらのサイト でARマーカーを作成とする際、Pattern Ratioを変更するとマーカーにする画像の大きさを変更することができるので、結果として相対的に縁の太さを変更することができます。jeromeetienne.github.ioただ、Pattern Ratioを0.5以外に設定した場合…

これまで、 A-Frameを使ったWebAR を実装して来たり、 AR.js + Three.js + Next.jsを使ったWebAR を実装してきたりしました。blog.kimizuka.org blog.kimizuka.org今回は極限までシンプルに、必要最低限のライブラリ（AR.js + Three.js）のみを使って、画面…

MeshMatcapMaterial をつかって、光表現のベイクを検証しました。基本的には、 こちらのドキュメント と こちらのサンプル の通り実装した感じです。threejs.org threejs.org ソースコード（抜粋） const matcap = new THREE.TextureLoader().load('/img/mat…

DEMO kimizuka.org左上のボタンを押すとカメラの位置がスムーズに移動します。 今回の例だとcubeのscaleを変えるのと見栄えは変わらないですが、しっかりとカメラを動かしています。 ソースコード（抜粋） const maxRange = 16; const minRange = 2; export …

React + Three.jsでウェブサイトを作る際、こんな感じのカスタムフックを使って、WebGLRenderer、PerspectiveCamera、Sceneを取得しています。 useThree.tsx import { useEffect, useState } from 'react'; import * as THREE from '~/build/three.module'; …

morphTargetInfluences をつかったモーフィングを試してみました。threejs.org基本的には、こちらの サンプル をNext.jsに移植した感じですが、抜粋したソースコードはReactを使っていなくとも同じ書き方になる部分です。threejs.org ソースコード（抜粋） c…

以前、Three.jsでクリックされたオブジェクトを判定する際に使った、THREE.Raycasterを再び調査しました。blog.kimizuka.orgthreejs.orgクリックされたオブジェクトの判定では、Raycaster.setFromCameraというメソットを使い、クリックされた点の直線上に存…

複数のカメラをスイッチングしたいなと思って、いろいろ試しました。 しかし、なんら難しいことはなく、結論から書くと、カメラを複数用意して、renderer.renderに渡し直してあげれば実現できました。 DEMO ソースコード（抜粋） const renderer = new THREE…

ソースコード抜粋 // three.js r127 にて検証 const fontLoader = new THREE.FontLoader(); // ローダーのインスタンスをつくる fontLoader.load('/scripts/m-plus-1-code-bold.json', (font) => { // typeface.jsを読み込む const textGeometry = new THREE…

まだ片手にしか対応できてませんが、コントローラーでオブジェクトを掴むことができるWebVRをつくりました。 cannon.jsで物理演算しているので、掴んだオブジェクトを放り投げることもできます。 DEMO kimizuka.org 実装方針 マウスで3Dオブジェクトを掴んで…

Cannon.js + Three.js + React.jsで、 マウス座標に応じて床を傾ける 四方を見えない壁で囲う という空間を作って、そのな簡易3Dの球を配置してみました。 DEMO kimizuka.org ソースコード（抜粋） function handleMouseMove(evt) { const deg = 12; const x…

Three.js（r127）で開発していたサイトで、Three.jsのバージョンをr136まで上げてみたところ、glTFファイルの色味が若干薄暗くなりました。 r127 r136 直感的に、 renderer.outputEncoding = THREE.GammaEncoding; の部分が効いていないのだと思い、調査して…

前回は、worldにaddBodyしたCannon.BodyとaddBodyしていないCannon.Bodyに対してPointToPointConstraintを使いました。blog.kimizuka.org今回はPointToPointConstraintの引数に、worldにaddBodyしたCannon.Bodyを2つ渡してみます。 結論としては同じ座標（中…

前回、Cannon.jsを使ってオブジェクトをマウスで掴んで放り投げるモック をつくりました。blog.kimizuka.orgつくりました。が。いきなり盛り盛りすぎたので、要素を分解して検証していきたいと思います。今回は、ものすごくシンプルに、マウスダウン 自分の…

Cannon.js + Three.jsを使って、マウスでオブジェクトを掴めるようにしてみました。 物理演算をしているので放り投げることもできます。ざっくりとした流れとしては、❶ Cannon.jsで計算用のworldをつくる ❷ 毎フレーム、Cannon.jsでオブジェクトの位置を計算…

Cannon.js + Three.jsでオブジェクトの位置を物理演算で算出してみました。ざっくりとした流れとしては、❶ Cannon.jsで計算用のworldをつくる ❷ 毎フレーム、Cannon.jsでオブジェクトの位置を計算する ❸ 毎フレーム、Three.jsのオブジェクトの位置と姿勢をCa…

AR.js + Three.js + Next.js（React.js） でWebARコンテンツを作る際、AR.jsの読み込みをどうするのがスマートなのか、ずーっと悩んでいたのですが、とりあえずカスタムフックを作ってみました。 ソースコード useMakerAr.js import { useEffect, useState }…

blog.kimizuka.orgかつて、 controllerModel.motionController.data にアクセスすることで強引に取得していた、トリガー、A、B、X、Yボタンの状態ですが、VRボタンを、Three.jsのVRButton.jsからImmersive Webのwebxr-button.jsへ切り替えたところ、スマート…

immersive-web.github.io ことの発端 普段はThree.jsでWebVRコンテンツをつくっているので、Three.jsのVRButton.jsを使っています。github.comしかし、以前、gamepadにアクセスしようとした際、sessionが隠蔽されており、外部からスマートにアクセスする方法…

DEMO Oculus Quest用 DEMO 👉 https://kimizuka.org/mock/r127/vr-collision Oculus Rift用 DEMO 👉 https://kimizuka.org/mock/r111/vr-collision※ r111はコントローラーの位置にCubeが表示されます 解説 こちらの記事で作ったコードを改造して、VRコントローラ…