クリエイティブ コーディング クラブ #05「映像と画像」

コンセプト

360度動画を使ってオブジェクトに貼り付けてぐるぐる回せるようにした
本当はNHKの動画ライブラリがすごいので、その紹介をしたかったのだが、残念ながらNHKの動画ライブラリに360度動画がなかったので
360rtcをつかわせていただいた

 使った技術

parcel
yarn
three.js
orbitcontrols.js

作品

Textureの練習

見れない場合は動画で・・・・

360度動画を取り込んでみるとおもしろい pic.twitter.com/jpxMooP66f

— まりーな (@marina10172013) November 24, 2019

コード

marina1017/2019-creative-code-sketch

躓いたところ・わからなかったところ

- 前に宮下さんから教えてもらった方法を思い出し。一回videoタグで読み込ませて、jsからそのurlを取り出し、Texture画像として取り込む作戦にしたらできた。
- CSSで動画を透明にすることで、存在するけど見せないようにした、がほんとにこれでいいのかはよくわからなかった。
- リロードしないとたまに動画が読み込めない
- 一度上記で動画を読み込んでリロードすると動画出てくる(なんでかはよくわからない・・・・・・)
- エラー内容は下記 128個くらい同じエラーがでてくる

WebGL: INVALID_VALUE: tex(Sub)Image2D: video visible size is empty
   [.WebGL-0x7ffda4033400]RENDER WARNING: texture bound to texture unit 0 is not renderable. It maybe non-power-of-2 and have incompatible texture filtering.
   WebGL: too many errors, no more errors will be reported to the console for this context.

- 動画がミュートするとなぜかとまる
- video.muted = ture にするとなんかしらないが、動画がとまるので音量を小さくした。ほんとはミュートしたいのに・・・・・
音量を0にすると動画がとまるので0.01とかを設定してみる

marina1017/2019-creative-code-sketch

- ローカルで音量を0.01にした場合は音量がほぼ聞こえなくなるのに
Parcelでビルド(?)したあとは音量がもとに戻ってしまう・・・・なんでだろう？