ShaderMaterial雛形

import * as THREE from 'three'; import { PlaneGeometry, TextureLoader } from 'three'; import shaderVert from "../glsl/shader1.vert"; import shaderFrag from "../glsl/shader1.frag"; export class MyPlane extends THREE.Mesh { constructor(){ le…

デスクトップブラウザでQRを読む

webqr.com

p5クラス化しthreejsに使う

スコープがよくわからないがとりあえず動いています import * as THREE from 'three'; import p5 from "p5"; export class p5Main { public _canvasTex:THREE.CanvasTexture; public canvasElement:HTMLCanvasElement; public isInit:boolean=false; public …

SVG filter

yoksel.github.io

波動方程式を解く

www.nicovideo.jp 単位 メートル→ピクセル 秒→1フレーム 波動方程式 (1/s2) * (d2u / dt2) = Δu 1/s2 = 伝搬 uは波の高さ d2/dt2は2回微分を表す(二階微分なので変化量の変化量) つまり時間に対する変化の変化 Δはラプラス演算子(ラプラシアン) d2u/dt…

パラメーターをシェーダーにDataTextureで渡す

import * as THREE from 'three'; import { DataTexture, Vector2 } from 'three'; export class ParamTexture{ public dataTex:DataTexture; public size:THREE.Vector2; constructor() { let ruleTexWidth = 32; this.size = new Vector2(ruleTexWidth,rul…

ウェブの文字サイズのルールなど

https://www.modularscale.com http://simplescale.online 基本サイズ、本文等を決めて、n倍するということで良いのだと思う 基本サイズ12pt 2.0倍なら12,24,36,48 基本サイズ12pt 1.5倍なら 12,18,27 参考 web typography book.webtypography.net Vertical …

CA rule セルオートマトンルール

Cellular Automata rules lexicon - Life Life rules are defined in the "S/B" form, where: S - defines counts of alive neighbors necessary for a cell to survive, survive セル=1だったとき生き残る条件 B - defines counts of alive neighbors neces…

VSCodeでTypeScript(or JavaScript)の色がおかしくなった

VSCodeでTypeScript(or JavaScript)の色がおかしくなった JavaScript and TypeScript Nightly というアドオンのせいだった(disabledにすると治る)。 何かアップデートされて変わってしまったのかもしれない。 とりあえずdisabledにした。何のために入れてた…

boids再考

boids examples | p5.js 1.分離(Separation) 近くの仲間に対して離れる方向のベクトルを計算する それをノーマライズし、距離が離れるほど重みを変える(弱くする) そのベクトルの平均を算出 →これはコリジョンとして機能します 2.整列(Alignment) 近く…

svgフィルタ色々

<feBlend> - SVG&colon; Scalable Vector Graphics | MDN</feblend>

1文字ずつspan

js

hirakublog.com

リムライトを入れるとなんか良い

objloader in threejs

ObjectLoaderとOBJLoaderがある。 .objを読み込みたいときはOBJ //import { OBJLoader } from 'three/examples/jsm/loaders/OBJLoader.js' const loader = new OBJLoader(); loader.load( url, (obj)=>{ obj.children[0] as THREE.Mesh; }

threejsで展開後のシェーダー(phong)の中身

Spector.jsを使うとみれる。他にも方法はあるのかも。 chrome.google.com phongの中身 three r145で。 THREE.ShaderLib.phong - vert/frag · GitHub 参考 中身を参考にしつつ、気になる箇所は検索から探す three.js/src/renderers/shaders/ShaderChunk at de…

正方形canvasを画面中心に

let ww:number = window.innerWidth; let hh:number = window.innerHeight; let dom = this.renderer.domElement; dom.style.position="absolute"; let stgW:number = 0; if(ww>hh){ stgW=hh; dom.style.top="0px"; dom.style.left = (ww/2-hh/2)+"px"; }els…

勾配のみの可視化

勾配の強弱を考えず、勾配の方向のみを可視化する float dx = tex(0,0) - tex(1,0);//x方向の勾配ベクトル float dy = tex(0,0) - tex(0,1);//y方向の勾配ベクトル float rad = atan(dy,dx);//勾配の方向(ラジアン) float red = 0.5 + 0.5*cos(rad); float…

OrbitControls

import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls' this.control = new OrbitControls(this.camera, domElement); this.control?.update();

jsでkeydownイベント

js

document.addEventListener('keydown', (event) => { const keyName = event.key; if(keyName=="d"){ if(this.gui){ if(this.gui.domElement.style.display=="none"){ this.gui.domElement.style.display="block"; this.stats.domElement.style.display="blo…

canvas(WebGL)をpngで保存

preserveDrawingBuffer : trueが必要 let dom = document.getElementById("webgl"); this.renderer = new THREE.WebGLRenderer({ canvas: dom,//document.querySelector('#webgl'), antialias: true, preserveDrawingBuffer : true }); download(){ let dom …

ImageManager

threejs で 画像ロードマネージャー import * as THREE from 'three'; import { ImageLoader } from 'three'; interface ImgData { name : string; url : string; tex : THREE.Texture; } export class ImageManager { public static LOGO1:string="LOGO1"; …

typescript singleton シングルトン

public static getInstance(): DataManager { if (!DataManager.instance) { DataManager.instance = new DataManager(); //DataManager.instance.init(); } return DataManager.instance; }

簡易circle packing

import * as THREE from 'three'; import { Matrix4, Mesh, Texture, TextureLoader, Vector3 } from 'three'; import waveRender_vert from "../glsl/waveRender.vert"; import waveRender_frag from "../glsl/waveRender.frag"; import { CircleObj } from…

RenderToTexture

オフスクリーンレンダリング github.com typescript 昔は material.map = this.renderTarget; で行けたきがするがいつからから material.map = this.renderTarget.texture; になった模様 import * as THREE from 'three'; import { Camera, Matrix4, Object3…

強制キャスト

エラーが消えない時に使った。 let hoge:string = fuga as any;

パクリ応用・拡張方法

パクリをパクリで終わらせないための方法 使いたいエフェクト・ギミック・アルゴリズム・話などを選ぶ 変化可能なパラメータを列挙する 素材を変える・形を変える・色を変える 質感を与える(フォトリアル)/質感を除去する(グラフィカル) 量を極端に増や…

tsconfig

threejsでObject3Dなどを継承しようとしたらes6からじゃないとダメだった tsconfig { "compilerOptions": { "target": "es6",//"es5", "module": "es2015", "types":["node"], "lib": [ "es2019", "dom" ], "allowJs": true, // jsコンパイル用 "checkJs": t…

inspectorでボタン作ってクリップボードにコピー

ジェネラティブなものを作った時、再生を止めるとデータは消えてしまうが 情報を保持しておきたい時がある。それにはいろいろなやり方があるが最も簡単なのは データをクリップボードにコピーし、コードにペーストすることだろう。 Plane tgt = target as Pl…

イラレでアートボードのサイズ、オブジェクト合わせる

サイズを合わせたいオブジェクトを選択し、「オブジェクト」メニューの「アートボード」から「選択オブジェクトに合わせる」を選びます。

typescript threejs 雛形

import * as THREE from 'three'; import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls' import Stats from 'three/examples/jsm/libs/stats.module' import { GUI } from 'lil-gui' import { TorusGeometry, MeshPhongMaterial, Dir…

〠FOOTER〠