リキッドガラス球体スタジオ

ガラス球のアニメーションを作成し、透過 PNG、ループ WebM、単体 HTML として書き出します。

プリセットを選び、球体とハイライトを調整して、モックアップ用の透過 PNG、6 秒ループ、単体 HTML レンダラーを書き出します。

ライブプレビュー

WebGL2 シェーダーレンダラー

入力や設定は送信されず、このブラウザー内で描画されます。

ライブプレビューを準備しています…

PNG サイズ

WebM の透過はブラウザーのコーデックによって異なります。編集ソフトで確認してください。

プリセット

ガラスの色合い

球体の大きさ39%

屈折1.32

光沢78%

回転速度1×

背景透明背景色

フラグメントシェーダー

使用方法

ガラス球のアニメーションを作成し、透過 PNG、ループ WebM、単体 HTML として書き出します。

次の項目から元データを指定します：プリセット。
設定する項目：ガラスの色合い / 球体の大きさ / 屈折 / 光沢 / 回転速度 / 透明 / 背景色 / PNG サイズ。下の説明を参照し、目的に合う選択肢を選んでください。
実行する操作：PNG をダウンロード / 6 秒の WebM を録画 / 単体 HTML をダウンロード。コピー、ダウンロード、ほかの用途への使用前に結果を確認します。
プリセットを選び、球体とハイライトを調整して、モックアップ用の透過 PNG、6 秒ループ、単体 HTML レンダラーを書き出します。

項目	変更される内容
PNG サイズ / 透明	PNGは静止画、WebMは6秒のアニメーションです。単独HTMLには描画処理が含まれ、WebGL対応ブラウザが必要です。透明な静止素材にはPNGを使えます。WebMの透明度は利用先のブラウザや編集アプリで確認してください。

例：オーロラを選び、透過をオンにします。1024 px で書き出すと、球体の周囲が透明な 1024 × 640 PNG になります。WebM のアルファ対応はブラウザーのコーデックと編集アプリによって異なります。

描画が始まらない場合はWebGLへの対応を確認します。動画コーデックが未対応だったり別のアプリで透明度が失われたりする場合、静止画はPNGを使い、WebMは利用先のアプリで事前に確認してください。