Merge pull request #31 from Live2D/develop

Update to Cubism 5 SDK for Web R5 beta1

Author: itoh-at-live2d-com

CHANGELOG.md

@@ -5,6 +5,23 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
 
 
+## [5-r.5-beta.1] - 2025-08-26
+
+### Added
+
+* Add `cubismrendertarget_webgl.ts`.
+  * Define a class `CubismRenderTarget_WebGL` that manages the frame buffer and color buffer.
+* Add support for Blend mode and Offscreen drawing.
+
+### Changed
+
+* Change the rendering context requirement in WebGL environments to `WebGL2RenderingContext`.
+  * In particular, when using the blend modes added in Cubism 5.3 and later, `WebGL2RenderingContext.blitFramebuffer()` is used.
+* Change the clipping mask processing uses class `CubismRenderTarget_WebGL`.
+* Change the API called to retrieve the drawable render order from `getDrawableRenderOrders()` to `getRenderOrders()` in CubismCore.
+  * See `CHANGELOG.md` in Core.
+
+
 ## [5-r.4] - 2025-05-15
 
 ### Added
@@ -339,6 +356,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
 * Reformat code using Prettier and ESLint.
 
 
+[5-r.5-beta.1]: https://github.com/Live2D/CubismWebFramework/compare/5-r.4...5-r.5-beta.1
 [5-r.4]: https://github.com/Live2D/CubismWebFramework/compare/5-r.3...5-r.4
 [5-r.3]: https://github.com/Live2D/CubismWebFramework/compare/5-r.2...5-r.3
 [5-r.2]: https://github.com/Live2D/CubismWebFramework/compare/5-r.1...5-r.2

README.ja.md

@@ -30,13 +30,13 @@ Cubism 5 Editorに搭載された新機能のSDK対応については [こちら
 
 ### Node.js
 
-* 24.0.1
-* 22.15.0
+* 24.6.0
+* 22.18.0
 
 
 ### TypeScript
 
-5.8.3
+5.9.2
 
 
 ## 開発環境構築

README.md

@@ -30,13 +30,13 @@ For compatibility with previous versions of Cubism SDK, please refer to [here](h
 
 ### Node.js
 
-* 24.0.1
-* 22.15.0
+* 24.6.0
+* 22.18.0
 
 
 ### TypeScript
 
-5.8.3
+5.9.2
 
 
 ## Development environment construction

Shaders/WebGL/fragshadersrcalphablend.frag

@@ -0,0 +1,54 @@
+/**
+ * Copyright(c) Live2D Inc. All rights reserved.
+ *
+ * Use of this source code is governed by the Live2D Open Software license
+ * that can be found at https://www.live2d.com/eula/live2d-open-software-license-agreement_en.html.
+ */
+
+
+vec4 OverlapRgba(vec3 color, vec3 colorSource, vec3 colorDestination, vec3 parameter)
+{
+    vec3 rgb = color * parameter.x + colorSource * parameter.y + colorDestination * parameter.z;
+    float alpha = parameter.x + parameter.y + parameter.z;
+    return vec4(rgb, alpha);
+}
+
+#if defined(ALPHA_BLEND_OVER)
+vec4 AlphaBlend(vec3 color, vec4 colorSource, vec4 colorDestination)
+{
+    vec3 parameter = vec3(colorSource.a * colorDestination.a, colorSource.a * (1.0 - colorDestination.a), colorDestination.a * (1.0 - colorSource.a));
+    return OverlapRgba(color, colorSource.rgb, colorDestination.rgb, parameter);
+}
+
+#elif defined(ALPHA_BLEND_ATOP)
+vec4 AlphaBlend(vec3 color, vec4 colorSource, vec4 colorDestination)
+{
+    vec3 parameter = vec3(colorSource.a * colorDestination.a, 0, colorDestination.a * (1.0 - colorSource.a));
+    return OverlapRgba(color, colorSource.rgb, colorDestination.rgb, parameter);
+}
+
+#elif defined(ALPHA_BLEND_OUT)
+vec4 AlphaBlend(vec3 color, vec4 colorSource, vec4 colorDestination)
+{
+    vec3 parameter = vec3(0.0, 0.0, colorDestination.a * (1.0 - colorSource.a));
+    return OverlapRgba(color, colorSource.rgb, colorDestination.rgb, parameter);
+}
+
+#elif defined(ALPHA_BLEND_CONJOINTOVER)
+vec4 AlphaBlend(vec3 color, vec4 colorSource, vec4 colorDestination)
+{
+    vec3 parameter = vec3(min(colorSource.a, colorDestination.a), max(colorSource.a - colorDestination.a, 0.0), max(colorDestination.a - colorSource.a, 0.0));
+    return OverlapRgba(color, colorSource.rgb, colorDestination.rgb, parameter);
+}
+
+#elif defined(ALPHA_BLEND_DISJOINTOVER)
+vec4 AlphaBlend(vec3 color, vec4 colorSource, vec4 colorDestination)
+{
+    vec3 parameter = vec3(max(colorSource.a + colorDestination.a - 1.0, 0.0), min(colorSource.a, 1.0 - colorDestination.a), min(colorDestination.a, 1.0 - colorSource.a));
+    return OverlapRgba(color, colorSource.rgb, colorDestination.rgb, parameter);
+}
+
+#else
+#error not supported alpha blend function
+
+#endif