😷

TouchDesigner Web Render TOPでマスクがうまく機能しなかった問題

に公開
TouchDesigner
Chromium
CEF
tech

Web Render TOPだけうまく表示されない

TouchDesigner上でWebページを開くことができて、それをテクスチャとして扱えるWebRenderTOPというTOPがあります。

このTOPを使って、円形のマスクが小さくなりながら白くフェードアウトしていくようなアニメーションを表示しようとしていました。

        <Flex
          ref={maskFlexRef}
          w="100%"
          position="absolute"
          h="100%"
          maskImage="url('/refer/webMask.png')"
          maskSize="100%"
          maskRepeat={"no-repeat"}
          maskPosition={"50% 50%"}
          maskMode={"luminance"}
        >
        ...

こんな感じでFlexコンテナにマスクを設定して、gsapでアニメーションするだけのシンプルなものでしたが、どういうわけか下のような感じになって上手く表示されませんでした。手元のブラウザだと正しく表示されるのに…

Chromium embedded frameworksの存在を知る

そもそもこれは誰がレンダリングしてるんだ、と思って色々調べると、WebRenderTOPはChromium embedded frameworks、通称CEFと呼ばれるChromiumベースのエンジンを使っていることがわかりました。

その時々のバージョンのCEFがTouchDesignerの中にバンドルされて、別プロセスで走らせたレンダリング結果をTouchDesignerにTOPとして持ってきているようです。

マスク周りがアップデートされてる


この時使っていたTouchDesignerのバージョンが2023.11760で、CEFのバージョンは115.3でした。これはWebRenderTOPをInfo DATに差すと確認することができます。

そして色々調べると、(この時見たページを遡れず…)115以降のバージョンでマスク周りのアップデートがされているという記述を発見しました。


一縷の望みをかけてTouchDesignerの最新版の2025.31760にアップデートしたところ、なんとCEFのバージョンが132.3にバージョンアップしてるではないですか…！

無事キレイにレンダリングされる

無事キレイなマスクアニメーションが表示されました。先程も書いたように、WebRenderTOPはPCにインストールされてるブラウザとかではなく、TouchDesigner内で用意されたエンジンが走るので、何かおかしいなと思った時にはCEFに関する情報を集めると幸せになれるかもしれません。

Discussion