AltEdu2022 Day28の解説記事

本日のテーマは100年後の誰かに向けてコードを書いてくださいでした。
コードは以下にあります。

ArtOFCode/Festival/Year2022/AltEdu2022/day28 at main · HosodaMath/ArtOFCode

デモは以下にあります。

template

今日はライブラリーやフレームワークを使わずWebGL2、GLSL、CSSを使いリアルタイム3Dアプリケーションを作成しました。

今回もっとも難しいと思ったのはCSSを使いコントロールパネルの作成したことです。CSSでオリジナルのコントロールパネルを作るには一度既存のスタイルを破壊しなければならいので当然最初はコントローラーとして機能しませんでした。そもそもツマミの部分も破壊してしまうためそこからスタイルを設定しなければなりません。ただスタイルの適用自体は難しくないのでコツをつかめばサクサクと進めます。

/* コントロールパネルソースコードの一部 */
input[type="range"] {
  appearance: none;
  outline: none;
  width: 256px;
  height: 20px;
}

一番上のapperanceをnoneしておくとデフォルトスタイルを破壊して独自スタイルを作成できます。

自分の知らないところが知れるおもしろいです。
今回はWebGL2、GLSL、CSSすべて自分の知らないところも学習と研究を重ねて実装できたのでとても良かったと思います。
AltEdu2022の空白部分も随時うめていきたいです。

本日は以上です。