Entries from 2023-01-01 to 1 year
Please make a dummy object for updating matrices of InstancedMesh Please code "mesh.instanceMatrix.needsUpdate = true;" import { Mesh } from "three"; import * as THREE from 'three'; import { InstancedBall } from './InstancedBall'; export c…
a tool of svg to base64 to css-background blog.s0014.com
fxhash stringが64文字まで。 変数の制限がないなら、分割して情報を使う？ ## fx(params) types The following fx(params) types are available. All types share the same attributes but have different options available to e.g. constrain your parame…
let ww:number = document.body.clientWidth; let hh:number = window.innerHeight; this.camera.aspect = ww / hh;//window.innerHeight; this.camera.updateProjectionMatrix(); this.renderer.setSize(ww, hh);
import p5 from "p5"; export class p5Main{ public _width :number = 512; public _height :number = 512; private _p5 :p5; private _dom :HTMLElement; private _bg :number=0; private _callback :()=>void; constructor(){ } init(callback:()=>void){ …
https://editor.p5js.org/julians_booleans/sketches/NaUYSCDfo
/* <system section="theme" selected="life"> */ @import "/css/theme/life/life.css"; /* </system> */ /* <system section="background" selected="pattern-06"> */ body{ background-image: url('/images/theme/backgrounds/2014/pattern-06.png'); background-repeat: repeat; background-attachment: fixed; backgrou…</system>
I checked inside of mode-viewer.js. The AR Quick Look code was inside it. <model-viewer> <html> <head> <meta charset="utf-8"> <title>test</title> <script> window.onload=()=>{ const modelUrl = new URL("g5.usdz", self.location.toString()); /* if (this.arScale === 'fixed') { if (modelUr…</meta></head></html></model-viewer>
コマンドラインツール gltf-transform on command line GitHub - donmccurdy/glTF-Transform: glTF 2.0 SDK for JavaScript and TypeScript, on Web and Node.js. gltf to glb gltf-transform copy a.gltf output.glb I don't know this is correct, but It …
Check when you want to make shader by myself. github.com
projectionMatrixはビュー座標系（カメラからみた座標系）からクリップ座標系（-1から1におさまる座標系に変換) ただ一気にクリップ座標系になるのではなく、vertexShader上では-1から1に変換する前まで。 gl_Positionに代入する値はまだ-1から1になってなく…
glslsandbox.com #extension GL_OES_standard_derivatives : enable precision highp float; uniform float time; uniform vec2 mouse; uniform vec2 resolution; float rand(vec2 co) { float a = fract(dot(co, vec2(2.067390879775102, 12.45116866290824…
●glbにまとめるサイト sbtron.github.io blenderからglbを書き出したとき、glTFを直接編集したり、テクスチャの圧縮具合が調整できない。 そこでblenderの設定からバラバラで書き出すようにし、上記のサイトでglbにまとめた。 ●glbを確認するサイト gltf-vie…
fx hashにて作品を投稿する際、 gpu使う時ここにチェック入れたほうが、キャプチャがミスらないような・・ gpuをバリバリ使ってる作品に限ると思うが。 あとcanvasは指定した方がいいような ↓
はじめに WebAR（＝スマホのブラウザ上で行うAR）において、WebXRというオープンな仕様（＝ネイティブのARの機能をブラウザから使える）をsafariが採用してない。（chromeは採用してるらしい） よって万人に質の高いARを提供するのは難しい WebXR APIが使え…
このサイトで使用 HTML SKETCHES 簡単にできた。便利。 window.history.replaceState({page: idx}, "HTML SKETCHES #"+idx, "?p="+idx); クエリ取得 window.location.search
export class LabColor { /** * * @param l 0 to 100 * @param a -128 to 127 * @param b -128 to 127 * @returns */ labToRgb(l: number, a: number, b: number): {r:number, g:number, b:number} { let y = (l + 16) / 116; let x = a / 500 + y; let z = …
mode: process.env.NODE_ENV === 'production' ? 'production' : 'development', $ npx webpack --watch --env development $ npx webpack --watch --env production
さくっとpugやscssをかきたい。 そういう中で重宝するがvscodeのエクステンション、FormatterHero。 pugをhtmlに変換する方法の紹介！VScodeやブラウザのツール、npmを使った書き出し方法 書き出し先などはエクステンションのタブでFormatterHeroを選び右ク…
こんなエラー npx hardhat verify CONTRACT_ADDRESS --network mumbai Nothing to compile No need to generate any newer typings. An unexpected error occurred: [Error: ENOENT: no such file or directory, open '/Users/XXX/XXX/XXX/XXX/XXX/mynft/art…
@keyframes anim { 0%{ opacity: 0; } 100% { opacity: 1;} } <svg width="100%" height="200"> <style> @keyframes anim { 0%{ opacity: 0; } 100% { opacity: 1;} } </style> <rect width="100%" height="200" style="fill:red;"></rect> </svg>
/* RGB 0〜1 Y: 0〜1 I: 約-0.5957〜約0.5957 Q: 約-0.5226〜約0.5226 */ function yiqToRgb(y, i, q) { let r = y + 0.956*i + 0.621*q; let g = y - 0.272*i - 0.647*q; let b = y - 1.106*i + 1.703*q; // Clamp values if they are out of range r = Mat…
Xorshiftアルゴリズムを使用した疑似乱数生成器 (PRNG) chatGPTに聞きました export class Xorshift { private state: number; constructor(seedHash: string) { this.state = this.hashStringToInt32(seedHash); } public hashStringToInt32(str: string): …
import * as THREE from 'three'; import vert from "./line/line.vert"; import frag from "./line/line.frag"; import glslify from 'glslify'; export class MyLine extends THREE.Object3D{ numParticles:number=5000; strokes:THREE.Line; counter=0; p…
dat.guiの後継lil-guiにて。 lil-gui.georgealways.com 以下のようにcolorFormatsオブジェクトを作り、その中にさらに名前付きの変数を入れる。 colorFormats = {r:1,g:1,b:1} みたいなのはダメ！もう一個入れ子にしないと。 //https://lil-gui.georgealways…
// 勾配計算関数 vec2 gradient(sampler2D pTex, vec2 texCoord, vec2 resolution, float scale) { vec2 pixelSize = scale / resolution; vec2 leftOffset = vec2(-pixelSize.x, 0.0); vec2 rightOffset = vec2(pixelSize.x, 0.0); vec2 upOffset = vec2(0.…
import * as THREE from 'three'; import { Scene, OrthographicCamera, WebGLRenderer, Vector3, MeshBasicMaterial, Texture } from 'three'; export class FilpFlopSceneBase{ scene :Scene; camera :OrthographicCamera; renderTarget1 :THREE.WebGLRend…
宣言 // BufferGeometryを使って四角形を作成 const geometry = new THREE.BufferGeometry(); // 頂点データを定義 const vertices = new Float32Array([ -1.0, -1.0, 0.0, // 左下 1.0, -1.0, 0.0, // 右下 1.0, 1.0, 0.0, // 右上 -1.0, 1.0, 0.0 // 左上 …
主に東アジアのデザイナーやデザイン会社を以下のページにまとめています scrapbox.io
targetTransform.worldToLocalMatrixをc#で得て、shaderに渡す shaderの中で mul(unity_ObjectToWorld, v.vertex)で一回ワールド座標系に ワールド座標系から対象の座標系にmul(worldToLocal,vertex)
