みかづきブログ・カスタム

基本的にはちょちょいのほいです。

CSS Three.js

f:id:kimizuka:20201204000817g:plain

Three.jsでレンダリングした3Dモデルを、セガサターンのような見た目にしたいなと思い、ポストプロセスやシェーダーを書いていたんですが、CSSにimage-renderingたるものがあることを知り、早速試してみました。

使い方はものすごく簡単で、

canvas {
  image-rendering: pixelated;
}

という感じで、image-renderingにpixelatedを渡すと、ニアレストネイバー法で拡大してくれるようになるので、簡単にドット絵みたいな見た目を実現できます。