Three.jsでクリフォード・アトラクターを描写してみました。楽しかった！！ 美しいけど、粒子を動かすとGPUが悲鳴を…💦 描写負荷を抑える工夫、これから試していきます。 #threejs pic.x.com/FWXoHHTn9y

playknot.co.jp シンプルで良い感じにできた #webgl #threejs pic.x.com/w7n2TfYIDM

通常は3Dソフトで作るモデルの形状、Bone、アニメーションを、Three.js のコードのみで動的に生成しています。 コード生成とアイデアは Gemini 2.5 Pro。 #bone #skeletalanimation #threejs #gemini #llm #ai pic.x.com/VjCbWNSLby

水面を実装しました。3パターンです。 コードは Gemini 2.5 Pro の生成。 #watersurface #water #threejs #gemini #llm #ai pic.x.com/ayU0JBQ1lK

立方体の中に10000個の点を配置。 何もしないと点は四角で表示される。 #YAP #YAP升田 #threejs pic.x.com/eQX0gmQ8Xh

ヤドカリの3Dモデルを配置しました。 1. 画像生成: Imagen3 2. 背景除去: FLUX.1 Kontext 3. 3Dモデル化: Tripo v2.5 4. Gemini 2.5 Pro に glb ファイルのパスを指定して登場する様に指示 #flux #kontext #tripo #threejs #imagen3 #gemini #llm #ai pic.x.com/YMnvJT3xLZ

Blender API で生成したポリゴンメッシュに、トリプラナーマッピングを適用しました。 今回の手法は洞窟のように上部が覆われた地形も表現できます。 コードは Gemini 2.5 Pro の生成。 #blender #api #threejs #gemini #llm #ai pic.x.com/jsEcRp4E11

地形データのロード機能を実装。 Blender API でハイトマップから生成されたポリゴンメッシュを読み込みます。 コードは Gemini 2.5 Pro の生成。 #heightmap #blender #api #threejs #gemini #llm #ai pic.x.com/L7sPaJfaor

Triplanar Mapping の実装。 3枚のテクスチャをXYZ軸から投影し、シームレスに合成する技術です。 テクスチャは Imagen3、コードは Gemini 2.5 Pro。 #triplanar #mapping #texture #threejs #gemini #llm #ai pic.x.com/QLJuydOhJN

天井のケーブルからのゴッドレイが、素晴らしい視覚効果を生み出します。 The god rays from the cables on the ceiling create a stunning visual effect. #しろぽと #shirospot #ホラー #ゲーム制作 #gamedev #indiedev #threejs #webgl #screenshotsaturday #スーパーゲ制デー pic.x.com/SoVxhlDd8h

剣と杖を拾って装備できるようになりました。 Gemini に初期装備を準備してと伝えると木剣になりました。 コードの生成はすべて Gemini 2.5 Pro。 #equip #sword #wand #gamepad #threejs #gemini #llm #ai pic.x.com/UelZZvX6Yb

そういえば、最強のポートフォリオ作りました！ 最近はこれと一緒に色んなイベントに参戦してます😁 rimpei-hata.vercel.app 使用技術たち⬇️ #threejsJourney #Threejs #R3F #blender #Reactjs #Swift #vercel #GAS pic.x.com/q2tfkByv0L

texture splatting (地形の表現) 1. MeshStandardMaterial: 単一テクスチャの繰り返し 2. ShaderMaterial: 複数テクスチャを貼れるが、GLSLでシェーダーを独自に書く 3. MeshStandardMaterial + onBeforeCompile: 標準機能を継承して、シェーダーの一部を書く #glsl #threejs #gemini #llm #ai pic.x.com/yPhYGw9rwS

実装を担当しました！ 前回のAI MODELに引き続き今回も実装に苦労した点が多々ありましたが、しゅんすけさんとコミュニケーションを密に取りながら進めたことで、リッチで素敵なサイトに仕上がったと思います😌 見ていただけると嬉しいです🙏 work-with-art.museumtower-kyobashi.com #gsap #lenis #swup #threejs x.com/quagra/status/…

BMSG FES'25 ティザーサイト 🔗 bmsgfes.tokyo BMSG所属アーティストによる大規模フェス「BMSG FES'25」のティザーサイトを制作させていただきました。 Proud to share our latest project : the teaser site for BMSG FES'25. @BMSG_official #BMSGFES #BM5G #BMSG #webGL #threejs pic.x.com/xFVFlRybR8

剣ジェネレーターを作りました。 作った剣は WebSocket でリアルタイムに、プレイ画面に転送できます。 コードの生成は Gemini 2.5 Pro です。 #generator #sword #websocket #rapierjs #threejs #gemini #llm #ai pic.x.com/66cwdOoO2V

ウィンドウシステムを追加し、装備を変更できるようにしました。 ウィンドウから剣・杖を選択すると、キャラクターの外見にリアルタイムで反映されます。 コードはすべて Gemini 2.5 Pro の生成。 #windowsystem #sword #wand #gamepad #threejs #gemini #llm #ai pic.x.com/K0ey1nqCpU

冒険の始まりの町。 プロンプトは「シーンを中世ファンタジーの冒険始まりの町に変えてください」です。 単に新しいシーンを生成するだけでなく、既存の動作するプログラムにあわせて該当箇所を書き換えてくれました。 コード生成は Gemini 2.5 Pro。 #hometown #threejs #gemini #llm #ai pic.x.com/kq6SBHAcJw

@codrops 様にお声がけいただき、以前制作したメタボールのデモと、その解説記事を寄稿しました。よろしければ、ご覧いただけますと幸いです。 #webgl #threejs #glsl tympanus.net/codrops/2025/0… x.com/_koji014/statu…

