Skip to content

feat: vue support #1

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
SeRazon wants to merge 9 commits into
base: main
Choose a base branch
from
Open

feat: vue support #1

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
760b8af
Initial plan
Copilot Dec 9, 2025
8ee52f0
Add WebGL API for direct asset loading and Vue.js integration
Copilot Dec 9, 2025
bb94262
Add practical examples and test utilities for WebGL API
Copilot Dec 9, 2025
70fad18
Add changelog and refine chart JSON loading
Copilot Dec 9, 2025
50875d2
Fix async race condition and add size validation
Copilot Dec 9, 2025
f2dbae2
Add quick start guide for users
Copilot Dec 9, 2025
b70a4ee
Merge pull request #1 from SeRazon/copilot/add-webgl-api-integration
SeRazon Dec 9, 2025
cb4322c
chore: update
SeRazon Dec 9, 2025
2f58412
Update packages-lock.json
SeRazon Dec 20, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
49 changes: 49 additions & 0 deletions Assets/Plugins/WebGL/Helper.jslib
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,13 @@ mergeInto(LibraryManager.library, {
window.WebGLHelper_Data = {
_strings_ptr: 0xff,
_strings: new Map(),
_bytearrays_ptr: 0xff,
_bytearrays: new Map(),

// Direct asset storage for API mode
chartJson: null,
audioData: null,
coverData: null,

getString: (ptr, len) => {
const uint8Arr = HEAPU8.slice(ptr, ptr + len);
Expand All @@ -18,6 +25,11 @@ mergeInto(LibraryManager.library, {
this._strings.set(id, uint8Arr);
return id;
},
makeByteArray: function (uint8Arr) {
const id = this._bytearrays_ptr++;
this._bytearrays.set(id, uint8Arr);
return id;
},
}
},

Expand Down Expand Up @@ -80,5 +92,42 @@ mergeInto(LibraryManager.library, {

WebGLHelper_BackToHub: function () {
window.dispatchEvent(new Event("rain_player_back_to_hub"));
},

// New API methods for direct asset loading
WebGLHelper_HasDirectAssets: function () {
return window.WebGLHelper_Data.chartJson !== null;
},

WebGLHelper_GetChartJson: function () {
if (!window.WebGLHelper_Data.chartJson) return 0;
return window.WebGLHelper_Data.makeString(window.WebGLHelper_Data.chartJson);
},

WebGLHelper_GetByteArraySize: function (arrayId) {
if (!window.WebGLHelper_Data._bytearrays.has(arrayId)) return 0;
const uint8Arr = window.WebGLHelper_Data._bytearrays.get(arrayId);
return uint8Arr.length;
},

WebGLHelper_WriteByteArrayIntoBuffer: function (arrayId, bufferPtr) {
if (!window.WebGLHelper_Data._bytearrays.has(arrayId)) return;
const uint8Arr = window.WebGLHelper_Data._bytearrays.get(arrayId);
HEAPU8.set(uint8Arr, bufferPtr);
},

WebGLHelper_ReleaseByteArray: function (arrayId) {
if (!window.WebGLHelper_Data._bytearrays.has(arrayId)) return;
window.WebGLHelper_Data._bytearrays.delete(arrayId);
},

WebGLHelper_GetAudioData: function () {
if (!window.WebGLHelper_Data.audioData) return 0;
return window.WebGLHelper_Data.makeByteArray(window.WebGLHelper_Data.audioData);
},

WebGLHelper_GetCoverData: function () {
if (!window.WebGLHelper_Data.coverData) return 0;
return window.WebGLHelper_Data.makeByteArray(window.WebGLHelper_Data.coverData);
}
});
119 changes: 119 additions & 0 deletions Assets/Scripts/StartPlay.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -105,6 +105,12 @@ void updateWebGLParams() {

var p_comboText = WebGLHelper.WebGLHelper_GetUrlParamWarpper("comboText");
if (p_comboText != null) comboTextInputField.text = p_comboText;

// Check if direct API assets are available
if (WebGLHelper.WebGLHelper_HasDirectAssets()) {
Debug.Log("Direct API assets detected, starting auto-load");
StartCoroutine(StartPlayNextFrame());
}
}
#endif

Expand Down Expand Up @@ -175,6 +181,12 @@ public System.Collections.IEnumerator StartPlayNextFrame() {
private System.Collections.IEnumerator ChartLoader() {
#if UNITY_WEBGL && !UNITY_EDITOR
WebGLHelper.WebGLHelper_ChartPlayerStartedLoad();

// Check if we should use direct API assets
if (WebGLHelper.WebGLHelper_HasDirectAssets()) {
yield return ChartLoaderFromDirectAPI();
yield break;
}
#endif

yield return null;
Expand Down Expand Up @@ -312,6 +324,113 @@ private System.Collections.IEnumerator ChartLoader() {
yield break;
}

#if UNITY_WEBGL && !UNITY_EDITOR
private System.Collections.IEnumerator ChartLoaderFromDirectAPI() {
yield return null;

Exception err = null;

try {
Debug.Log("Loading chart from direct API assets");

// Get chart JSON
var chartJsonId = WebGLHelper.WebGLHelper_GetChartJson();
if (chartJsonId == 0) throw new Exception("Chart JSON not provided via API");

var size = WebGLHelper.WebGLHelper_GetStringSize(chartJsonId);
var buffer = new byte[size];
WebGLHelper.WebGLHelper_WriteStringIntoBuffer(chartJsonId, buffer);
WebGLHelper.WebGLHelper_ReleaseString(chartJsonId);
var chartJson = System.Text.Encoding.UTF8.GetString(buffer);

Debug.Log($"Chart JSON loaded: {chartJson.Length} characters");
chart = JsonUtility.FromJson<MilChart>(chartJson);

// Get audio data
var audioDataId = WebGLHelper.WebGLHelper_GetAudioData();
if (audioDataId == 0) throw new Exception("Audio data not provided via API");

var audioBytes = WebGLHelper.WebGLHelper_GetByteArrayWrapper(audioDataId);
Debug.Log($"Audio data loaded: {audioBytes.Length} bytes");
sasaAudioClip = libSasa.load_audio_clip(ResUtils.CreateTempFile(audioBytes));

// Get cover data
var coverDataId = WebGLHelper.WebGLHelper_GetCoverData();
if (coverDataId == 0) throw new Exception("Cover image not provided via API");

chartImageBytes = WebGLHelper.WebGLHelper_GetByteArrayWrapper(coverDataId);
Debug.Log($"Cover image loaded: {chartImageBytes.Length} bytes");

// Load storyboard textures (if any references exist, they won't be loaded in API mode)
foreach (var sb in chart.storyboards) {
if (sb.type == (int)MilStoryBoardType.Picture) {
Debug.LogWarning($"Storyboard texture '{sb.data}' referenced but not available in API mode");
}
}
} catch (Exception e) {
Debug.Log($"Error when loading chart from direct API (async): {e.Message}");
Debug.LogException(e);
err = e;

WebGLHelper.WebGLHelper_ChartPlayerLoadFailed();
setStateSetter(() => {
stateText.text = $"{MilConst.MilConst.i18n.GetText("StartPlay-Error")}: {e.Message}";
});
enableButton();
yield break;
}

if (err == null) {
try {
Texture2D tex = new Texture2D(2, 2);
tex.LoadImage(chartImageBytes);
chartImage.texture = tex;

AspectRatioFitter fitter = chartImage.GetComponent<AspectRatioFitter>();
fitter.aspectRatio = (float)tex.width / tex.height;

gameMain.chart = chart;
gameMain.sasaManager = sasaManager;
gameMain.sasaAudioClip = sasaAudioClip;
gameMain.FLOW_SPEED = flowSpeedSlider.GetComponent<Slider>().value;
MilConst.MilConst.NOTE_SIZE_SCALE = noteSizeSlider.GetComponent<Slider>().value;
gameMain.AUTOPLAY = autoplayToggle.GetComponent<Toggle>().isOn;
gameMain.OFFSET = offsetSlider.GetComponent<Slider>().value;
gameMain.SPEED = speedSlider.GetComponent<Slider>().value;
gameMain.ISDEBUG = debugToggle.GetComponent<Toggle>().isOn;
gameMain.CHORDHL = ChordHLToggle.GetComponent<Toggle>().isOn;
gameMain.ELINDICATOR = ELIndicatorToggle.GetComponent<Toggle>().isOn;
gameMain.COMBOTEXT = comboTextInputField.GetComponent<InputField>().text;
gameMain.SHOWTOUCHPOINT = ShowTouchPointToggle.GetComponent<Toggle>().isOn;
gameMain.MUSICVOL = musicVolSlider.GetComponent<Slider>().value;
gameMain.HITSOUNDVOL = hitsoundVolSlider.GetComponent<Slider>().value;
MilConst.MilConst.EnableOklchInterplate = OklchColorInterplateToggle.GetComponent<Toggle>().isOn;
hubCanvas.gameObject.SetActive(false);

setStateSetter(() => {
stateText.text = MilConst.MilConst.i18n.GetText("StartPlay-ChartLoaded");
});
gameMain.IntoPlay();
} catch (Exception e) {
setStateSetter(() => {
stateText.text = $"{MilConst.MilConst.i18n.GetText("StartPlay-Error")}: {e.Message}";
});
Debug.Log($"Error when loading chart: {e.Message}");
Debug.LogException(e);
err = e;

WebGLHelper.WebGLHelper_ChartPlayerLoadFailed();
enableButton();
yield break;
}
}

enableButton();
WebGLHelper.WebGLHelper_ChartPlayerLoaded();
yield break;
}
#endif

public void OnApplicationQuit()
{
OnDestroy();
Expand Down
22 changes: 22 additions & 0 deletions Assets/Scripts/WebGLHelper.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,13 @@ public class WebGLHelper {
[DllImport(DLL_NAME)] public static extern void WebGLHelper_ChartPlayerLoadFailed();
[DllImport(DLL_NAME)] public static extern void WebGLHelper_ChartPlayerStartedLoad();
[DllImport(DLL_NAME)] public static extern void WebGLHelper_BackToHub();
[DllImport(DLL_NAME)] public static extern bool WebGLHelper_HasDirectAssets();
[DllImport(DLL_NAME)] public static extern int WebGLHelper_GetChartJson();
[DllImport(DLL_NAME)] public static extern int WebGLHelper_GetByteArraySize(int arrayId);
[DllImport(DLL_NAME)] public static extern void WebGLHelper_WriteByteArrayIntoBuffer(int arrayId, byte[] bufferPtr);
[DllImport(DLL_NAME)] public static extern void WebGLHelper_ReleaseByteArray(int arrayId);
[DllImport(DLL_NAME)] public static extern int WebGLHelper_GetAudioData();
[DllImport(DLL_NAME)] public static extern int WebGLHelper_GetCoverData();

[RuntimeInitializeOnLoadMethod(RuntimeInitializeLoadType.BeforeSceneLoad)]
private static void Initialize() {
Expand Down Expand Up @@ -53,5 +60,20 @@ public static System.Collections.IEnumerator DownloadUrlAsTempFile(string url, A
}
}
}

public static byte[] WebGLHelper_GetByteArrayWrapper(int arrayId) {
if (arrayId == 0) return null;

var size = WebGLHelper_GetByteArraySize(arrayId);
if (size <= 0) {
WebGLHelper_ReleaseByteArray(arrayId);
return null;
}

var buffer = new byte[size];
WebGLHelper_WriteByteArrayIntoBuffer(arrayId, buffer);
WebGLHelper_ReleaseByteArray(arrayId);
return buffer;
}
}
#endif
2 changes: 2 additions & 0 deletions Assets/Settings/UniversalRP.asset
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -129,6 +129,8 @@ MonoBehaviour:
m_PrefilterScreenCoord: 1
m_PrefilterNativeRenderPass: 1
m_PrefilterUseLegacyLightmaps: 0
m_PrefilterReflectionProbeBlending: 1
m_PrefilterReflectionProbeBoxProjection: 1
m_ShaderVariantLogLevel: 0
m_ShadowCascades: 0
m_Textures:
Expand Down
100 changes: 100 additions & 0 deletions Assets/UniversalRenderPipelineGlobalSettings.asset
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -54,6 +54,11 @@ MonoBehaviour:
- rid: 3496019934895407227
- rid: 3496019934895407228
- rid: 7752762179098771476
- rid: 2671546287141421056
- rid: 2671546287141421057
- rid: 2671546287141421058
- rid: 2671546287141421059
- rid: 2671546287141421060
m_RuntimeSettings:
m_List:
- rid: 7752762179098771456
Expand Down Expand Up @@ -89,6 +94,97 @@ MonoBehaviour:
references:
version: 2
RefIds:
- rid: 2671546287141421056
type: {class: ScreenSpaceAmbientOcclusionPersistentResources, ns: UnityEngine.Rendering.Universal, asm: Unity.RenderPipelines.Universal.Runtime}
data:
m_Shader: {fileID: 4800000, guid: 0849e84e3d62649e8882e9d6f056a017, type: 3}
m_Version: 0
- rid: 2671546287141421057
type: {class: PostProcessData/TextureResources, ns: UnityEngine.Rendering.Universal, asm: Unity.RenderPipelines.Universal.Runtime}
data:
blueNoise16LTex:
- {fileID: 2800000, guid: 81200413a40918d4d8702e94db29911c, type: 3}
- {fileID: 2800000, guid: d50c5e07c9911a74982bddf7f3075e7b, type: 3}
- {fileID: 2800000, guid: 1134690bf9216164dbc75050e35b7900, type: 3}
- {fileID: 2800000, guid: 7ce2118f74614a94aa8a0cdf2e6062c3, type: 3}
- {fileID: 2800000, guid: 2ca97df9d1801e84a8a8f2c53cb744f0, type: 3}
- {fileID: 2800000, guid: e63eef8f54aa9dc4da9a5ac094b503b5, type: 3}
- {fileID: 2800000, guid: 39451254daebd6d40b52899c1f1c0c1b, type: 3}
- {fileID: 2800000, guid: c94ad916058dff743b0f1c969ddbe660, type: 3}
- {fileID: 2800000, guid: ed5ea7ce59ca8ec4f9f14bf470a30f35, type: 3}
- {fileID: 2800000, guid: 071e954febf155243a6c81e48f452644, type: 3}
- {fileID: 2800000, guid: 96aaab9cc247d0b4c98132159688c1af, type: 3}
- {fileID: 2800000, guid: fc3fa8f108657e14486697c9a84ccfc5, type: 3}
- {fileID: 2800000, guid: bfed3e498947fcb4890b7f40f54d85b9, type: 3}
- {fileID: 2800000, guid: d512512f4af60a442ab3458489412954, type: 3}
- {fileID: 2800000, guid: 47a45908f6db0cb44a0d5e961143afec, type: 3}
- {fileID: 2800000, guid: 4dcc0502f8586f941b5c4a66717205e8, type: 3}
- {fileID: 2800000, guid: 9d92991794bb5864c8085468b97aa067, type: 3}
- {fileID: 2800000, guid: 14381521ff11cb74abe3fe65401c23be, type: 3}
- {fileID: 2800000, guid: d36f0fe53425e08499a2333cf423634c, type: 3}
- {fileID: 2800000, guid: d4044ea2490d63b43aa1765f8efbf8a9, type: 3}
- {fileID: 2800000, guid: c9bd74624d8070f429e3f46d161f9204, type: 3}
- {fileID: 2800000, guid: d5c9b274310e5524ebe32a4e4da3df1f, type: 3}
- {fileID: 2800000, guid: f69770e54f2823f43badf77916acad83, type: 3}
- {fileID: 2800000, guid: 10b6c6d22e73dea46a8ab36b6eebd629, type: 3}
- {fileID: 2800000, guid: a2ec5cbf5a9b64345ad3fab0912ddf7b, type: 3}
- {fileID: 2800000, guid: 1c3c6d69a645b804fa232004b96b7ad3, type: 3}
- {fileID: 2800000, guid: d18a24d7b4ed50f4387993566d9d3ae2, type: 3}
- {fileID: 2800000, guid: c989e1ed85cf7154caa922fec53e6af6, type: 3}
- {fileID: 2800000, guid: ff47e5a0f105eb34883b973e51f4db62, type: 3}
- {fileID: 2800000, guid: fa042edbfc40fbd4bad0ab9d505b1223, type: 3}
- {fileID: 2800000, guid: 896d9004736809c4fb5973b7c12eb8b9, type: 3}
- {fileID: 2800000, guid: 179f794063d2a66478e6e726f84a65bc, type: 3}
filmGrainTex:
- {fileID: 2800000, guid: 654c582f7f8a5a14dbd7d119cbde215d, type: 3}
- {fileID: 2800000, guid: dd77ffd079630404e879388999033049, type: 3}
- {fileID: 2800000, guid: 1097e90e1306e26439701489f391a6c0, type: 3}
- {fileID: 2800000, guid: f0b67500f7fad3b4c9f2b13e8f41ba6e, type: 3}
- {fileID: 2800000, guid: 9930fb4528622b34687b00bbe6883de7, type: 3}
- {fileID: 2800000, guid: bd9e8c758250ef449a4b4bfaad7a2133, type: 3}
- {fileID: 2800000, guid: 510a2f57334933e4a8dbabe4c30204e4, type: 3}
- {fileID: 2800000, guid: b4db8180660810945bf8d55ab44352ad, type: 3}
- {fileID: 2800000, guid: fd2fd78b392986e42a12df2177d3b89c, type: 3}
- {fileID: 2800000, guid: 5cdee82a77d13994f83b8fdabed7c301, type: 3}
smaaAreaTex: {fileID: 2800000, guid: d1f1048909d55cd4fa1126ab998f617e, type: 3}
smaaSearchTex: {fileID: 2800000, guid: 51eee22c2a633ef4aada830eed57c3fd, type: 3}
m_TexturesResourcesVersion: 0
- rid: 2671546287141421058
type: {class: ScreenSpaceAmbientOcclusionDynamicResources, ns: UnityEngine.Rendering.Universal, asm: Unity.RenderPipelines.Universal.Runtime}
data:
m_BlueNoise256Textures:
- {fileID: 2800000, guid: 36f118343fc974119bee3d09e2111500, type: 3}
- {fileID: 2800000, guid: 4b7b083e6b6734e8bb2838b0b50a0bc8, type: 3}
- {fileID: 2800000, guid: c06cc21c692f94f5fb5206247191eeee, type: 3}
- {fileID: 2800000, guid: cb76dd40fa7654f9587f6a344f125c9a, type: 3}
- {fileID: 2800000, guid: e32226222ff144b24bf3a5a451de54bc, type: 3}
- {fileID: 2800000, guid: 3302065f671a8450b82c9ddf07426f3a, type: 3}
- {fileID: 2800000, guid: 56a77a3e8d64f47b6afe9e3c95cb57d5, type: 3}
m_Version: 0
- rid: 2671546287141421059
type: {class: PostProcessData/ShaderResources, ns: UnityEngine.Rendering.Universal, asm: Unity.RenderPipelines.Universal.Runtime}
data:
stopNanPS: {fileID: 4800000, guid: 1121bb4e615ca3c48b214e79e841e823, type: 3}
subpixelMorphologicalAntialiasingPS: {fileID: 4800000, guid: 63eaba0ebfb82cc43bde059b4a8c65f6, type: 3}
gaussianDepthOfFieldPS: {fileID: 4800000, guid: 5e7134d6e63e0bc47a1dd2669cedb379, type: 3}
bokehDepthOfFieldPS: {fileID: 4800000, guid: 2aed67ad60045d54ba3a00c91e2d2631, type: 3}
cameraMotionBlurPS: {fileID: 4800000, guid: 1edcd131364091c46a17cbff0b1de97a, type: 3}
paniniProjectionPS: {fileID: 4800000, guid: a15b78cf8ca26ca4fb2090293153c62c, type: 3}
lutBuilderLdrPS: {fileID: 4800000, guid: 65df88701913c224d95fc554db28381a, type: 3}
lutBuilderHdrPS: {fileID: 4800000, guid: ec9fec698a3456d4fb18cf8bacb7a2bc, type: 3}
bloomPS: {fileID: 4800000, guid: 5f1864addb451f54bae8c86d230f736e, type: 3}
temporalAntialiasingPS: {fileID: 4800000, guid: 9c70c1a35ff15f340b38ea84842358bf, type: 3}
LensFlareDataDrivenPS: {fileID: 4800000, guid: 6cda457ac28612740adb23da5d39ea92, type: 3}
LensFlareScreenSpacePS: {fileID: 4800000, guid: 701880fecb344ea4c9cd0db3407ab287, type: 3}
scalingSetupPS: {fileID: 4800000, guid: e8ee25143a34b8c4388709ea947055d1, type: 3}
easuPS: {fileID: 4800000, guid: 562b7ae4f629f144aa97780546fce7c6, type: 3}
uberPostPS: {fileID: 4800000, guid: e7857e9d0c934dc4f83f270f8447b006, type: 3}
finalPostPassPS: {fileID: 4800000, guid: c49e63ed1bbcb334780a3bd19dfed403, type: 3}
m_ShaderResourcesVersion: 0
- rid: 2671546287141421060
type: {class: UniversalRenderPipelineEditorAssets, ns: UnityEngine.Rendering.Universal, asm: Unity.RenderPipelines.Universal.Runtime}
data:
m_DefaultSettingsVolumeProfile: {fileID: 11400000, guid: eda47df5b85f4f249abf7abd73db2cb2, type: 2}
- rid: 3496019934895407218
type: {class: UniversalRenderPipelineEditorShaders, ns: UnityEngine.Rendering.Universal, asm: Unity.RenderPipelines.Universal.Runtime}
data:
Expand Down Expand Up @@ -124,6 +220,7 @@ MonoBehaviour:
m_DefaultLineMaterial: {fileID: 2100000, guid: e823cd5b5d27c0f4b8256e7c12ee3e6d, type: 2}
m_DefaultTerrainMaterial: {fileID: 2100000, guid: 594ea882c5a793440b60ff72d896021e, type: 2}
m_DefaultDecalMaterial: {fileID: 2100000, guid: 31d0dcc6f2dd4e4408d18036a2c93862, type: 2}
m_DefaultSpriteMaterial: {fileID: 2100000, guid: 9dfc825aed78fcd4ba02077103263b40, type: 2}
- rid: 3496019934895407222
type: {class: GPUResidentDrawerResources, ns: UnityEngine.Rendering, asm: Unity.RenderPipelines.GPUDriven.Runtime}
data:
Expand Down Expand Up @@ -238,6 +335,9 @@ MonoBehaviour:
m_CoreBlitPS: {fileID: 4800000, guid: 93446b5c5339d4f00b85c159e1159b7c, type: 3}
m_CoreBlitColorAndDepthPS: {fileID: 4800000, guid: d104b2fc1ca6445babb8e90b0758136b, type: 3}
m_SamplingPS: {fileID: 4800000, guid: 04c410c9937594faa893a11dceb85f7e, type: 3}
m_TerrainDetailLit: {fileID: 4800000, guid: f6783ab646d374f94b199774402a5144, type: 3}
m_TerrainDetailGrassBillboard: {fileID: 4800000, guid: 29868e73b638e48ca99a19ea58c48d90, type: 3}
m_TerrainDetailGrass: {fileID: 4800000, guid: e507fdfead5ca47e8b9a768b51c291a1, type: 3}
- rid: 7752762179098771468
type: {class: RenderGraphGlobalSettings, ns: UnityEngine.Rendering, asm: Unity.RenderPipelines.Core.Runtime}
data:
Expand Down
Loading