test_strokes.webgl.patch
| src/com/goldencode/p2j/ui/client/driver/web/index.html 2020-11-02 10:01:46 +0000 | ||
|---|---|---|
| 114 | 114 |
<script type="text/javascript" src="${webRoot}/common/p2j.sound.js"></script>
|
| 115 | 115 |
<script type="text/javascript" src="${webRoot}/client/p2j.strokes.js"></script>
|
| 116 | 116 |
<script type="text/javascript" src="${webRoot}/client/p2j.canvas_renderer.js"></script>
|
| 117 |
<script type="text/javascript" src="${webRoot}/client/p2j.strokes.webgl.js"></script>
|
|
| 118 |
<script type="text/javascript" src="${webRoot}/client/p2j.canvas_renderer_webgl.js"></script>
|
|
| 117 | 119 |
<script type="text/javascript" src="${webRoot}/client/p2j.virtual_desktop.js"></script>
|
| 118 | 120 |
<script type="text/javascript" src="${webRoot}/client/p2j.mouse.js"></script>
|
| 119 | 121 |
<script type="text/javascript" src="${webRoot}/client/p2j.screen.js"></script>
|
| src/com/goldencode/p2j/ui/client/gui/driver/web/GuiWebSocket.java 2020-11-05 13:58:26 +0000 | ||
|---|---|---|
| 324 | 324 |
|
| 325 | 325 |
// window ID = 0 means the global cache |
| 326 | 326 |
this.perWidgetCache.addCacheExpiryListener(new DrawCacheExpiryListener(0)); |
| 327 |
this.graphicsCached = graphicsCached; |
|
| 327 |
this.graphicsCached = false;//graphicsCached;
|
|
| 328 | 328 |
} |
| 329 | 329 |
|
| 330 | 330 |
/** |
| src/com/goldencode/p2j/ui/client/gui/driver/web/res/p2j.canvas_renderer_webgl.js 2020-11-05 21:14:15 +0000 | ||
|---|---|---|
| 1969 | 1969 |
} |
| 1970 | 1970 |
} |
| 1971 | 1971 |
} |
| 1972 |
else |
|
| 1973 |
{
|
|
| 1974 |
var renderer = this.strokesManager.getStrokePathRenderer(this, this.strokeStyleId, |
|
| 1975 |
this.strokeWidth, color); |
|
| 1976 |
|
|
| 1977 |
renderer.beginStroke(); |
|
| 1978 |
this.drawLineSegment(x, y, x + width, y, renderer); |
|
| 1979 |
this.drawLineSegment(x + width, y + 1, x + width, y + height, renderer); |
|
| 1980 |
this.drawLineSegment(x + width - 1, y + height, x + 1, y + height, renderer); |
|
| 1981 |
this.drawLineSegment(x, y + height, x, y + 1, renderer);// close the path |
|
| 1982 |
} |
|
| 1972 | 1983 |
}; |
| 1973 | 1984 | |
| 1974 | 1985 |
/** |
| src/com/goldencode/p2j/ui/client/gui/driver/web/res/p2j.perf_tests.js 2020-11-05 12:04:54 +0000 | ||
|---|---|---|
| 734 | 734 |
return result; |
| 735 | 735 |
}; |
| 736 | 736 | |
| 737 |
function drawTriangleTest() |
|
| 738 |
{
|
|
| 739 |
clear(); |
|
| 740 |
var x1 = 100; |
|
| 741 |
var y1 = 76; |
|
| 742 |
var x2 = 300; |
|
| 743 |
var y2 = 300; |
|
| 744 |
var x3 = 400; |
|
| 745 |
var y3 = 77; |
|
| 746 |
var black = [0, 0, 0]; |
|
| 747 |
var t = [x1, y1, x2, y2, x3, y3]; |
|
| 748 |
append("Triangle" + JSON.stringify(t));
|
|
| 749 |
me.canvasRenderer.setColor(black); |
|
| 750 |
me.canvasRenderer.drawLine(x1, y1, x2, y2, black); |
|
| 751 |
me.canvasRenderer.drawLine(x3, y1-20, x3, y2+20, black); |
|
| 752 |
me.canvasRenderer.flash(); |
|
| 753 |
me.canvasRenderer.drawLine(x2, y2, x3, y3, black); |
|
| 754 |
me.canvasRenderer.flash(); |
|
| 755 |
me.canvasRenderer.drawLine(x3, y3, x1, y1, black); |
|
| 756 |
me.canvasRenderer.flash(); |
|
| 757 |
} |
|
| 758 |
|
|
| 737 | 759 |
function clipTrianglesTest() |
| 738 | 760 |
{
|
| 739 | 761 |
clear(); |
| 740 | 762 |
var x1 = 100; |
| 741 |
var y1 = 100; |
|
| 763 |
var y1 = 100 + Math.floor(Math.random() * 30) * Math.sign(Math.random() - 0.5);
|
|
| 742 | 764 |
var x2 = 300; |
| 743 | 765 |
var y2 = 300; |
| 744 | 766 |
var x3 = 400; |
| 745 |
var y3 = 100; |
|
| 767 |
var y3 = 100 - Math.floor(Math.random() * 30) * Math.sign(Math.random() - 0.5);
|
|
| 746 | 768 |
clipRegions = [{x: 100, y: 100, width: 101, height: 201},
|
| 747 | 769 |
{x: 280, y: 290, width: 101, height: 201},
|
| 748 | 770 |
{x: 265, y: 275, width: 101, height: 1},
|
| ... | ... | |
| 754 | 776 |
{x: 460, y: 100, width: 101, height: 101}];
|
| 755 | 777 |
var black = [0, 0, 0]; |
| 756 | 778 |
var yellow = [255, 255, 0]; |
| 779 |
var t = [x1, y1, x2, y2, x3, y3, 0, 0, 0, 1]; |
|
| 780 |
append("Split triangle" + JSON.stringify(t) + " into areas:");
|
|
| 757 | 781 |
me.canvasRenderer.setColor(black); |
| 758 | 782 |
me.canvasRenderer.drawLine(x1, y1, x2, y2, black); |
| 759 | 783 |
me.canvasRenderer.drawLine(x2, y2, x3, y3, black); |
| ... | ... | |
| 768 | 792 |
me.canvasRenderer.drawRect(rect.x, rect.y, rect.width, rect.height, red, false); |
| 769 | 793 |
} |
| 770 | 794 |
me.canvasRenderer.flash(); |
| 771 |
var test = clipTriangles([[x1, y1, x2, y2, x3, y3, 0, 0, 0, 1]]);
|
|
| 795 |
var test = clipTriangles([t]);
|
|
| 772 | 796 |
|
| 773 | 797 |
me.canvasRenderer.setColor(yellow); |
| 774 | 798 |
for (var i = 0; i < test.length; i++) |
| ... | ... | |
| 1604 | 1628 |
clipTrianglesTest(); |
| 1605 | 1629 |
} |
| 1606 | 1630 |
})); |
| 1631 |
pSubMenu2.addChild(new MenuItem({
|
|
| 1632 |
label: "Draw Triangle Test", |
|
| 1633 |
onClick: function(event) |
|
| 1634 |
{
|
|
| 1635 |
drawTriangleTest(); |
|
| 1636 |
} |
|
| 1637 |
})); |
|
| 1607 | 1638 |
/* |
| 1608 | 1639 |
pSubMenu2.addChild(new MenuItem({
|
| 1609 | 1640 |
label: "Copy", |
| src/com/goldencode/p2j/ui/client/gui/driver/web/res/p2j.screen.js 2020-11-05 19:23:50 +0000 | ||
|---|---|---|
| 340 | 340 |
* Creates a line strokes object that plays a manager role, used to apply stroke styles |
| 341 | 341 |
* to lines and to the native canvas context. |
| 342 | 342 |
*/ |
| 343 |
var strokesManager = new LineStrokes(); |
|
| 343 |
var strokesManager = new LineStrokesWebGL();
|
|
| 344 | 344 |
|
| 345 | 345 |
/** |
| 346 | 346 |
* Holds the virtual desktop with task bar and bottom and right drop zones. |
| ... | ... | |
| 1352 | 1352 |
this.iconHeight = 0; |
| 1353 | 1353 |
|
| 1354 | 1354 |
/** Creates canvas renderer. */ |
| 1355 |
this.canvasRenderer = new CanvasRenderer(this.offscreenCanvas, this.offscreenContext, |
|
| 1355 |
this.canvasRenderer = new WebGLCanvasRenderer(this.offscreenCanvas, this.offscreenContext,
|
|
| 1356 | 1356 |
this.canvas, strokesManager, p2j.fonts, p2j.logger); |
| 1357 | 1357 |
|
| 1358 | 1358 |
/** |
| src/com/goldencode/p2j/ui/client/gui/driver/web/res/p2j.strokes.webgl.js 2020-11-05 19:31:11 +0000 | ||
|---|---|---|
| 282 | 282 |
return LineStrokeEnum.DEFAULT; |
| 283 | 283 |
} |
| 284 | 284 | |
| 285 |
this.applyStrokeToCanvas = function(context, strokeStyle, width) |
|
| 286 |
{
|
|
| 287 |
if (context instanceof CanvasRenderingContext2D) |
|
| 288 |
{
|
|
| 289 |
var basicStroke = getLineStroke(strokeStyle, width); |
|
| 290 |
context.lineWidth = basicStroke.getWidth(); |
|
| 291 |
|
|
| 292 |
context.lineCap = basicStroke.getCap(); |
|
| 293 |
|
|
| 294 |
context.lineJoin = basicStroke.getJoin(); |
|
| 295 |
|
|
| 296 |
context.miterLimit = basicStroke.getMiterLimit(); |
|
| 297 |
if (basicStroke.getDash()) |
|
| 298 |
{
|
|
| 299 |
context.setLineDash(basicStroke.getDash()); |
|
| 300 |
} |
|
| 301 |
else |
|
| 302 |
{
|
|
| 303 |
context.setLineDash([]); |
|
| 304 |
} |
|
| 305 |
context.lineDashOffset = basicStroke.getDashPhase(); |
|
| 306 |
} |
|
| 307 |
} |
|
| 308 | ||
| 285 | 309 |
/** |
| 286 | 310 |
* Defines StrokeRenderer class |
| 287 | 311 |
*/ |
| ... | ... | |
| 344 | 368 |
*/ |
| 345 | 369 |
function DotsPathRenderer(canvasRenderer, basicStroke, strokeColor) |
| 346 | 370 |
{
|
| 347 |
var pixel = canvasRenderer.createImageData(1, 1); |
|
| 371 |
var state = {};
|
|
| 372 |
var color = strokeColor.concat([255]); |
|
| 373 |
var width = basicStroke.getWidth(); |
|
| 374 |
var pixel = canvasRenderer.createImageData(width, width); |
|
| 348 | 375 |
var pixelData = pixel.data; |
| 349 |
pixelData[3] = 0xFF; |
|
| 350 |
var state = {};
|
|
| 351 |
var color = strokeColor.concat([255]); |
|
| 352 |
var width = basicStroke.getWidth(); |
|
| 376 |
|
|
| 377 |
var length = 4 * width * width; |
|
| 378 | ||
| 379 |
// Fill a line image with the given stroke color |
|
| 380 |
pixelData[0] = strokeColor[0]; |
|
| 381 |
pixelData[1] = strokeColor[1]; |
|
| 382 |
pixelData[2] = strokeColor[2]; |
|
| 383 |
pixelData[3] = 255; |
|
| 384 | ||
| 385 |
var pos = 4; |
|
| 386 |
var seqLen = 4; |
|
| 387 |
while(pos < length) |
|
| 388 |
{
|
|
| 389 |
pixelData.copyWithin(pos, 0, seqLen); |
|
| 390 |
// increment position by the length of the current segment |
|
| 391 |
pos += seqLen; |
|
| 392 |
// double the length of the next segment |
|
| 393 |
seqLen <<= 1; |
|
| 394 |
} |
|
| 353 | 395 |
|
| 354 | 396 |
/** |
| 355 | 397 |
* Normalizes a dash offset distance according to the given dash pattern. |
| ... | ... | |
| 437 | 479 |
var x = x1; |
| 438 | 480 |
var y = y1; |
| 439 | 481 |
var triangles = []; |
| 440 |
var dots = []; |
|
| 482 |
// var dots = [];
|
|
| 441 | 483 |
var a; |
| 442 | 484 |
var b; |
| 443 | 485 |
// precondition: y2 should be greater or equal than y1. |
| ... | ... | |
| 448 | 490 |
idx = (idx + 1) % len; |
| 449 | 491 |
rest = state.dash[idx]; |
| 450 | 492 |
dashOn = !dashOn; |
| 451 |
if (dots.length > 0) |
|
| 452 |
{
|
|
| 453 |
a = dots[0]; |
|
| 454 |
b = dots.pop(); |
|
| 455 |
dots.length = 0; |
|
| 456 |
if (dx === 0) |
|
| 457 |
{
|
|
| 458 |
triangles.push([a.x, a.y, a.x + width, a.y, b.x, b.y, color[0], color[1], color[2], color[3]]); |
|
| 459 |
triangles.push([b.x, b.y, b.x + width, b.y, a.x + width, a.y, color[0], color[1], color[2], color[3]]); |
|
| 460 |
} |
|
| 461 |
else |
|
| 462 |
{
|
|
| 463 |
triangles.push([a.x, a.y, a.x, a.y + width, b.x, b.y, color[0], color[1], color[2], color[3]]); |
|
| 464 |
triangles.push([b.x, b.y, b.x, b.y + width, a.x, a.y + width, color[0], color[1], color[2], color[3]]); |
|
| 465 |
} |
|
| 466 |
} |
|
| 493 |
// if (dots.length > 0)
|
|
| 494 |
// {
|
|
| 495 |
// a = dots[0];
|
|
| 496 |
// b = dots.pop();
|
|
| 497 |
// dots.length = 0;
|
|
| 498 |
// if (dx === 0)
|
|
| 499 |
// {
|
|
| 500 |
// triangles.push([a.x, a.y, a.x + width, a.y, b.x, b.y, color[0], color[1], color[2], color[3]]);
|
|
| 501 |
// triangles.push([b.x, b.y, b.x + width, b.y, a.x + width, a.y, color[0], color[1], color[2], color[3]]);
|
|
| 502 |
// }
|
|
| 503 |
// else
|
|
| 504 |
// {
|
|
| 505 |
// triangles.push([a.x, a.y, a.x, a.y + width, b.x, b.y, color[0], color[1], color[2], color[3]]);
|
|
| 506 |
// triangles.push([b.x, b.y, b.x, b.y + width, a.x, a.y + width, color[0], color[1], color[2], color[3]]);
|
|
| 507 |
// }
|
|
| 508 |
// }
|
|
| 467 | 509 |
} |
| 468 | 510 |
rest -= 1; |
| 469 | 511 |
|
| 470 | 512 |
if (dashOn) |
| 471 | 513 |
{
|
| 472 |
dots.push({x:x,y:y});
|
|
| 514 |
// dots.push({x:x,y:y});
|
|
| 473 | 515 |
// fill a pixel and put it on the canvas. |
| 474 | 516 |
// pixelData[0] = strokeColor[0]; |
| 475 | 517 |
// pixelData[1] = strokeColor[1]; |
| 476 | 518 |
// pixelData[2] = strokeColor[2]; |
| 477 | 519 | |
| 478 | 520 |
// TODO |
| 479 |
//canvasRenderer.putImageData(pixel, x, y);
|
|
| 521 |
canvasRenderer.drawImage(x, y, width, width, pixelData);
|
|
| 480 | 522 |
} |
| 481 | 523 |
// vertical line: increase Y-coordinate |
| 482 | 524 |
if (dx === 0) |
| ... | ... | |
| 520 | 562 |
if (dashOn) |
| 521 | 563 |
{
|
| 522 | 564 |
// fill a pixel and put it on the canvas. |
| 523 |
pixelData[0] = strokeColor[0]; |
|
| 524 |
pixelData[1] = strokeColor[1]; |
|
| 525 |
pixelData[2] = strokeColor[2]; |
|
| 565 |
canvasRenderer.drawImage(x, y, width, width, pixelData); |
|
| 566 |
// pixelData[0] = strokeColor[0]; |
|
| 567 |
// pixelData[1] = strokeColor[1]; |
|
| 568 |
// pixelData[2] = strokeColor[2]; |
|
| 526 | 569 | |
| 527 | 570 |
// TODO |
| 528 | 571 |
//canvasRenderer.putImageData(pixel, x, y); |