Ichitaro Masuda

[Ichitaro Masuda @masudaaa]

Playing with three.js.

Demo: https://t.co/faHo362jiS
Code: https://t.co/GEo1NU4Sb2

#threejs #threejsjourney #webgl #creativecoding

[Ichitaro Masuda @masudaaa]

@maya_ndljk @threejs Thanks for the great tutorial!

I don't know of many articles that teach how to reuse Three.js built-in shader chunks, so this is very helpful.

[Ichitaro Masuda @masudaaa]

Of course I went with Pro, but the main reason for the bandwidth overage was that I skimped on DRACO compression for GLTF.

[Ichitaro Masuda @masudaaa]

@NadiaIrreal Thank you! Unfortunately much of the data is on the GPU side and cannot be easily exported. 🙏

[Ichitaro Masuda @masudaaa]

Playing with three.js.

Demo: https://t.co/faHo362jiS
Code: https://t.co/GEo1NU4Sb2

#threejs #threejsjourney #webgl #creativecoding

[Ichitaro Masuda @masudaaa]

@JamesWestonson @mrdoob Thank you! You are absolutely right.

[Ichitaro Masuda @masudaaa]

@keaukraine Actually, my environment is also iMac2019 + Big Sur + Radeon Pro 580X, but unfortunately I am getting 0.5 FPS in Chrome.

In Three.js, using WebGL1Renderer may improve this.

[Ichitaro Masuda @masudaaa]

@arielko2 @mattpyke Thank you! I am also a big fan of his work!

[Ichitaro Masuda @masudaaa]

FPS非依存lerpの係数の公式
https://t.co/Mhiwxy8sb0

よく忘れるからとても助かります🙏

[Ichitaro Masuda @masudaaa]

Very inspiring.
https://t.co/nWOgBoVv4Y

To me it looks like the ultimate vertex attribute.

[Ichitaro Masuda @masudaaa]

@keaukraine Thanks for reporting back! Sorry, I am not sure if it will work in many environments.

[Ichitaro Masuda @masudaaa]

I wanted to experiment with geometry running in real time, but GPGPU via textures is difficult because of the many indirect references. 😱

Please let me know if there is a better way.

[Ichitaro Masuda @masudaaa]

This time it may be slow on mobile devices. You can reduce the load with "drawAmount" in Controls.

Technically, the position and normals of the triangles are computed with vertex shaders using Render Target Texture.

[ふぉくる @focru_ino]

inspired by Curl Flow created by @masudaaa
#threejs

◇app
https://t.co/ge0rj8mx8a

◇repo
https://t.co/84MiK5VlBl

[Ichitaro Masuda @masudaaa]

@focru_ino 興味深い話題を代弁していただいたのでつい反応してしまいました🙏

[Ichitaro Masuda @masudaaa]

@focru_ino 同様です。<picture>でブレークポイントでソース画像が変わったり、css背景画像にも対応する場合など、私は結構めんどくさいと思ってしまいました。だからこそ状況を限定してライブラリ化しない方が早いわけですが、他の方どうアプローチしてるか気になってます。

[Ichitaro Masuda @masudaaa]

@focru_ino @amagi DOMをキャプるという発想ではないですが、DOMとThreeのシーンを連動させる試みもあり、何かバニラでいいNPMが誕生しないかなと思いますが、不思議と誕生しない秘伝のタレ。
https://t.co/l5aQyUxMMh

[Ichitaro Masuda @masudaaa]

@focru_ino @amagi さんの react-vfx も参考になると思います。

WebGLコンテキストの最大数の制限もあるため、恐らくこういうコードを各プロダクション再発明してる状況なのかなーと・・。
https://t.co/HHYo4dcb9T

[Ichitaro Masuda @masudaaa]

@focru_ino @amagi @amagitakayosi さんです🙏🙏🙏

[ふぉくる @focru_ino]

@masudaaa さんの作品があまりにもすごすぎたのでクローンを作った。

技術的には、
・instancedMesh
・GPUComputationRenderer
・quaternionを使った回転
を使った。
#threejs