【わんコメ対応】ホログラムUI 3Dコメント吹き出し｜OBS用HTML

空中に投影された近未来UIのような、3Dホログラム風コメント吹き出しテンプレートです。

半透明のパネル、シアン×パープル系の発光、薄いグリッド、スキャンライン、奥行きのある側面構造を組み合わせ、通常の平面的なコメント表示とは違う「浮遊する情報パネル」のような見た目に仕上げました。

コメント表示時には、手前から投影されるようにせり出す3Dアニメーションが入り、配信画面に近未来感を加えられます。

HTML / CSS / JavaScriptで動作するため、外部3Dモデルや専用3Dソフトは必要ありません。

■ 特徴

・近未来ホログラムUI風デザイン

・半透明の3Dパネル

・奥行きのある側面レイヤー

・シアン×パープル系の発光表現

・薄いグリッド表示

・スキャンライン演出

・エッジ発光

・浮遊感のあるシャドウ

・手前から投影されるような登場アニメーション

・名前とコメント本文を別行表示

・背景透過

・複数コメントの縦積み表示

・最大表示件数を超えた場合のみ古いコメントを押し出し

・時間経過による自動削除なし

・HTML形式の絵文字表示対応

・Unicode絵文字対応

・わんコメ連携対応

・OBSブラウザソース対応

・デモHTML付き

■ カスタマイズ

editor_schema.jsonに対応しており、各種設定を変更できます。

主な設定項目

・吹き出し最大幅

・本文文字サイズ

・名前文字サイズ

・最大表示コメント数

・3Dの厚み

・X方向 / Y方向の傾き

・発光の強さ

・メイン発光色

・補助発光色

・枠線色

・アクセント色

・本文色

・名前色

・パネル透明度

・グリッドの表示強度

・スキャンラインの表示強度

配信画面やテーマカラーに合わせて、ホログラムの雰囲気を調整できます。

■ コメント表示について

新しいコメントは下側から追加され、古いコメントが上へ積み上がっていく形式です。

一定時間が経過してもコメントは自動で消えず、設定した最大表示件数を超えた場合のみ、古いコメントから順番に押し出されます。

■ 絵文字について

わんコメからHTML形式で渡される絵文字画像に対応しています。

通常のUnicode絵文字とあわせて表示できます。

■ 内容物

・README_FIRST.txt

・docs

・obs_demo

・onecomme_template

「obs_demo」は見た目確認用です。

実際の配信では「onecomme_template」内のテンプレートをご利用ください。

■ 動作環境

・OBS Studio

・わんコメ

・YouTubeライブ等、わんコメで取得できるコメント配信環境

※本商品単体ではコメントを取得できません。

実際のコメント取得には「わんコメ」が必要です。

■ 導入方法

ZIPを展開します

onecomme_template内のテンプレートをわんコメへ追加します

わんコメからOBSへテンプレートを追加します

OBSのブラウザソースとして表示します

詳しい導入方法は同梱のREADME_FIRST.txtをご確認ください。

■ デモについて

obs_demo/index.htmlをブラウザ、またはOBSのブラウザソースで開くことで、わんコメに接続せずデザインを確認できます。

※obs_demoは見た目確認用のデモです。実配信用ファイルではありません。

■ ご注意

・本商品はOBS用のHTMLコメント表示テンプレートです

・コメント取得機能そのものは含まれていません

・実際のコメント取得にはわんコメが必要です

・OBSやわんコメのアップデートにより動作仕様が変更される場合があります

・環境によってフォントや発光表現の見え方に差が出る場合があります

SF、サイバー、近未来、宇宙、ゲーム配信などの世界観におすすめの3Dコメント吹き出しです。