WebGLに再入門するぞの決意記事を書きました。 毎日更新してくぜ～。 #Webgl #threejs #フロントエンド 今度こそWebGLに入門する｜TRHR_CORE #AIとやってみた note.com/trhr_core/n/na…

戦士の操作デモ。 Mixamo のアニメーションをブレンドし、スムーズにつながる動きを作りました。 大剣の動きと形も手動ではなく「手の位置から大剣の位置と方向を推定し描画する」という指示のみ。 コード生成は Gemini 2.5 Pro。 #fighter #sword #gamepad #mixamo #threejs #gemini #llm #ai pic.x.com/N2Ybd0VEBq

羽織の透け感のシミュレーション． 絽，紗やオーガンジーなどどこまで再現できるかな． #着物 #Threejs #デジタルファッション #WebGL #着物コーデツール #KimonoStyler pic.x.com/KQOQNgXw1q

紹介動画 #indiegamedev #threejs #ケモノ pic.x.com/jRclmtGWNZ

生成したローグライクマップを探索している様子です。 #roguelike #map #threejs #gemini #llm #ai pic.x.com/XWxDpwlxOz

ローグライクゲームのマップジェネレーター。 これもプロンプト1回でできます。 Gemini 2.5 Pro で生成。 #roguelike #map #generator #procedural #threejs #gemini #llm #ai pic.x.com/WHJVdKKFq5

新しいwebコンテンツを公開しました！❤️❤️ Three.jsで制作した作品の投稿は初めてです。 良かったら見て頂けると嬉しいです。 #threejs #ケモノ #ケモナーさんと繋がりたい #やさしくかがやくユミノ 現実時間と連動した、うちの子の日常【JavaScript】 - Yuki Yamane yukiyamane.com/content_3/3d_g…

自分が作ったステージを再訪するのは、十分に覚えていないからです。 I revisit the stages I created because I don't remember them well enough. #しろぽと #shirospot #ホラー #ゲーム制作 #gamedev #indiedev #threejs #webgl #screenshotsaturday pic.x.com/5LlqbpV2py

ファイヤーボール(ボルト)を追加しました。 ゲームパッドは非アクティブなブラウザタブにも入力を送れるので、一人二役でキャラクターを操作しています。 全てのコードは Gemini 2.5 Pro の生成です。 #firebolt #fireball #cast #magic #gamepad #websocket #mixamo #threejs #gemini #llm #ai pic.x.com/iMIeZBnpTf

動画のシーン切り替えでよく見るやつ #webgl #threejs pic.x.com/gEIQpq0pyo

迷路生成機能とプレイ画面は、独立したプログラムとして実装しています。 その2つをWebSocketで接続し、生成した迷路データをプレイ画面に送信する仕組みです。 コード生成は Gemini 2.5 Pro。 #maze #architecture #websocket #3d #threejs #gemini #llm #ai pic.x.com/9SF1ZUSYp6

作品全体に通底する「コンテクスト」は、作品を正しく、深く理解する上でとても大切。しかしデザイナーとしてそれを視覚的かつ直接的にどう伝えるか？ この記事では、その問いにどう向き合ったかを紹介しています。 🔗medium.com/@toshihito.end… #ウェブデザイン #Threejs #UXデザイン

DDDDboxのテックブログ始めました。 Posted to Hatena Blog カメラ設定の基本ガイド：Three.jsとReact Three Fiber - DDDDbox Tech Blog ddddbox.tech/entry/2025/06/… #はてなブログ #WEBBIM #エンジニアリング #Threejs #reactthreefiber

WebSocketのクライアントサーバーの仕組みを追加し、マルチプレイヤー化。 リアルタイムで3D空間を共有できるようになりました。 手を振る機能も付けました。 コードの生成は Gemini 2.5 Pro です。 #multiplayer #online #wave #3d #rapierjs #threejs #gemini #llm #ai pic.x.com/BFEUgGur0S

キャラクターが歩ける迷路を作りました。 コード生成は Gemini 2.5 Pro です。 #maze #structure #threejs #gemini #llm #ai pic.x.com/ZdLnCMc4Eg

ウェブブラウザで着物の色柄をコーディネートできる「着物コーデツール KimonoStyler(仮)」開発中． 羽織・着物・帯などパーツごとに色と素材感を選べるようになりました👘✨ 今のところ男性で進めていますが，女性も選択できるように作る予定です． #着物 #Threejs #デジタルファッション #WebGL pic.x.com/iUD8XSBjpa

Three.jsシーンにRapier.js組み込んで、物理ベースの地形インタラクションを実現。 3日でこの3Dアクションの基本形が完成しました。 ・kinematic CharacterControllerを使用 ・フィールドに壁とスロープを配置 ・コードはGemini 2.5 Proで生成し手動は1行もなし #gamepad #rapierjs #threejs #gemini pic.x.com/SgyClrMcu5

ジャンプアニメーションのブレンドがおかしく見えたので、プレビューツールを作って確認したところ、ジャンプのアニメーションが左右逆でした。 Mixamo からダウンロードした時点でそうなっているようです。今回の動画は作り直したもの。 #gamepad #threejs #mixamo #gemini #llm #ai pic.x.com/Ggd9hJMcRh

ジャンプも追加しました。 #jump #gamepad #threejs #gemini pic.x.com/Sn4wPt39v0

ブラウザ上で、ゲームパッドを使ってキャラクターを動かせるようになりました。 操作感はふつうのTPSのようにスムーズ。 待機・歩く・走るの3つのアニメーションも、自然に繋がっています。 コードの生成はGemini 2.5 Pro。 #gamepad #player #tps #threejs #javascript #mixamo #gemini #llm #ai pic.x.com/oXcuN3xgxf