Ichitaro Masuda

Playing with three.js. Demo: carla-trail.vercel.app Code: github.com/ichitaro/carla… #threejs #threejsjourney #webgl #creativecoding

@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.

Finally finished the ✨ Custom Three.js Toon Shader ✨ tutorial! #threejs #shader #webgl maya-ndljk.com/blog/threejs-b…

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

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

@masudaaa This is the most beautiful thing I've seen today! Is it possible to get a 3d model of some paused moment?

Playing with three.js. Demo: carla-trail.vercel.app Code: github.com/ichitaro/carla… #threejs #threejsjourney #webgl #creativecoding

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

@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.

@masudaaa No worries. My latest demo also doesn't work properly on this specific software+hardware combination :(

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

@masudaaa although human motion to digital flow has been around ever since @mattpyke started tinkering around with it, and i must admit i felt it was overused, i really love this

This is awesome. Be sure to check out the demo

FPS非依存lerpの係数の公式 logmi.jp/tech/articles/… よく忘れるからとても助かります🙏

Very inspiring. sketchfab.com/kanistra/models To me it looks like the ultimate vertex attribute.

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

@masudaaa Buggy on Google Chrome, MBP 2019 w/ Radeon GPU:

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.

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.

inspired by Curl Flow created by @masudaaa #threejs ◇app nemutas.github.io/rhombus-flow/ ◇repo github.com/nemutas/rhombu…

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

@masudaaa たしかに…コンテンツが動的に変化したり、cssに指定されたものを検知して取得すのは難しそうですね。 検知できたとしてもテクスチャー生成し直すのにラグがありそうですし…

これ、domの文字にどうやってエフェクトかけてるんだろう？🤔 アニメーションの瞬間に、opacityが0になってるから、スクロールした瞬間にテクスチャー化してる感じなのかな？

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

@masudaaa @amagi 自分もdomのimgとcanvasのplaneを同期させるような処理を作ったことがあるのですが、結構簡単にできてしまったので、ライブラリ化するほどでもないかなぁ…みたいに考える方が多いのかもですね。

@focru_ino @amagi DOMをキャプるという発想ではないですが、DOMとThreeのシーンを連動させる試みもあり、何かバニラでいいNPMが誕生しないかなと思いますが、不思議と誕生しない秘伝のタレ。 #scrollcontrols" target="_blank" rel="nofollow noopener">github.com/pmndrs/drei#sc…

@focru_ino @amagi さんの react-vfx も参考になると思います。 WebGLコンテキストの最大数の制限もあるため、恐らくこういうコードを各プロダクション再発明してる状況なのかなーと・・。 r105.threejsfundamentals.org/threejs/lesson…

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

@masudaaa さんの作品があまりにもすごすぎたのでクローンを作った。 技術的には、 ・instancedMesh ・GPUComputationRenderer ・quaternionを使った回転 を使った。 #threejs