Skip to content

Commit

Permalink
#21 OffscreenCanvasの実装(WIP)
Browse files Browse the repository at this point in the history
  • Loading branch information
@ienaga
ienaga committed Jan 8, 2023
1 parent e3d3a10 commit d870e74
Show file tree
Hide file tree
Showing 27 changed files with 939 additions and 241 deletions.
1 change: 1 addition & 0 deletions .gitignore
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ next2d.js
json
coverage
src/util/Util.replaced.js
src/worker/RenderWorker.js
src/worker/*.min.js
*.html
package-lock.json
36 changes: 34 additions & 2 deletions gulpfile.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ const options = minimist(process.argv.slice(2), {
"string": ["distPath", "version"],
"default": {
"prodBuild": false,
"version": "1.13.0",
"version": "1.14.0",
"distPath": "."
}
});
Expand Down Expand Up @@ -49,6 +49,26 @@ const buildHeaderVersion = () =>
.pipe(gulp.dest("."));
};

/**
* @description RenderWorkerを生成
* @public
*/
const buildRenderWorker = () =>
{
return gulp
.src([
"src/worker/RenderUtil.js",
"src/next2d/display/BlendMode.js",
"src/next2d/display/InterpolationMethod.js",
"src/next2d/display/SpreadMethod.js",
"src/next2d/display/GradientType.js",
"src/webgl/**/*.js",
"src/worker/RenderBase.js"
])
.pipe(concat("RenderWorker.js"))
.pipe(gulp.dest("src/worker"));
};

