Merge pull request #304 from akashic-games/add-composite-operation

add difference and saturation to composite operation

CHANGELOG.md

@@ -1,5 +1,9 @@
 # CHANGELOG
 
+## 2.9.0
+* @akashic/pdi-types@1.13.0 に追従
+  * サポートする `CompisiteOperation` に `"difference"` と `"saturation"` を追加(ただし Canvas 描画時のみ)
+
 ## 2.8.6
 * `HTMLAudioPlayer#play()` で部分再生するかどうかの判定が誤っていたため修正
 

e2e/tests/renderer/Renderer.spec.ts

@@ -36,6 +36,8 @@ describe("Renderer", () => {
 		"experimental-source-out",
 		"experimental-destination-in",
 		"experimental-destination-atop",
+		"difference",
+		"saturation"
 	];
 
 	for (const rendererCandidate of ["canvas", "webgl"]) {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@akashic/pdi-browser",
-  "version": "2.8.6",
+  "version": "2.9.0",
   "description": "An akashic-pdi implementation for Web browsers",
   "main": "index.js",
   "typings": "lib/full/index.d.ts",
@@ -43,7 +43,7 @@
   "devDependencies": {
     "@akashic/amflow": "^3.3.0",
     "@akashic/eslint-config": "^2.0.0",
-    "@akashic/pdi-types": "^1.12.0",
+    "@akashic/pdi-types": "^1.13.0",
     "@akashic/playlog": "^3.3.0",
     "@types/jest": "^29.2.0",
     "@types/node": "^18.0.0",

src/canvas/context2d/Context2DRenderer.ts

@@ -15,7 +15,9 @@ const compositeOperationTable: { [P in pdi.CompositeOperationString]: string } =
 	"experimental-destination-in": "destination-in",
 	"destination-out": "destination-out",
 	"destination-over": "destination-over",
-	"xor": "xor"
+	"xor": "xor",
+	"difference": "difference",
+	"saturation": "saturation"
 };
 
 export class Context2DRenderer implements Renderer {

src/canvas/webgl/WebGLSharedObject.ts

@@ -441,7 +441,10 @@ export class WebGLSharedObject {
 			"destination-over": [this._context.ONE_MINUS_DST_ALPHA, this._context.ONE],
 			"lighter": [this._context.ONE, this._context.ONE],
 			"copy": [this._context.ONE, this._context.ZERO],
-			"xor": [this._context.ONE_MINUS_DST_ALPHA, this._context.ONE_MINUS_SRC_ALPHA]
+			"xor": [this._context.ONE_MINUS_DST_ALPHA, this._context.ONE_MINUS_SRC_ALPHA],
+			// difference と saturation は WebGL での描画に対応していないため、source-over と同等の値にする
+			"difference": [this._context.ONE, this._context.ONE_MINUS_SRC_ALPHA],
+			"saturation": [this._context.ONE, this._context.ONE_MINUS_SRC_ALPHA],
 		};
 
 		const compositeOperation = this._compositeOps[this._currentCompositeOperation];