【JS】360°パノラマ写真からCanvasを使って惑星「リトルプラネット」を作る - Qiita

概要 「リトルプラネット(Little Planet）」というのをご存知でしょうか？ こういう写真です。 ドラゴンボールの界王星みたいな感じのやつですね。 最近THETAが普及して、気軽に360°撮影が可能になりSNSで投稿する機会が増えたことから、こういうキレイな写真を見かけたことがある方は多いと思います。 実はこれ、特別な画像変換ソフトウェアを使わなくてもTHETA等で撮った360°パノラマ写真さえあれば、canvasタグとJavaScriptだけで、Little Planetに加工することができます。 もちろんPhotoShopでも加工が可能です。 加工の仕方さえわかってしまえば、様々な場面で応用ができるでしょう。 自分も最初はどういう加工を施せばいいのかわかりませんでしたが、 Webクリエイターボックスさんの以下の記事で、意外に簡単であることがわかり、ブラウザ上で加工・変換すること

[animist]

lut[pos++] = (sy * WIDTH + sx) * 4 + 0; lut[pos++] = (sy * WIDTH + sx) * 4 + 1; lut[pos++] = (sy * WIDTH + sx) * 4 + 2; lut[pos++] = (sy * WIDTH + sx) * 4 + 3; } } if (canvas.getContext) { var ctx = canvas.getContext('2d');