gl-react
でお絵描き的なことをしようとしてて、Typescript
の型チェックが通らない値を設定する必要が出来た。
型設定を修正するのが正攻法ですが、直すのが面倒な事情もあっていくつかのプロパティーの型チェックを放棄したい。
考えてみれば必要な機能で基本的な事なんですが、やろうと思ったことがなかったので知らなかった。
gl-react
でお絵描き的なことをしようとしてて、Typescript
の型チェックが通らない値を設定する必要が出来た。
型設定を修正するのが正攻法ですが、直すのが面倒な事情もあっていくつかのプロパティーの型チェックを放棄したい。
考えてみれば必要な機能で基本的な事なんですが、やろうと思ったことがなかったので知らなかった。
Expo
( react native
) で相対パスの代わりにエイリアスを使いたい。
import Ctx from "../../../contexts/main";
みたいなのは書いてられないです。
next.js
で同様のことをしていたので設定自体は簡単だったのですが、思わぬ落とし穴があったのでメモしておきます。
これまで GLSL
(とほんの少しのHLSL
)を書いてましたが、フラグメントシェーダーしか書いていないことに気づいた。
もう一つの頂点シェーダー(バーテックスシェーダー)にも触れてみたい。
サンプルは全然見つからないし情報自体が少ないので gl-react
のソースを見ながらバーテックスシェーダーの動作を確認します。
今回は基本的な確認までです。
URL
は 2000 字程度まで使えるのでパラメータで色々渡すことが出来ます。
ただ共有に不便にはですし、ツイッターなどの文字制限があれば載せることが出来ません。よく見かける bitly
を使ってみます。
アカウント作成から API
で短縮 URL
を作るまで。
前回 sitemap.xml
を作成しましたが、Vercel
(旧 Zeit / now
)でうまく動かなかったので原因と解決方法を追記しておきます。
自サーバーで動かす分には問題ないです。
Next.js
でサイトマップを作る方法を探してみたけど、情報が全然出てこなかったので見つけた情報をつなぎ合わせてサイトマップを自動作成します。
sitemap.xml
(サイトマップ)は検索エンジンにサイト内のクロールするWebページを教えるためのファイルです。なくても検索結果に出ないわけではないですが、現在だとあるに越したことはないくらいの印象。
Gatsby
だと時折見かける gray-matter
ですが、Next.js
でも非常に役立つので使い方と利点を書いておきます。
マークダウンでコンテンツを分けることを合わせて pages/
の負担を減らせます。
前回 React
+ GLSL
で音声波形の表示ができたので、どんなふうに描画するのがいいかいくつか試してみました。
今回は基本的に GLSL
のコードサンプルになります。