まるで本物！驚異のホイルステッカー効果を実装する技術
引用元：https://news.ycombinator.com/item?id=45095460
お、これいいじゃん！俺のMagicカードのサイトでもホイル効果はCSSでやってるんだけど、もっとリアルで多様な効果をSvelteのCRUD UXに合うように、パフォーマンスよく再現したいと思ってたんだよなー。
これ絶対見るべき！GitHubのhttps://github.com/simeydotme/pokemon-cards-cssだよ。
実際に動いてるの見たいならこれ！https://poke-holo.simey.me/ 下にスクロールするとすごいホイル効果が見れるからね、一番上のはごく基本的な例だから。
へえ、ジャイロスコープも使ってるのか！こりゃすごいわ。
いやー、ポケモンカードのCSSには感動したわ。AI以前に作られたってのがまたすごいね。俺も自分の専門分野、elliptic curvesでこれくらい極めたいもんだよ。なんか実装の微妙な違いとか、奥が深いんだよなー。これって脆弱性なんじゃないかと思ってるんだけど、まだどうやって見つけるかわからないんだよね。
シェーダーってブラウザで動かせるから、このコードをそのまま使ってShadertoyで練習してみるといいんじゃない？
関連情報なんだけど、物理ベースのmetal shaderを使った実装がこれだよ！https://x.com/jmtrivedi/status/1935807479021289573
関連で言うと、Tim OliverがInstagramのThreadsの”golden ticket”でホログラフィック効果を作った時の素晴らしいプレゼンがYouTubeにあるよ！https://www.youtube.com/watch?v=_sHxHz0nVG8
シェーダーってほんと面白いよね。Shadertoyはオンラインで色々なのを試せるいいサイトだよhttps://www.shadertoy.com/
昔、俺も似たような効果でモバイルゲームを作ってたんだ。カードが当たると光るんだけど、スマホの傾きに合わせてリアルな3Dみたいに「光沢」を調整してたんだよね。他のコメントによると、今じゃiOSがステッカーでこれやってるみたいだね。
予想以上にクールだったよ！部屋の反射画像がよく見えるように、設定を色々いじって楽しんだんだ。
俺もやったよ、反射マップを調べたんだ。なんと、問題の部屋はポーランドのJedlinka Palaceにあるって分かったんだ。テクスチャ自体はこのURLにあるよ: https://polyhaven.com/a/mirrored_hall
APIがWebカメラにアクセスできるといいなぁ！
以前のCSSステッカーを知ってたから、文句を言うつもりで懐疑的にリンクを見たんだけど、主題を深く掘り下げたページにすごく感動したよ。しかもこれ、俺のお気に入りのトピックなんだ。素晴らしい仕事だね。
こういう、ちょっと変わったランダムな記事が、俺はここで見れるのがすごく好きなんだよね。
iOSにはこんな感じのステッカー効果（「キラキラ」）があって、おまけにスマホの傾きに直接反応するんだ。初めて見た時、思わず息をのんだよ。
Paper Mario Sticker Starは別に傑作でも良作でもないけど、3DSを動かすと加速度センサーを使って、ホイルステッカーがキラキラ反射する効果はすごく好きだったな。あれ、楽しいエフェクトだよね。
そのリアルさに驚いたよ。信じられないくらい素晴らしい仕事だね！
めっちゃクール！Alan Zucconiの、CDをレンダリングする回折格子シェーダーを思い出したよ [1]。
[1] https://www.alanzucconi.com/2017/07/15/cd-rom-shader-1/
Neat！FYIだけど、Creative Commonsはコードに使うのを強く非推奨としてるって。FAQに詳しく載ってるよ。
https://creativecommons.org/faq/#can-i-apply-a-creative-comm…
Creative Commons BY-NCみたいなソフトウェア向けライセンスってある？商用利用を完全に禁止したら、それはOpen Sourceライセンスじゃないってのは分かるんだけど、過去に探しても見つからなかったんだよね。
GPLはかなり近くて、ちゃんとOpen Sourceだよ。GPLは技術的にはCreative Commons BY-SAに一番近いんだけど、その伝播性から多くの企業、特に弁護士が少ない中小企業はGPLを避ける傾向があるね。大手企業でさえも、GPLソフトウェアの利用にはすごく保守的だよ。
でも、FSFもOSIも、ある程度の商用利用はFree/Open Sourceライセンスが持つべき自由だと考えてるから、もし完全に非商用ライセンスが欲しいなら、それは定義上Free/Open Sourceライセンスではないって言われちゃうだろうね。
このエフェクトはすごくかっこいいし見た目も最高だけど、聞かなきゃいけないな…。もちろんホログラフィックなCharizardは欲しいけど、キラキラしたホイルエフェクトって、正直あまり好きじゃないんだよね。ステッカーやカードとか、大抵は見た目が悪くなると思ってて、キラキラなしの方が好き。滑らかなメタリックな輝きならアクセントとしてすごく良く見えるんだけど、全体に散りばめられるのはちょっと…。俺だけかな？すごく一般的だから、少数派な気がするんだけど。
トレーディングカードゲームのアートって、Ratchet Effectがあると思うんだ。キラキラカードとか、豪華なアートワークのカード、縁取りのあるカードって、全部価値があるように見えるよね。そして買いたくなる！消費者がもっときれいなカードにお金を払うから、ゲームメーカーはどんどん装飾を追加する義務があるみたいになっちゃうんだ。
最終的にはほとんどすべてのカードに何らかの’Gloop’がある状態になる。例えば、20年前のMagic: The Gatheringのカード[1]と今日のカード[2]を比べてみてよ。今日のカードはもっと’Gloop’が多いでしょ。
[1] https://gatherer.wizards.com/sets/7E
[2] https://gatherer.wizards.com/sets/EOC
7th editionがもう20年前って聞いて、びっくりした！
そして、もっと魅力的で価値あるカードの利益を追い求めるあまり、全部をスペシャルにしようとして、結果的にどれもスペシャルじゃなくなっちゃったんだね。
これ、スマートウォッチの文字盤にしたらクールだろうな。
何年もこれの作り方を知りたいって思ってたんだ！本当に感謝しきれないよ！
ノイズ生成やランダム性にいくつか問題があるみたいだね。フレークの数を比較的高く設定すると、パターンが出てきちゃうよ。
グリッターの部分、ただの四角じゃなくてボロノイ図みたいなシステムにしたらどうかな？見た目はいい感じだよ。
もっとコメントを表示（1）
他にもさ、物理的な素材じゃ無理だけどCSSで実現できるエフェクトって何かある？
最初 Balatro の記事かと思ったよ。あっちもカードのエフェクトがすごいんだよね！
最初はつまんないかと思ったけど、これマジでめちゃくちゃクールじゃん。よくやったね！
これ、ターミナルでも使えるようにしてよ！ハイライトとか特別なテキストに使うの、めちゃくちゃクールになると思うんだけど！
ちょっと話がそれるけどさ、AIがこの記事から実装方法を学べるって最初に思っちゃったんだよね。AIが究極のブックマークになるなら、ブックマークをため込むのをやめてもいいかなって liberatingな気持ちになる一方で、AIがこんな素晴らしい投稿に credit を出さないのは depressiveだなぁって思うんだ。
AI時代になっても、今まで通りブックマークは持ってた方がいいよ。「インターネットをインデックス化する」って時代でも、今は Google 検索で多くの情報が失われてるし、将来はAIの腹の中に消えていくものもたくさんあるだろうからね。
AIがこんな記事を書いて、AIがAIから学ぶようになるだろうね。そしたら artisticなプログラマーも専門家もいなくなっちゃうよ。コンピュータが自動生成するビジネスソリューションをかき集めるだけの、つまんない仕事しか残らないんじゃないかな。
AIがスキルアップしたら、つまんない仕事も含めてそもそも仕事なんて残るわけないじゃん？有給の人間労働には未来がないんだから、その事実を受け入れて、経済構造を利益から品質、レジリエンス、知恵、喜びに再編する機会として使うべきだよ。人生最大のチャンスだよ。
写真が撮れるのに、なんで絵を描くの？
AIがCC-BY-NCライセンスのコンテンツを無断で使用して、ライセンスをロンダリングしてるんじゃないかって懸念があるね。これまでに何回あったんだろう？
記事のシェーダーデモ画像、AI生成っぽいじゃん。
このステッカー、どこで現物プリントできる？あの触感が懐かしいなぁ。
めっちゃクール！シェーダーっていつも感動するし、ちょっとビビる。いつかできるようになりたいな…。
めっちゃ良いじゃん。
ポケモンカードデモの、もっと汎用版って感じ。すごいね！
これマジですごい。
気に入ったよ。
めっちゃきれい。
低解像度で引き伸ばされたノイズが、効果を台無しにしちゃってるよ。