/**
* @description Workerファイルをminifyにして書き出し
* @public
Expand All @@ -57,7 +77,7 @@ const buildWorkerFile = () =>
{
return gulp
.src([
"src/worker/*.js",
"src/worker/*Worker.js",
"!src/worker/*.min.js"
])
.pipe(uglify())
Expand All @@ -79,6 +99,12 @@ const buildUtilFile = () =>
.replace(/"/g, "\\\"")
.replace(/\n/g, ""))
)
.pipe(replace("###RENDER_WORKER###",
fs.readFileSync("src/worker/RenderWorker.min.js", "utf8")
.replace(/\\/g, "\\\\")
.replace(/"/g, "\\\"")
.replace(/\n/g, ""))
)
.pipe(rename("src/util/Util.replaced.js"))
.pipe(gulp.dest("."));
};
Expand Down Expand Up @@ -113,6 +139,7 @@ const lint = () =>
"src/next2d/**/*.js",
"src/util/CacheStore.js",
"src/webgl/**/*.js",
"src/player/Renderer.js",
"src/player/Player.js",
"src/player/Next2D.js"
])
Expand Down Expand Up @@ -152,6 +179,7 @@ const buildJavaScript = () =>
"src/next2d/**/*.js",
"src/util/CacheStore.js",
"src/webgl/**/*.js",
"src/player/Renderer.js",
"src/player/Player.js",
"src/player/Next2D.js",
"src/Footer.build.file"
Expand Down Expand Up @@ -204,11 +232,13 @@ const watchFiles = () =>
return gulp
.watch([
"src/**/*.js",
"!src/worker/**/RenderWorker.js",
"!src/worker/**/*min.js",
"!src/util/Util.replaced.js"
])
.on("change", gulp.series(
lint,
buildRenderWorker,
buildWorkerFile,
buildUtilFile,
buildJavaScript,
Expand Down Expand Up @@ -292,6 +322,7 @@ const test = (done) =>
exports.default = gulp.series(
buildHeaderVersion,
buildFooterVersion,
buildRenderWorker,
buildWorkerFile,
buildUtilFile,
buildJavaScript,
Expand All @@ -304,6 +335,7 @@ exports.lint = gulp.series(lint);
exports.build = gulp.series(
buildHeaderVersion,
buildFooterVersion,
buildRenderWorker,
buildWorkerFile,
buildUtilFile,
buildJavaScript
Expand Down
1 change: 1 addition & 0 deletions karma.conf.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,6 +36,7 @@ module.exports = function (config)
"src/next2d/**/*.js",
"src/util/CacheStore.js",
"src/webgl/**/*.js",
"src/player/Renderer.js",
"src/player/Player.js",
"src/player/Next2D.js",
"test/**/*.js"
Expand Down
9 changes: 1 addition & 8 deletions src/player/Next2D.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -85,20 +85,13 @@ class Next2D
`0x${data.bgColor.substr(1)}` | 0
);

player._$context._$setColor(
player._$bgColor = Util.$getArray(
color.R / 255,
color.G / 255,
color.B / 255,
1
);

player._$backgroundColor = [
color.R / 255,
color.G / 255,
color.B / 255,
1
];

}

stage.addChild(loaderInfo.content);
Expand Down
161 changes: 23 additions & 138 deletions src/player/Player.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -173,13 +173,6 @@ class Player
*/
this._$ty = 0;

/**
* @type {string|number}
* @default null
* @private
*/
this._$backgroundColor = null;

/**
* @type {string}
* @default up
Expand Down Expand Up @@ -214,27 +207,6 @@ class Player
*/
this._$broadcastEvents = Util.$getMap();

/**
* @type {null}
* @default null
* @private
*/
this._$context = null;

/**
* @type {null}
* @default null
* @private
*/
this._$canvas = null;

/**
* @type {null}
* @default null
* @private
*/
this._$buffer = null;

/**
* @type {number}
* @default 0
Expand Down Expand Up @@ -579,30 +551,8 @@ class Player
const element = Util.$document.getElementById(this.contentElementId);
if (element) {

// set backgroundColor
if (this._$bgColor !== null) {
this._$backgroundColor = this._$bgColor;
}

// background color
if (this._$context) {

if (!this._$backgroundColor || this._$backgroundColor === "transparent") {

this._$context._$setColor(0, 0, 0, 0);

} else {

this._$context._$setColor(
this._$backgroundColor[0],
this._$backgroundColor[1],
this._$backgroundColor[2],
this._$backgroundColor[3]
);

}

}
this._$renderer.setBackgroundColor(this._$bgColor);

// DOM
this._$deleteNode();
Expand Down Expand Up @@ -863,35 +813,13 @@ class Player
*/
_$initializeCanvas ()
{
// main canvas
const canvas = Util.$document.createElement("canvas");
canvas.width = 1;
canvas.height = 1;
this._$canvas = canvas;

// create gl context
const option = {
"stencil": true,
"premultipliedAlpha": true,
"antialias": false,
"depth": false,
"preserveDrawingBuffer": true
};

let isWebGL2Context = true;
this._$renderer = new Renderer();
this._$renderer.samples = this.getSamples();
this._$renderer.initialize();

let gl = canvas.getContext("webgl2", option);
if (!gl) {
gl = canvas.getContext("webgl", option)
|| canvas.getContext("experimental-webgl", option);
isWebGL2Context = false;
}

if (gl) {
this._$context = new CanvasToWebGLContext(gl, isWebGL2Context);
} else {
alert("WebGL setting is off. Please turn the setting on.");
}
// set main canvas
const canvas = this._$renderer.canvas;
this._$canvas = canvas;

// set event
if (Util.$isTouch) {
Expand Down Expand Up @@ -1097,36 +1025,16 @@ class Player
this._$width = width;
this._$height = height;

// main
this._$canvas.width = width;
this._$canvas.height = height;
// main canvas resize
if (this._$renderer) {
this._$renderer.resize(width, height);
this._$renderer.setBackgroundColor(this._$bgColor);
}

this._$canvas.style.transform = this._$ratio === 1 && Util.$devicePixelRatio === 1
? ""
: `scale(${1 / this._$ratio})`;

// stage buffer
if (this._$context) { // unit test

this._$context._$gl.viewport(0, 0, width, height);

const manager = this._$context._$frameBufferManager;
if (this._$buffer) {
manager.unbind();
manager.releaseAttachment(this._$buffer, true);
}

this._$buffer = manager
.createCacheAttachment(width, height, false);

// update cache max size
manager._$stencilBufferPool._$maxWidth = width;
manager._$stencilBufferPool._$maxHeight = height;
manager._$textureManager._$maxWidth = width;
manager._$textureManager._$maxHeight = height;
this._$context._$pbo._$maxWidth = width;
this._$context._$pbo._$maxHeight = height;
}

const mScale = this._$scale * this._$ratio;
this._$matrix[0] = mScale;
this._$matrix[3] = mScale;
Expand Down Expand Up @@ -1250,7 +1158,7 @@ class Player

// execute
this._$action();
this._$draw(0);
this._$draw();

// draw event
if (!this._$hitTestStart
Expand Down Expand Up @@ -1628,28 +1536,17 @@ class Player
*/
_$draw ()
{
const canvas = this._$canvas;
const width = canvas.width;
const height = canvas.height;
const context = this._$context;

if (this._$buffer && this._$stage._$updated
&& context && width > 0 && height > 0
if (this._$width > 0 && this._$height > 0
&& this._$stage._$updated && this._$renderer
) {

context._$bind(this._$buffer);

// pre draw
Util.$resetContext(context);
context.setTransform(1, 0, 0, 1, 0, 0);
context.clearRect(0, 0, width, height);

// draw
context.beginPath();
this._$renderer.begin();

this
._$stage
._$draw(context, this._$matrix, Util.$COLOR_ARRAY_IDENTITY);
// this._$stage._$draw(
// this._$renderer.context,
// this._$matrix,
// Util.$COLOR_ARRAY_IDENTITY
// );

// stage end
this._$stage._$updated = false;
Expand All @@ -1663,19 +1560,7 @@ class Player
this._$sounds.clear();
}

const bufferTexture = context
.frameBuffer
.getTextureFromCurrentAttachment();

context.frameBuffer.unbind();

// reset and draw to canvas
Util.$resetContext(context);
context.setTransform(1, 0, 0, 1, 0, 0);
context.clearRect(0, 0, width, height);
context.drawImage(bufferTexture, 0, 0, width, height);

context._$bind(this._$buffer);
this._$renderer.updateMain();
}

}
Expand Down
Loading

0 comments on commit d870e74

Please sign in to comment.