個人開発でつくったものと、その作り方の記録https://oysk2.com/jahttps://oysk2.com/blog/depth-parallax-card/https://oysk2.com/blog/depth-parallax-card/カードを傾けると絵が立体に動く表現を、人物の切り抜きを重ねる方式から、Depth Anything V2 Small の深度マップとWebGLのシェーダで1枚をずらす方式へ作り替えた記録。コードと失敗つき。Sat, 03 Oct 2026 00:00:00 GMTWebGL深度マップDepth Anything個人開発カードhttps://oysk2.com/blog/holo-foil-lame-web/https://oysk2.com/blog/holo-foil-lame-web/トレーディングカードのホロ、箔押し、ラメをブラウザで再現した記録。color-dodge の虹、傾きで流れる金のグラデーション、mix-blend-mode が立体の重なりを潰す罠、紙の加工10種の作り分けまで書きました。Fri, 02 Oct 2026 00:00:00 GMTWebGLCSSシェーダホロ個人開発カードhttps://oysk2.com/blog/rarity-four-steps/https://oysk2.com/blog/rarity-four-steps/カードのレア度を、驚きは情報量ではなく思い込みが1つ裏切られることと考えて4段階に設計した記録。その先で試した光と影、箱、粒、チャームなどが没になり、効いたのは写真そのものが豊かになる決まりだけだったという学び。Thu, 01 Oct 2026 00:00:00 GMT設計UXWebGL個人開発カードhttps://oysk2.com/blog/tcg-rarity-12/https://oysk2.com/blog/tcg-rarity-12/遊戯王などのトレカのレア表現を、名前の箔の色、絵の光り方、カード全体の加工の3つに分けて12種類調べ、WebGLのシェーダでブラウザに再現した記録。別の評価者の指摘で分かった、うまくいかなかった表現も書きます。Wed, 30 Sep 2026 00:00:00 GMTWebGLシェーダトレカ個人開発カードhttps://oysk2.com/blog/relief-engraving/https://oysk2.com/blog/relief-engraving/トレカのアルティメットレアのような浮き彫りを再現した記録。写真の明るさから彫ると縞や肌荒れになったため、XDoGで取った線画を溝にして、傾きと斜面の向きが合った線だけ光らせる方式に作り替えた。コードと評価のぶれも書く。Tue, 29 Sep 2026 00:00:00 GMT画像処理OpenCVWebGLシェーダ個人開発カードhttps://oysk2.com/blog/pack-opening-threejs/https://oysk2.com/blog/pack-opening-threejs/カードパックを開ける演出を three.js で作った記録。プレイ動画を0.2秒ごとのコマで観察する方法、display:none でキャンバスが大きさ0になる罠、WebGLの上限16、袋の質感、衣装がかぶらない抽選。Mon, 28 Sep 2026 00:00:00 GMTthree.jsWebGL演出個人開発カードhttps://oysk2.com/blog/cutout-mask-birefnet/https://oysk2.com/blog/cutout-mask-birefnet/OS標準の人物切り抜きで作ったマスクを rembg の BiRefNet（birefnet-portrait）で作り直し、新旧を並べて比べました。8枚中7枚で改善、1枚は悪化して戻した手順と、縁のぼかしや手直しの要点を記録します。Sun, 27 Sep 2026 00:00:00 GMT画像処理切り抜きPythonrembg個人開発https://oysk2.com/blog/outpaint-stitch/https://oysk2.com/blog/outpaint-stitch/頭や腕が写真の縁で切れていたので、余白だけを画像生成で描き足し、特徴点で位置合わせして継ぎました。元の範囲は元の画素のまま残す方法と、細長い帯を 2:3 に分けると合うようになった経緯の記録です。Sat, 26 Sep 2026 00:00:00 GMT画像処理アウトペイントOpenCVPython個人開発https://oysk2.com/blog/snap-like-game-balance/https://oysk2.com/blog/snap-like-game-balance/予算1→6の6幕・3客席のカードゲームを作り、「ただの算数」と言われた v0.1 から v0.3 まで、CPU同士の対戦で測って直した記録です。出せない幕 51%→0%、基本値の割合 80%→62% などの数字つきでまとめます。Fri, 25 Sep 2026 00:00:00 GMTゲーム開発ゲームバランスシミュレーションJavaScript個人開発https://oysk2.com/blog/things-paper-cannot-do/https://oysk2.com/blog/things-paper-cannot-do/画面のカードならではの表現を十数個試し、評価した記録です。枠から飛び出す、時刻で変わる、傾きで動く、育つ、並べるとつながるなど。良かったもの、弱かったもの、没にしたものと、その理由をまとめます。Thu, 24 Sep 2026 00:00:00 GMTカード表現WebCSSJavaScript個人開発https://oysk2.com/blog/head-tracking-peek/https://oysk2.com/blog/head-tracking-peek/Webカメラで頭の位置を追い、窓を覗くようにカードの奥が見える表現を作りました。顔検出は押した時だけ読み込み、映像は保存も送信もしません。偽のカメラ映像を実 Chrome に流して検査した方法も記録します。Wed, 23 Sep 2026 00:00:00 GMTWebGLMediaPipeカメラJavaScript個人開発https://oysk2.com/blog/box-in-photo-scene/https://oysk2.com/blog/box-in-photo-scene/3Dの箱を背景写真の机の上に置くため、写真の「物を置ける面」に合わせる計算、影の2層化、うつり込み、自動の揺れの廃止、袋が紙に見える問題への対処を記録します。見た目の採点が±0.3ぶれるので前後比較にした経緯つきです。Tue, 22 Sep 2026 00:00:00 GMTthree.js3DライティングJavaScript個人開発