好奇心の赴くままに。気になったことを、気ままに深掘り

カテゴリー: WEB

Web制作、プログラミング備忘録、WordPress、Blender、React Three Fiber、p5.jsを使ったデジタルものづくりの記録。

  • WordPressプラグイン・Viteの開発環境・ショートコード

    WordPressプラグイン・Viteの開発環境・ショートコード

    目的は、ショートコードごとに異なるエフェクトを提供するプラグインを作成することです 🚀 WebGL Effects Collection プラグ…

  • Blender / アニメーションの概要

    Blender / アニメーションの概要

    Blenderで作成したモデルとアニメーションをエクスポートしてthree.jsで利用するための備忘録です 🚀 実際のデモ画面を見る はじめに …

  • Three.js/シェーダー(GLSL)その3

    Three.js/シェーダー(GLSL)その3

    座標系について オブジェクトにテクスチャやパターンをどのように適用するか? 今までは、平面にUV座標を利用して描画していました 平面上にさまざまなパターンを描く…

  • Blender / レンダリング(カメラ・ライト)

    Blender / レンダリング(カメラ・ライト)

    はじめに わたしは、Web制作における3Dコンテンツの活用を目的としてBlenderを使用しています 通常、Three.jsのようなライブラリを用いてWeb上で…

  • Blender / シェーディング(マテリアル・テクスチャ)

    Blender / シェーディング(マテリアル・テクスチャ)

    はじめに 「シェーディング」とは、3Dオブジェクトが光とどう反応するかを決める作業のことですこれには、マテリアル(素材の設定)やテクスチャ、ライト(光源)、シー…

  • Blender / ポリゴンモデリング備忘録

    Blender / ポリゴンモデリング備忘録

    Three.jsで利用することを目的に、Blenderの基本的な操作を備忘録として残します オブジェクトとメッシュの違い オブジェクト*シーン内の3Dデータを表…

  • Blenderの使い方1(基本的な操作と概要)

    Blenderの使い方1(基本的な操作と概要)

    はじめに Three.jsで利用することを目的に、Blenderの基本的な操作を備忘録として残します 注意私はMacユーザーで、Blenderの操作にはAppl…

  • グラフィックスのための基礎知識とWebGL

    グラフィックスのための基礎知識とWebGL

    AIと会話するのに困らない程度のコンピュータグラフィックスについての基礎知識だけ^^;勉強しようと思います コンピュータグラフィックスの基本概念と用語 と、th…

  • Three.jsパフォーマンス最適化についてのまとめ

    Three.jsパフォーマンス最適化についてのまとめ

    はじめに インタラクティブなウェブサイトのパフォーマンス最適化について スムーズな体験とデバイスの負担のバランスユーザーにスムーズで快適な体験を提供することデバ…

  • Three.js/シェーダー(GLSL)その2

    Three.js/シェーダー(GLSL)その2

    ポストプロセッシング ポストプロセッシングは最終的な画像(レンダリング)にエフェクトを加えることです。 Three.jsでは、これらの「エフェクト」を「パス」と…

  • Three.js/シェーダー(GLSL)その1

    Three.js/シェーダー(GLSL)その1

    シェーダーの概要 シェーダーはGPU上で実行されるGLSL(プログラミング言語)で記述されます 頂点シェーダーとフラグメントシェーダージオメトリの各頂点を配置し…

  • Three.js アニメーション システム(Mixamoアニメーションの統合)

    Three.js アニメーション システム(Mixamoアニメーションの統合)

    Three.jsのアニメーションシステムの概要 Three.jsのアニメーションシステムは、「キーフレーム」を使ってオブジェクトの動きを定義します 以下の主要な…

  • Three.js備忘録(6)

    Three.js備忘録(6)

    物理演算を追加する 物体が現実世界のように動く(物理法則に基づいた挙動)と、ユーザー体験が向上します。 基本的なステップ three.jsと一緒によく使われる物…

  • Three.js備忘録(5)

    Three.js備忘録(5)

    レスポンシブ ビューポートの設定、カメラのFOV(Field of View: 視野角)とアスペクト比は、Three.jsで3Dコンテンツを表示する際に、特にス…

  • Web Audio API

    Web Audio API

    Web Audio API使うことで、音声ファイルを再生したり、音量を調整したり、さまざまなエフェクトを適用したりできます。 Web Audio APIはウェブ…

  • p5.sound

    p5.sound

    p5.soundは、Web上で音響処理を手軽に行えるp5.jsの拡張ライブラリです。基本的なサウンド生成からエフェクト、フィルター、音量といった音響属性の制御、…

  • react-p5ライブラリについて

    react-p5ライブラリについて

    react-p5は、Reactコンポーネント内でp5.jsを使用するためのラッパーです Next.jsの環境でp5.jsを使いたかったのですが、「react-p…

  • ReactでGSAPを利用する

    ReactでGSAPを利用する

    GSAPは、ブラウザベースのアニメーションライブラリで、React、Vue、Angularなどの様々なフレームワークで使用することができます。*Next.jsで…

  • Jupyter Notebookでリッチな表示:OpenAI APIを使ってみる(その2)

    Jupyter Notebookでリッチな表示:OpenAI APIを使ってみる(その2)

    Matplotlibでグラフ Matplotlibについて Matplotlibは、Pythonでグラフ描画を行うためのライブラリの一つです2次元のグラフはもち…

  • OpenAIのAPIを使ってみる

    OpenAIのAPIを使ってみる

    OpenAIのAPIを通じてGPT(Generative Pretrained Transformer)を利用することができます ドキュメント OpenAI C…

  • Web Workerについて

    Web Workerについて

    JavaScriptは単一のスレッドで動作しているため、コードが実行されている間そのスレッドはブロックされますそのため重い処理が行われるとブラウザがフリーズする…

  • Three.js備忘録(4)

    Three.js備忘録(4)

    環境マップ 環境マップは3D空間において環境の光や影響を表現するために使用されるテクスチャです*周囲の光や物体の反射、屈折、散乱などの影響を反映できる 環境マッ…

  • Three.js備忘録(3)

    Three.js備忘録(3)

    ピッキング ピッキングとはユーザーがどのオブジェクトをクリックしたか、またはタッチしたかを把握するプロセスの事で、最も一般的なピッキングは「Raycaster」…

  • Three.js備忘録(2)

    Three.js備忘録(2)

    setAnimationLoop 「setAnimationLoop」についてアニメーションのループを簡単に設定するためのものです。このメソッドは、通常のJav…