AuroraMiddleware/skia2
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
ca9ce4de1d
skia2/modules/canvaskit/npm_build/multicanvas.html

130 lines
3.9 KiB
HTML
Raw Normal View History

[canvaskit] Remove the need for users to keep track of contexts. We'll switch to the correct context when necessary (e.g. before calls that talk to the GPU). This is achieved by adding in calls at the JS layer to switch the context before making a call that is known to talk to the GPU (e.g. draw calls on SkCanvas). Another implementation that was considered was to add a C++ shim in GrGLInterface that would switch the context before every call in the GPU - however, that seemed too difficult and would add extra overhead if a single draw* call talks to the GPU multiple times. Bug: skia:12255 Change-Id: I96e4c6b41a5bfcc9913aeaca7ccb125358048ad3 Reviewed-on: https://skia-review.googlesource.com/c/skia/+/432136 Reviewed-by: Brian Salomon <bsalomon@google.com>
2021-08-25 17:13:09 +00:00
<!DOCTYPE html>
<title>CanvasKit (Skia via Web Assembly)</title>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
canvas, img {
border: 1px dashed #AAA;
}
</style>
<canvas id=api1 width=300 height=300></canvas>
<canvas id=api2 width=300 height=300></canvas>
<canvas id=api3 width=300 height=300></canvas>
[canvaskit] Add ability to make texture image across surfaces. Change-Id: Ie82e8257c9f0990d3be99a2429e034ac400b9580 Reviewed-on: https://skia-review.googlesource.com/c/skia/+/469759 Reviewed-by: Brian Salomon <bsalomon@google.com>
2021-11-11 16:20:49 +00:00
<br>
<img id="src" src="https://storage.googleapis.com/skia-cdn/misc/test.png"
width=40 height=40 crossorigin="anonymous">
<canvas id=api4 width=300 height=300></canvas>
<canvas id=api5 width=300 height=300></canvas>
<canvas id=api6 width=300 height=300></canvas>
[infra] Add POC Bazel rules for CanvasKit Many things are not enabled currently (e.g. Skottie, Paragraph), but we can render many APIs using WebGL. To turn on Paragraph, etc, we'll need to tackle fonts, which is a separate effort. This also changes where the build artifacts go. ./build/ is easier to deal with than the old way of sticking them in ./npm_build/bin Change-Id: Ia377360af580a887d03630670438fea2e3157e90 Bug: skia:12541 Reviewed-on: https://skia-review.googlesource.com/c/skia/+/470682 Reviewed-by: Leandro Lovisolo <lovisolo@google.com> Reviewed-by: Ben Wagner <bungeman@google.com>
2021-11-12 16:04:17 +00:00
<script type="text/javascript" src="/build/canvaskit.js"></script>
[canvaskit] Remove the need for users to keep track of contexts. We'll switch to the correct context when necessary (e.g. before calls that talk to the GPU). This is achieved by adding in calls at the JS layer to switch the context before making a call that is known to talk to the GPU (e.g. draw calls on SkCanvas). Another implementation that was considered was to add a C++ shim in GrGLInterface that would switch the context before every call in the GPU - however, that seemed too difficult and would add extra overhead if a single draw* call talks to the GPU multiple times. Bug: skia:12255 Change-Id: I96e4c6b41a5bfcc9913aeaca7ccb125358048ad3 Reviewed-on: https://skia-review.googlesource.com/c/skia/+/432136 Reviewed-by: Brian Salomon <bsalomon@google.com>
2021-08-25 17:13:09 +00:00
<script type="text/javascript" charset="utf-8">
const cdn = 'https://storage.googleapis.com/skia-cdn/misc/';
[infra] Add POC Bazel rules for CanvasKit Many things are not enabled currently (e.g. Skottie, Paragraph), but we can render many APIs using WebGL. To turn on Paragraph, etc, we'll need to tackle fonts, which is a separate effort. This also changes where the build artifacts go. ./build/ is easier to deal with than the old way of sticking them in ./npm_build/bin Change-Id: Ia377360af580a887d03630670438fea2e3157e90 Bug: skia:12541 Reviewed-on: https://skia-review.googlesource.com/c/skia/+/470682 Reviewed-by: Leandro Lovisolo <lovisolo@google.com> Reviewed-by: Ben Wagner <bungeman@google.com>
2021-11-12 16:04:17 +00:00
const ckLoaded = CanvasKitInit({locateFile: (file) => '/build/'+file});
[canvaskit] Remove the need for users to keep track of contexts. We'll switch to the correct context when necessary (e.g. before calls that talk to the GPU). This is achieved by adding in calls at the JS layer to switch the context before making a call that is known to talk to the GPU (e.g. draw calls on SkCanvas). Another implementation that was considered was to add a C++ shim in GrGLInterface that would switch the context before every call in the GPU - however, that seemed too difficult and would add extra overhead if a single draw* call talks to the GPU multiple times. Bug: skia:12255 Change-Id: I96e4c6b41a5bfcc9913aeaca7ccb125358048ad3 Reviewed-on: https://skia-review.googlesource.com/c/skia/+/432136 Reviewed-by: Brian Salomon <bsalomon@google.com>
2021-08-25 17:13:09 +00:00
const loadTestImage = fetch(cdn + 'test.png').then((response) => response.arrayBuffer());
[canvaskit] Add ability to make texture image across surfaces. Change-Id: Ie82e8257c9f0990d3be99a2429e034ac400b9580 Reviewed-on: https://skia-review.googlesource.com/c/skia/+/469759 Reviewed-by: Brian Salomon <bsalomon@google.com>
2021-11-11 16:20:49 +00:00
const imageEle = document.getElementById("src");
[canvaskit] Remove the need for users to keep track of contexts. We'll switch to the correct context when necessary (e.g. before calls that talk to the GPU). This is achieved by adding in calls at the JS layer to switch the context before making a call that is known to talk to the GPU (e.g. draw calls on SkCanvas). Another implementation that was considered was to add a C++ shim in GrGLInterface that would switch the context before every call in the GPU - however, that seemed too difficult and would add extra overhead if a single draw* call talks to the GPU multiple times. Bug: skia:12255 Change-Id: I96e4c6b41a5bfcc9913aeaca7ccb125358048ad3 Reviewed-on: https://skia-review.googlesource.com/c/skia/+/432136 Reviewed-by: Brian Salomon <bsalomon@google.com>
2021-08-25 17:13:09 +00:00
[canvaskit] Add ability to make texture image across surfaces. Change-Id: Ie82e8257c9f0990d3be99a2429e034ac400b9580 Reviewed-on: https://skia-review.googlesource.com/c/skia/+/469759 Reviewed-by: Brian Salomon <bsalomon@google.com>
2021-11-11 16:20:49 +00:00
Promise.all([ckLoaded, loadTestImage, imageEle.decode()]).then((results) => {
ContextSharingExample(results[0]);
MultiCanvasExample(...results);
});
[canvaskit] Remove the need for users to keep track of contexts. We'll switch to the correct context when necessary (e.g. before calls that talk to the GPU). This is achieved by adding in calls at the JS layer to switch the context before making a call that is known to talk to the GPU (e.g. draw calls on SkCanvas). Another implementation that was considered was to add a C++ shim in GrGLInterface that would switch the context before every call in the GPU - however, that seemed too difficult and would add extra overhead if a single draw* call talks to the GPU multiple times. Bug: skia:12255 Change-Id: I96e4c6b41a5bfcc9913aeaca7ccb125358048ad3 Reviewed-on: https://skia-review.googlesource.com/c/skia/+/432136 Reviewed-by: Brian Salomon <bsalomon@google.com>
2021-08-25 17:13:09 +00:00
// This example shows how CanvasKit can automatically switch between multiple canvases
// with different WebGL contexts.
function MultiCanvasExample(CanvasKit, imgBytes) {
const paint = new CanvasKit.Paint();
const surfOne = CanvasKit.MakeWebGLCanvasSurface("api1");
const canvasOne = surfOne.getCanvas();
const surfTwo = CanvasKit.MakeWebGLCanvasSurface("api2");
const canvasTwo = surfTwo.getCanvas();
const surfThree = CanvasKit.MakeWebGLCanvasSurface("api3");
const canvasThree = surfThree.getCanvas();
function firstFrame() {
paint.setColor(CanvasKit.Color4f(1, 0, 0, 1)); // red
canvasOne.drawRect(CanvasKit.LTRBRect(0, 0, 300, 300), paint);
surfOne.flush();
paint.setColor(CanvasKit.Color4f(0, 1, 0, 1)); // green
canvasTwo.drawRect(CanvasKit.LTRBRect(0, 0, 300, 300), paint);
surfTwo.flush();
paint.setColor(CanvasKit.Color4f(0, 0, 1, 1)); // blue
canvasThree.drawRect(CanvasKit.LTRBRect(0, 0, 300, 300), paint);
surfThree.flush();
window.requestAnimationFrame(secondFrame);
}
let img;
function secondFrame() {
img = CanvasKit.MakeImageFromEncoded(imgBytes);
canvasOne.drawImageCubic(img, 10, 10, 0.3, 0.3, null);
surfOne.flush();
canvasTwo.drawImageCubic(img, 10, 10, 0.3, 0.3, null);
surfTwo.flush();
canvasThree.drawImageCubic(img, 10, 10, 0.3, 0.3, null);
surfThree.flush();
window.requestAnimationFrame(thirdFrame);
}
function thirdFrame() {
canvasOne.drawImageCubic(img, 100, 100, 0.3, 0.3, null);
surfOne.flush();
canvasTwo.drawImageCubic(img, 100, 100, 0.3, 0.3, null);
surfTwo.flush();
canvasThree.drawImageCubic(img, 100, 100, 0.3, 0.3, null);
surfThree.flush();
[canvaskit] Add ability to make texture image across surfaces. Change-Id: Ie82e8257c9f0990d3be99a2429e034ac400b9580 Reviewed-on: https://skia-review.googlesource.com/c/skia/+/469759 Reviewed-by: Brian Salomon <bsalomon@google.com>
2021-11-11 16:20:49 +00:00
img.delete();
[canvaskit] Remove the need for users to keep track of contexts. We'll switch to the correct context when necessary (e.g. before calls that talk to the GPU). This is achieved by adding in calls at the JS layer to switch the context before making a call that is known to talk to the GPU (e.g. draw calls on SkCanvas). Another implementation that was considered was to add a C++ shim in GrGLInterface that would switch the context before every call in the GPU - however, that seemed too difficult and would add extra overhead if a single draw* call talks to the GPU multiple times. Bug: skia:12255 Change-Id: I96e4c6b41a5bfcc9913aeaca7ccb125358048ad3 Reviewed-on: https://skia-review.googlesource.com/c/skia/+/432136 Reviewed-by: Brian Salomon <bsalomon@google.com>
2021-08-25 17:13:09 +00:00
}
window.requestAnimationFrame(firstFrame);
[canvaskit] Add ability to make texture image across surfaces. Change-Id: Ie82e8257c9f0990d3be99a2429e034ac400b9580 Reviewed-on: https://skia-review.googlesource.com/c/skia/+/469759 Reviewed-by: Brian Salomon <bsalomon@google.com>
2021-11-11 16:20:49 +00:00
}
[canvaskit] Remove the need for users to keep track of contexts. We'll switch to the correct context when necessary (e.g. before calls that talk to the GPU). This is achieved by adding in calls at the JS layer to switch the context before making a call that is known to talk to the GPU (e.g. draw calls on SkCanvas). Another implementation that was considered was to add a C++ shim in GrGLInterface that would switch the context before every call in the GPU - however, that seemed too difficult and would add extra overhead if a single draw* call talks to the GPU multiple times. Bug: skia:12255 Change-Id: I96e4c6b41a5bfcc9913aeaca7ccb125358048ad3 Reviewed-on: https://skia-review.googlesource.com/c/skia/+/432136 Reviewed-by: Brian Salomon <bsalomon@google.com>
2021-08-25 17:13:09 +00:00
[canvaskit] Add ability to make texture image across surfaces. Change-Id: Ie82e8257c9f0990d3be99a2429e034ac400b9580 Reviewed-on: https://skia-review.googlesource.com/c/skia/+/469759 Reviewed-by: Brian Salomon <bsalomon@google.com>
2021-11-11 16:20:49 +00:00
function ContextSharingExample(CanvasKit) {
const img = CanvasKit.MakeLazyImageFromTextureSource(imageEle);
const surfOne = CanvasKit.MakeWebGLCanvasSurface("api4");
const surfTwo = CanvasKit.MakeWebGLCanvasSurface("api5");
const surfThree = CanvasKit.MakeWebGLCanvasSurface("api6");
let i = 0;
function drawFrame(canvas) {
canvas.drawImageCubic(img, 5+i, 5+i, 0.3, 0.3, null);
i += 1
if (i >= 3) {
if (i > 60) {
img.delete();
return;
}
if (i % 2) {
surfOne.requestAnimationFrame(drawFrame);
} else {
surfTwo.requestAnimationFrame(drawFrame);
}
}
}
surfOne.requestAnimationFrame(drawFrame);
surfTwo.requestAnimationFrame(drawFrame);
surfThree.requestAnimationFrame(drawFrame);
[canvaskit] Remove the need for users to keep track of contexts. We'll switch to the correct context when necessary (e.g. before calls that talk to the GPU). This is achieved by adding in calls at the JS layer to switch the context before making a call that is known to talk to the GPU (e.g. draw calls on SkCanvas). Another implementation that was considered was to add a C++ shim in GrGLInterface that would switch the context before every call in the GPU - however, that seemed too difficult and would add extra overhead if a single draw* call talks to the GPU multiple times. Bug: skia:12255 Change-Id: I96e4c6b41a5bfcc9913aeaca7ccb125358048ad3 Reviewed-on: https://skia-review.googlesource.com/c/skia/+/432136 Reviewed-by: Brian Salomon <bsalomon@google.com>
2021-08-25 17:13:09 +00:00
}
[canvaskit] Add ability to make texture image across surfaces. Change-Id: Ie82e8257c9f0990d3be99a2429e034ac400b9580 Reviewed-on: https://skia-review.googlesource.com/c/skia/+/469759 Reviewed-by: Brian Salomon <bsalomon@google.com>
2021-11-11 16:20:49 +00:00
[canvaskit] Remove the need for users to keep track of contexts. We'll switch to the correct context when necessary (e.g. before calls that talk to the GPU). This is achieved by adding in calls at the JS layer to switch the context before making a call that is known to talk to the GPU (e.g. draw calls on SkCanvas). Another implementation that was considered was to add a C++ shim in GrGLInterface that would switch the context before every call in the GPU - however, that seemed too difficult and would add extra overhead if a single draw* call talks to the GPU multiple times. Bug: skia:12255 Change-Id: I96e4c6b41a5bfcc9913aeaca7ccb125358048ad3 Reviewed-on: https://skia-review.googlesource.com/c/skia/+/432136 Reviewed-by: Brian Salomon <bsalomon@google.com>
2021-08-25 17:13:09 +00:00
</script>
Reference in New Issue Copy Permalink