カテゴリー: WEB
Web制作、プログラミング備忘録、WordPress、Blender、React Three Fiber、p5.jsを使ったデジタルものづくりの記録。
-
CSS備忘録・後半（テキスト・装飾・アニメーション・ユーザビリティ）
この記事は、CSSの基本から応用までを整理した備忘録ですHTMLやJavaScriptも関連が深い部分については、適宜補足しています テキスト関連のプロパティ …
-
Blender：カーブモデリング・スクリューモディファイア・パーティクル
カーブモデリング カーブモデリングは、滑らかな形状を描画するために、ベジェカーブやNURBSカーブを活用する技術です。それぞれ特徴があり、用途に応じて選択します…
-
Blender：リジッドボディアニメーションを頂点グループに割り当てる
3Dテキストを個別の文字ごとに落下させる動きを実装したいと考えましたしかし、各文字を独立したメッシュとして扱うと、GLTFファイルの読み込み時にメッシュの数が増…
-
Blender：シンプル変形モディファイアでカード開閉アニメーション
カードの「開くアニメーション」と「閉じるアニメーション」をそれぞれ独立したアニメーションとして作成し、GLTF形式でエクスポートしますこの形式を使用することでT…
-
Blender：3Dテキスト・クロスの物理演算・エンプティ
ハロウィン用に、3Dテキストとクロスの物理演算を使ったエフェクトを作成しましたBlenderでモデルを作成し、Three.jsで動的に表示する仕組みを実装してい…
-
Three.jsシェーダー・（3Dジオメトリ・モデル）
はじめに 備考：Three.jsシェーダーで使用される主要な変数（ uniform変数、attribute 変数、組み込み変数） 主なuniform変数（シェー…
-
Three.jsシェーダー・（パーティクル・平面GeometryとBufferGeometry）
THREE.Pointsを対象にシェーダーを適用する＊各パーティクルはカメラに面した平面で構成されている＊パーティクルではRaycasterは機能しない &#x…
-
Three.jsシェーダー・（平面ジオメトリでの実装・3D）
🚀 実際のデモ画面を見る カメラ 3Dの情報を2Dに変換して描画するにはカメラが必要ro（ カメラ（レイの原点））とrd（レイの方向）を定義する…
-
Three.jsシェーダー・チートシート（平面ジオメトリでの実装・2D）
🚀 実際のデモ画面を見る セットアップ THREE.PlaneGeometry（平面）を利用してスクリーンスペースに描画（カメラやモデルの位置に…
-
WordPressプラグイン・Viteの開発環境・ショートコード
目的は、ショートコードごとに異なるエフェクトを提供するプラグインを作成することです 🚀 WebGL Effects Collection プラグ…
-
Three.js/シェーダー（GLSL）その3
座標系について オブジェクトにテクスチャやパターンをどのように適用するか？ 今までは、平面にUV座標を利用して描画していました 平面上にさまざまなパターンを描く…
-
Blender / レンダリング（カメラ・ライト）
はじめに わたしは、Web制作における3Dコンテンツの活用を目的としてBlenderを使用しています 通常、Three.jsのようなライブラリを用いてWeb上で…
-
Blender / シェーディング（マテリアル・テクスチャ）
はじめに 「シェーディング」とは、3Dオブジェクトが光とどう反応するかを決める作業のことですこれには、マテリアル（素材の設定）やテクスチャ、ライト（光源）、シー…
-
Blender / ポリゴンモデリング備忘録
Three.jsで利用することを目的に、Blenderの基本的な操作を備忘録として残します オブジェクトとメッシュの違い オブジェクト＊シーン内の3Dデータを表…
-
Blenderの使い方1（基本的な操作と概要）
はじめに Three.jsで利用することを目的に、Blenderの基本的な操作を備忘録として残します 注意私はMacユーザーで、Blenderの操作にはAppl…
-
グラフィックスのための基礎知識とWebGL
AIと会話するのに困らない程度のコンピュータグラフィックスについての基礎知識だけ^^;勉強しようと思います コンピュータグラフィックスの基本概念と用語 と、th…
-
Three.jsパフォーマンス最適化についてのまとめ
はじめに インタラクティブなウェブサイトのパフォーマンス最適化について スムーズな体験とデバイスの負担のバランスユーザーにスムーズで快適な体験を提供することデバ…
-
Three.js/シェーダー（GLSL）その2
ポストプロセッシング ポストプロセッシングは最終的な画像（レンダリング）にエフェクトを加えることです。 Three.jsでは、これらの「エフェクト」を「パス」と…
-
Three.js/シェーダー（GLSL）その1
シェーダーの概要 シェーダーはGPU上で実行されるGLSL（プログラミング言語）で記述されます 頂点シェーダーとフラグメントシェーダージオメトリの各頂点を配置し…
-
Three.js アニメーション システム（Mixamoアニメーションの統合）
Three.jsのアニメーションシステムの概要 Three.jsのアニメーションシステムは、「キーフレーム」を使ってオブジェクトの動きを定義します 以下の主要な…
