| 70 |
70 |
var vertexShaderSource =
|
| 71 |
71 |
"attribute vec2 a_position;\n" +
|
| 72 |
72 |
"attribute vec4 a_color;\n" +
|
|
73 |
"//attribute mediump float a_dist;\n" +
|
|
74 |
"//attribute vec2 a_endpos;\n" +
|
| 73 |
75 |
"uniform vec2 u_resolution;\n" +
|
| 74 |
76 |
"varying vec4 vs_out;\n" +
|
| 75 |
77 |
"//mediump float gl_PointSize;\n" +
|
| 76 |
|
"void main() {\n" +
|
|
78 |
"vec4 convert(vec2 v)\n" +
|
|
79 |
"{\n" +
|
| 77 |
80 |
" // convert the rectangle from pixels to 0.0 to 1.0\n" +
|
| 78 |
|
" vec2 zeroToOne = a_position / u_resolution;\n" +
|
|
81 |
" vec2 zeroToOne = v / u_resolution;\n" +
|
| 79 |
82 |
" // convert from 0->1 to 0->2\n" +
|
| 80 |
83 |
" vec2 zeroToTwo = zeroToOne * 2.0;\n" +
|
| 81 |
84 |
" // convert from 0->2 to -1->+1 (clipspace)\n" +
|
| 82 |
85 |
" vec2 clipSpace = zeroToTwo - 1.0;\n" +
|
| 83 |
|
" gl_Position = vec4(clipSpace * vec2(1, -1), 0, 1);\n" +
|
|
86 |
" return vec4(clipSpace * vec2(1, -1), 0, 1);\n" +
|
|
87 |
"}\n" +
|
|
88 |
"\n" +
|
|
89 |
"void main() {\n" +
|
|
90 |
" vec4 startPos = convert(a_position);\n" +
|
|
91 |
"// vec4 endPos = convert(a_endpos);\n" +
|
|
92 |
"// if (a_dist > 0.0) {\n" +
|
|
93 |
" //gl_Position = mix(startPos, endPos, a_dist);\n" +
|
|
94 |
" // gl_Position = vec4(0);\n" +
|
|
95 |
" //}\n" +
|
|
96 |
" //else {\n" +
|
|
97 |
" gl_Position = startPos;\n" +
|
|
98 |
" //}\n" +
|
| 84 |
99 |
" vs_out = a_color / 255.0;\n" +
|
| 85 |
|
"// gl_PointSize = 4.0;\n" +
|
|
100 |
" gl_PointSize = 1.0;\n" +
|
| 86 |
101 |
"}\n";
|
| 87 |
102 |
|
| 88 |
103 |
var fragmentShaderSource =
|
| ... | ... | |
| 145 |
160 |
|
| 146 |
161 |
me.canvasRenderer.clear();
|
| 147 |
162 |
me.canvasRenderer.flash();
|
|
163 |
me.glCanvasRenderer.clear();
|
|
164 |
me.glCanvasRenderer.flash();
|
| 148 |
165 |
var color = [0, 0, 0];
|
| 149 |
166 |
me.canvasRenderer.drawRect(1, 1, me.width - 2, me.height - 2, color, false);
|
| 150 |
167 |
me.canvasRenderer.flash();
|
| ... | ... | |
| 163 |
180 |
// Clear the canvas.
|
| 164 |
181 |
me.gl2.clear(me.gl2.COLOR_BUFFER_BIT);
|
| 165 |
182 |
}
|
|
183 |
|
|
184 |
if (me.glCanvasRenderer.gl)
|
|
185 |
{
|
|
186 |
me.glCanvasRenderer.gl.viewport(0, 0, me.glCanvasRenderer.gl.canvas.width, me.glCanvasRenderer.gl.canvas.height);
|
|
187 |
// Clear the canvas.
|
|
188 |
me.glCanvasRenderer.gl.clear(me.glCanvasRenderer.gl.COLOR_BUFFER_BIT);
|
|
189 |
}
|
| 166 |
190 |
};
|
| 167 |
191 |
|
| 168 |
192 |
function restoreLineStyle()
|
| 169 |
193 |
{
|
| 170 |
194 |
//restore line style
|
|
195 |
me.strokeStyle = 0;
|
|
196 |
me.glCanvasRenderer.setLineStroke(me.strokeStyle, 1);
|
| 171 |
197 |
me.canvasRenderer.setLineStroke(me.strokeStyle, 1);
|
| 172 |
198 |
me.strokesManager.applyStrokeToCanvas(me.ctx, me.strokeStyle, 1);
|
| 173 |
199 |
}
|
| ... | ... | |
| 196 |
222 |
me.canvasRenderer.setLineStroke(me.strokeStyle, me.strokeWidth);
|
| 197 |
223 |
me.strokesManager.applyStrokeToCanvas(me.ctx, me.strokeStyle, me.strokeWidth);
|
| 198 |
224 |
|
|
225 |
|
|
226 |
me.glCanvasRenderer = new WebGLCanvasRenderer(me.offscreenCanvas, me.offscreenContext,
|
|
227 |
me.canvas, me.strokesManager, p2j.fonts, p2j.logger);
|
|
228 |
me.glCanvasRenderer.updateCanvasVisibility("visible");
|
|
229 |
me.glCanvasRenderer.resize(me.width, me.height);
|
|
230 |
|
| 199 |
231 |
clear();
|
| 200 |
232 |
|
| 201 |
233 |
var gl = me.canvas0.getContext("webgl", {antialias: false});
|
| ... | ... | |
| 223 |
255 |
me.resolutionUniformLocation = resolutionUniformLocation;
|
| 224 |
256 |
var colorAttributeLocation = gl.getAttribLocation(program, "a_color");
|
| 225 |
257 |
me.colorAttributeLocation = colorAttributeLocation;
|
| 226 |
|
|
|
258 |
|
|
259 |
/*
|
|
260 |
var endPosAttrLoc = gl.getAttribLocation(program, "a_endpos");
|
|
261 |
me.endPosAttrLoc = endPosAttrLoc;
|
|
262 |
var distAttrLoc = gl.getAttribLocation(program, "a_dist");
|
|
263 |
me.distAttrLoc = distAttrLoc;
|
|
264 |
*/
|
|
265 |
|
| 227 |
266 |
// Create a buffer to put three 2d clip space points in
|
| 228 |
267 |
var positionBuffer = gl.createBuffer();
|
| 229 |
268 |
me.positionBuffer = positionBuffer;
|
| ... | ... | |
| 278 |
317 |
var offset = 8; // start at the beginning of the buffer
|
| 279 |
318 |
gl.vertexAttribPointer(
|
| 280 |
319 |
colorAttributeLocation, size, type, normalize, stride, offset);
|
| 281 |
|
|
|
320 |
/*
|
|
321 |
me.distBuf = gl.createBuffer();
|
|
322 |
gl.enableVertexAttribArray(me.distAttrLoc);
|
|
323 |
gl.bindBuffer(gl.ARRAY_BUFFER, me.distBuf);
|
|
324 |
var size = 1; // 1 components per iteration
|
|
325 |
var type = gl.FLOAT; // the data is 32bit floats
|
|
326 |
var normalize = false; // don't normalize the data
|
|
327 |
var stride = 0; // 0 = move forward size * sizeof(type) each iteration to get the next position
|
|
328 |
var offset = 0; // start at the beginning of the buffer
|
|
329 |
gl.vertexAttribPointer(
|
|
330 |
me.distAttrLoc, size, type, normalize, stride, offset);
|
|
331 |
me.endPosBuf = gl.createBuffer();
|
|
332 |
gl.enableVertexAttribArray(me.endPosAttrLoc);
|
|
333 |
gl.bindBuffer(gl.ARRAY_BUFFER, me.endPosBuf);
|
|
334 |
var size = 2; // 2 components per iteration
|
|
335 |
var type = gl.FLOAT; // the data is 32bit floats
|
|
336 |
var normalize = false; // don't normalize the data
|
|
337 |
var stride = 0; // 0 = move forward size * sizeof(type) each iteration to get the next position
|
|
338 |
var offset = 0; // start at the beginning of the buffer
|
|
339 |
gl.vertexAttribPointer(
|
|
340 |
me.endPosAttrLoc, size, type, normalize, stride, offset);
|
|
341 |
*/
|
| 282 |
342 |
// set the resolution
|
| 283 |
343 |
gl.uniform2f(resolutionUniformLocation, gl.canvas.width, gl.canvas.height);
|
| 284 |
344 |
}
|
| 285 |
345 |
|
| 286 |
|
/**
|
| 287 |
|
* Calculates the common part of the given line segment and the given clip rectangle and it saves
|
| 288 |
|
* the order from the left point to the right point.
|
| 289 |
|
*
|
| 290 |
|
* @param {Number} x1
|
| 291 |
|
* X coordinate of the left vertex of the given line segment.
|
| 292 |
|
* @param {Number} y1
|
| 293 |
|
* Y coordinate of the left vertex of the given line segment.
|
| 294 |
|
* @param {Number} x2
|
| 295 |
|
* X coordinate of the right vertex of the given line segment.
|
| 296 |
|
* @param {Number} y2
|
| 297 |
|
* Y coordinate of the right vertex of the given line segment.
|
| 298 |
|
* @param {Object} rect
|
| 299 |
|
* The given clip rectangle
|
| 300 |
|
*
|
| 301 |
|
* @return {Array}
|
| 302 |
|
* The common part of the given line with the clip rectangle [new_x1, new_y1, new_x2, new_y2],
|
| 303 |
|
* these vertices have the same order from the left point to the right point, otherwise
|
| 304 |
|
* it returns a condition that proves that there is no common part.
|
| 305 |
|
*/
|
| 306 |
|
function cutTriangleLine(x1, y1, x2, y2, left, top, right, bottom)
|
| 307 |
|
{
|
| 308 |
|
//xa, ya xb, yb is normalized region covered this line segment
|
| 309 |
|
var xa;
|
| 310 |
|
var xb;
|
| 311 |
|
var incx = (x1 < x2);
|
| 312 |
|
if (incx)
|
| 313 |
|
{
|
| 314 |
|
xa = x1;
|
| 315 |
|
xb = x2;
|
| 316 |
|
}
|
| 317 |
|
else
|
| 318 |
|
{
|
| 319 |
|
xa = x2;
|
| 320 |
|
xb = x1;
|
| 321 |
|
}
|
| 322 |
|
var ya;
|
| 323 |
|
var yb;
|
| 324 |
|
var incy = (y1 < y2);
|
| 325 |
|
if (incy)
|
| 326 |
|
{
|
| 327 |
|
ya = y1;
|
| 328 |
|
yb = y2;
|
| 329 |
|
}
|
| 330 |
|
else
|
| 331 |
|
{
|
| 332 |
|
ya = y2;
|
| 333 |
|
yb = y1;
|
| 334 |
|
}
|
| 335 |
|
|
| 336 |
|
if (yb < top)
|
| 337 |
|
{
|
| 338 |
|
return incx ? [[left, top], [right,top]] : [[right, top], [left, top]];
|
| 339 |
|
}
|
| 340 |
|
|
| 341 |
|
if (ya > bottom)
|
| 342 |
|
{
|
| 343 |
|
return incx ? [[left, bottom], [right, bottom]] : [[right, bottom], [left, bottom]];
|
| 344 |
|
}
|
| 345 |
|
|
| 346 |
|
if (xb < left)
|
| 347 |
|
{
|
| 348 |
|
return incy ? [[left, top], [left, bottom]] : [[left, bottom], [left, top]];
|
| 349 |
|
}
|
| 350 |
|
|
| 351 |
|
if (xa > right)
|
| 352 |
|
{
|
| 353 |
|
return incy ? [[right, top], [right, bottom]] : [[right, bottom], [right, top]];
|
| 354 |
|
}
|
| 355 |
|
|
| 356 |
|
xa = Math.max(left, xa),
|
| 357 |
|
ya = Math.max(top, ya),
|
| 358 |
|
xb = Math.min(right, xb),
|
| 359 |
|
yb = Math.min(bottom, yb)
|
| 360 |
|
|
| 361 |
|
// check that it is vertical or horizontal
|
| 362 |
|
if ((x1 == x2) || (y1 == y2))
|
| 363 |
|
{
|
| 364 |
|
if (incx || incy)
|
| 365 |
|
{
|
| 366 |
|
return [xa, ya, xb, yb];
|
| 367 |
|
}
|
| 368 |
|
else
|
| 369 |
|
{
|
| 370 |
|
return [xb, yb, xa, ya];
|
| 371 |
|
}
|
| 372 |
|
}
|
| 373 |
|
else
|
| 374 |
|
{
|
| 375 |
|
ya = (y1 * (x2 - xa) / (x2 - x1)) + (y2 * (xa - x1) / (x2 - x1));
|
| 376 |
|
yb = (y1 * (x2 - xb) / (x2 - x1)) + (y2 * (xb - x1) / (x2 - x1));
|
| 377 |
|
|
| 378 |
|
if (yb <= top && ya <= top)
|
| 379 |
|
{
|
| 380 |
|
return incx ? [[left, top], [right,top]] : [[right, top], [left, top]];
|
| 381 |
|
}
|
| 382 |
|
|
| 383 |
|
if (ya >= bottom && yb >= bottom)
|
| 384 |
|
{
|
| 385 |
|
return incx ? [[left, bottom], [right, bottom]] : [[right, bottom], [left, bottom]];
|
| 386 |
|
}
|
| 387 |
|
|
| 388 |
|
if (ya >= bottom && yb <= bottom)
|
| 389 |
|
{
|
| 390 |
|
xa = (bottom*(x2-x1) + y2*x1 - y1*x2)/(y2-y1);
|
| 391 |
|
ya = bottom;
|
| 392 |
|
}
|
| 393 |
|
|
| 394 |
|
if (ya <= bottom && yb >= bottom)
|
| 395 |
|
{
|
| 396 |
|
xb = (bottom*(x2-x1) + y2*x1 - y1*x2)/(y2-y1);
|
| 397 |
|
yb = bottom;
|
| 398 |
|
}
|
| 399 |
|
|
| 400 |
|
if (ya >= top && yb <= top)
|
| 401 |
|
{
|
| 402 |
|
xb = (top*(x2-x1) + y2*x1 - y1*x2)/(y2-y1);
|
| 403 |
|
yb = top;
|
| 404 |
|
}
|
| 405 |
|
|
| 406 |
|
if (ya <= top && yb >= top)
|
| 407 |
|
{
|
| 408 |
|
xa = (top*(x2-x1) + y2*x1 - y1*x2)/(y2-y1);
|
| 409 |
|
ya = top;
|
| 410 |
|
}
|
| 411 |
|
|
| 412 |
|
|
| 413 |
|
if (incx)
|
| 414 |
|
{
|
| 415 |
|
return [xa, ya, xb, yb];
|
| 416 |
|
}
|
| 417 |
|
else
|
| 418 |
|
{
|
| 419 |
|
return [xb, yb, xa, ya];
|
| 420 |
|
}
|
| 421 |
|
}
|
| 422 |
|
}
|
| 423 |
|
|
| 424 |
|
function isInTriangle(x, y, x1, y1, x2, y2, x3, y3)
|
| 425 |
|
{
|
| 426 |
|
var d = (x1-x3)*(y2-y3) - (x2-x3)*(y1-y3);
|
| 427 |
|
|
| 428 |
|
var d1 = (x-x3)*(y2-y3) - (x2-x3)*(y-y3);
|
| 429 |
|
|
| 430 |
|
var d2 = (x1-x3)*(y-y3) - (x-x3)*(y1-y3);
|
| 431 |
|
|
| 432 |
|
var d3 = d - d1 - d2;
|
| 433 |
|
|
| 434 |
|
if (d > 0)
|
| 435 |
|
{
|
| 436 |
|
return d1 >= 0 && d2 >= 0 && d3 >= 0;
|
| 437 |
|
}
|
| 438 |
|
else if (d < 0)
|
| 439 |
|
{
|
| 440 |
|
return d1 <= 0 && d2 <= 0 && d3 <= 0;
|
| 441 |
|
}
|
| 442 |
|
|
| 443 |
|
var m = Math.min(x1, x2, x3);
|
| 444 |
|
var M = Math.max(x1, x2, x3);
|
| 445 |
|
|
| 446 |
|
return (d1 == 0) && (d2 == 0) && (x >= m) && (x <= M);
|
| 447 |
|
}
|
| 448 |
|
var clipRegions = [];
|
|
346 |
function drawPrimitivesTest()
|
|
347 |
{
|
|
348 |
clear();
|
|
349 |
var x1 = 100;
|
|
350 |
var y1 = 76;
|
|
351 |
var x2 = 300;
|
|
352 |
var y2 = 300;
|
|
353 |
var x3 = 400;
|
|
354 |
var y3 = 77;
|
|
355 |
var black = [0, 0, 0];
|
|
356 |
var t = [x1, y1, x2, y2, x3, y3];
|
|
357 |
append("Triangle" + JSON.stringify(t));
|
|
358 |
me.canvasRenderer.setColor(black);
|
|
359 |
me.canvasRenderer.drawLine(x1, y1, x2, y2, black);
|
|
360 |
me.canvasRenderer.drawLine(x3, y1-20, x3, y2+20, black);
|
|
361 |
me.canvasRenderer.flash();
|
|
362 |
me.canvasRenderer.drawLine(x2, y2, x3, y3, black);
|
|
363 |
me.canvasRenderer.flash();
|
|
364 |
me.canvasRenderer.drawLine(x3, y3, x1, y1, black);
|
|
365 |
me.canvasRenderer.flash();
|
|
366 |
}
|
| 449 |
367 |
|
| 450 |
|
function lastClippedRegion(flag)
|
| 451 |
|
{
|
| 452 |
|
return clipRegions;
|
| 453 |
|
}
|
| 454 |
|
|
| 455 |
|
function clipTriangles(triangles)
|
| 456 |
|
{
|
| 457 |
|
var result = [];
|
| 458 |
|
var lastClip = lastClippedRegion(true);
|
| 459 |
|
if (lastClip)
|
| 460 |
|
{
|
| 461 |
|
var clippedTriangles = [];
|
| 462 |
|
for (var k = 0; k < triangles.length; k++)
|
| 463 |
|
{
|
| 464 |
|
var triangle = triangles[k];
|
| 465 |
|
|
| 466 |
|
var x1 = triangle[0];
|
| 467 |
|
var y1 = triangle[1];
|
| 468 |
|
var x2 = triangle[2];
|
| 469 |
|
var y2 = triangle[3];
|
| 470 |
|
var x3 = triangle[4];
|
| 471 |
|
var y3 = triangle[5];
|
| 472 |
|
|
| 473 |
|
var c = [triangle[6], triangle[7], triangle[8], triangle[9]];
|
| 474 |
|
|
| 475 |
|
for (var i = 0; i < lastClip.length; i++)
|
| 476 |
|
{
|
| 477 |
|
var rect = lastClip[i];
|
| 478 |
|
|
| 479 |
|
var top = rect.y;
|
| 480 |
|
var bottom = rect.y + Math.max(rect.height - 1, 0);
|
| 481 |
|
var left = rect.x;
|
| 482 |
|
var right = rect.x + Math.max(rect.width - 1, 0);
|
| 483 |
|
|
| 484 |
|
var ab = cutTriangleLine(x1, y1, x2, y2, left, top, right, bottom);
|
| 485 |
|
var bc = cutTriangleLine(x2, y2, x3, y3, left, top, right, bottom);
|
| 486 |
|
var ac = cutTriangleLine(x1, y1, x3, y3, left, top, right, bottom);
|
| 487 |
|
|
| 488 |
|
var vertices = [];
|
| 489 |
|
var last;
|
| 490 |
|
var first;
|
| 491 |
|
var square = [];
|
| 492 |
|
// a - > b -> c
|
| 493 |
|
if (ab.length == 4)
|
| 494 |
|
{
|
| 495 |
|
var abx1 = ab[0];
|
| 496 |
|
var aby1 = ab[1];
|
| 497 |
|
var abx2 = ab[2];
|
| 498 |
|
var aby2 = ab[3];
|
| 499 |
|
if (abx1 != abx2 || aby1 != aby2)
|
| 500 |
|
{
|
| 501 |
|
first = [abx1, aby1];
|
| 502 |
|
vertices.push(first);
|
| 503 |
|
last = [abx2, aby2];
|
| 504 |
|
vertices.push(last);
|
| 505 |
|
}
|
| 506 |
|
else
|
| 507 |
|
{
|
| 508 |
|
last = [abx1, aby1];
|
| 509 |
|
first = last;
|
| 510 |
|
vertices.push(last);
|
| 511 |
|
}
|
| 512 |
|
}
|
| 513 |
|
else
|
| 514 |
|
{
|
| 515 |
|
var v = ab[0];
|
| 516 |
|
if (isInTriangle(v[0], v[1], x1, y1, x2, y2, x3, y3))
|
| 517 |
|
{
|
| 518 |
|
first = v;
|
| 519 |
|
last = v;
|
| 520 |
|
vertices.push(first);
|
| 521 |
|
}
|
| 522 |
|
v = ab[1];
|
| 523 |
|
if (isInTriangle(v[0], v[1], x1, y1, x2, y2, x3, y3))
|
| 524 |
|
{
|
| 525 |
|
if (last)
|
| 526 |
|
{
|
| 527 |
|
if (last[0] != v[0] || last[1] != v[1])
|
| 528 |
|
{
|
| 529 |
|
last = v;
|
| 530 |
|
vertices.push(v);
|
| 531 |
|
}
|
| 532 |
|
}
|
| 533 |
|
else
|
| 534 |
|
{
|
| 535 |
|
first = v;
|
| 536 |
|
last = v;
|
| 537 |
|
vertices.push(first);
|
| 538 |
|
}
|
| 539 |
|
}
|
| 540 |
|
}
|
| 541 |
|
if (bc.length == 4)
|
| 542 |
|
{
|
| 543 |
|
var bcx2 = bc[0];
|
| 544 |
|
var bcy2 = bc[1];
|
| 545 |
|
var bcx3 = bc[2];
|
| 546 |
|
var bcy3 = bc[3];
|
| 547 |
|
if (bcx2 != bcx3 || bcy2 != bcy3)
|
| 548 |
|
{
|
| 549 |
|
if (last)
|
| 550 |
|
{
|
| 551 |
|
if (last[0] != bcx2 || last[1] != bcy2)
|
| 552 |
|
{
|
| 553 |
|
vertices.push([bcx2, bcy2]);
|
| 554 |
|
}
|
| 555 |
|
}
|
| 556 |
|
else
|
| 557 |
|
{
|
| 558 |
|
first = [bcx2, bcy2];
|
| 559 |
|
vertices.push(first);
|
| 560 |
|
}
|
| 561 |
|
|
| 562 |
|
last = [bcx3, bcy3];
|
| 563 |
|
vertices.push(last);
|
| 564 |
|
}
|
| 565 |
|
else
|
| 566 |
|
{
|
| 567 |
|
if (last)
|
| 568 |
|
{
|
| 569 |
|
if (last[0] != bcx2 || last[1] != bcy2)
|
| 570 |
|
{
|
| 571 |
|
last = [bcx2, bcy2];
|
| 572 |
|
vertices.push(last);
|
| 573 |
|
}
|
| 574 |
|
}
|
| 575 |
|
else
|
| 576 |
|
{
|
| 577 |
|
first = [bcx2, bcy2];
|
| 578 |
|
last = first;
|
| 579 |
|
vertices.push(last);
|
| 580 |
|
}
|
| 581 |
|
}
|
| 582 |
|
}
|
| 583 |
|
else
|
| 584 |
|
{
|
| 585 |
|
var v = bc[0];
|
| 586 |
|
if (isInTriangle(v[0], v[1], x1, y1, x2, y2, x3, y3))
|
| 587 |
|
{
|
| 588 |
|
if (last)
|
| 589 |
|
{
|
| 590 |
|
var t = vertices.every(function(el) { return el[0] != v[0] || el[1] != v[1]});
|
| 591 |
|
if (t)
|
| 592 |
|
{
|
| 593 |
|
last = v;
|
| 594 |
|
vertices.push(v);
|
| 595 |
|
}
|
| 596 |
|
}
|
| 597 |
|
else
|
| 598 |
|
{
|
| 599 |
|
first = v;
|
| 600 |
|
last = v;
|
| 601 |
|
vertices.push(first);
|
| 602 |
|
}
|
| 603 |
|
}
|
| 604 |
|
v = bc[1];
|
| 605 |
|
if (isInTriangle(v[0], v[1], x1, y1, x2, y2, x3, y3))
|
| 606 |
|
{
|
| 607 |
|
if (last)
|
| 608 |
|
{
|
| 609 |
|
var t = vertices.every(function(el) { return el[0] != v[0] || el[1] != v[1]});
|
| 610 |
|
if (t)
|
| 611 |
|
{
|
| 612 |
|
last = v;
|
| 613 |
|
vertices.push(v);
|
| 614 |
|
}
|
| 615 |
|
}
|
| 616 |
|
else
|
| 617 |
|
{
|
| 618 |
|
first = v;
|
| 619 |
|
last = v;
|
| 620 |
|
vertices.push(first);
|
| 621 |
|
}
|
| 622 |
|
}
|
| 623 |
|
}
|
| 624 |
|
|
| 625 |
|
if (ac.length == 4)
|
| 626 |
|
{
|
| 627 |
|
var acx1 = ac[0];
|
| 628 |
|
var acy1 = ac[1];
|
| 629 |
|
var acx3 = ac[2];
|
| 630 |
|
var acy3 = ac[3];
|
| 631 |
|
if (acx1 != acx3 || acy1 != acy3)
|
| 632 |
|
{
|
| 633 |
|
if (last)
|
| 634 |
|
{
|
| 635 |
|
if (last[0] != acx3 || last[1] != acy3)
|
| 636 |
|
{
|
| 637 |
|
vertices.push([acx3, acy3]);
|
| 638 |
|
}
|
| 639 |
|
}
|
| 640 |
|
else
|
| 641 |
|
{
|
| 642 |
|
first = [acx3, acy3];
|
| 643 |
|
vertices.push(first);
|
| 644 |
|
}
|
| 645 |
|
|
| 646 |
|
if (first[0] != acx1 || first[1] != acy1)
|
| 647 |
|
{
|
| 648 |
|
vertices.push([acx1, acy1]);
|
| 649 |
|
}
|
| 650 |
|
}
|
| 651 |
|
else
|
| 652 |
|
{
|
| 653 |
|
if (last)
|
| 654 |
|
{
|
| 655 |
|
if ((last[0] != acx3 || last[1] != acy3) && (first[0] != acx3 || first[1] != acy3))
|
| 656 |
|
{
|
| 657 |
|
vertices.push([acx3, acy3]);
|
| 658 |
|
}
|
| 659 |
|
}
|
| 660 |
|
else
|
| 661 |
|
{
|
| 662 |
|
first = [acx3, acy3];
|
| 663 |
|
last = first;
|
| 664 |
|
vertices.push(last);
|
| 665 |
|
}
|
| 666 |
|
}
|
| 667 |
|
}
|
| 668 |
|
else
|
| 669 |
|
{
|
| 670 |
|
var v = ac[1];
|
| 671 |
|
if (isInTriangle(v[0], v[1], x1, y1, x2, y2, x3, y3))
|
| 672 |
|
{
|
| 673 |
|
if (last)
|
| 674 |
|
{
|
| 675 |
|
var t = vertices.every(function(el) { return el[0] != v[0] || el[1] != v[1]});
|
| 676 |
|
if (t)
|
| 677 |
|
{
|
| 678 |
|
last = v;
|
| 679 |
|
vertices.push(v);
|
| 680 |
|
}
|
| 681 |
|
}
|
| 682 |
|
else
|
| 683 |
|
{
|
| 684 |
|
first = v;
|
| 685 |
|
last = v;
|
| 686 |
|
vertices.push(first);
|
| 687 |
|
}
|
| 688 |
|
}
|
| 689 |
|
v = ac[0];
|
| 690 |
|
if (isInTriangle(v[0], v[1], x1, y1, x2, y2, x3, y3))
|
| 691 |
|
{
|
| 692 |
|
var t = vertices.every(function(el) { return el[0] != v[0] || el[1] != v[1]});
|
| 693 |
|
if (t)
|
| 694 |
|
{
|
| 695 |
|
vertices.push(v);
|
| 696 |
|
}
|
| 697 |
|
}
|
| 698 |
|
|
| 699 |
|
}
|
| 700 |
|
var v0, v1, v;
|
| 701 |
|
if (vertices.length >= 3)
|
| 702 |
|
{
|
| 703 |
|
v0 = vertices[0];
|
| 704 |
|
v1 = vertices[1];
|
| 705 |
|
|
| 706 |
|
for (var j = 2; j < vertices.length; j++)
|
| 707 |
|
{
|
| 708 |
|
v = vertices[j];
|
| 709 |
|
clippedTriangles.push(v0.concat(v1).concat(v).concat(c));
|
| 710 |
|
v1 = v;
|
| 711 |
|
}
|
| 712 |
|
}
|
| 713 |
|
else if (vertices.length == 2)
|
| 714 |
|
{
|
| 715 |
|
v0 = vertices[0];
|
| 716 |
|
v1 = vertices[1];
|
| 717 |
|
clippedTriangles.push(v0.concat(v1).concat(v1).concat(c));
|
| 718 |
|
}
|
| 719 |
|
else if (vertices.length == 1)
|
| 720 |
|
{
|
| 721 |
|
v0 = vertices[0];
|
| 722 |
|
clippedTriangles.push(v0.concat(v0).concat(v0).concat(c));
|
| 723 |
|
}
|
| 724 |
|
}//end for lastClip
|
| 725 |
|
}//end for triangles
|
| 726 |
|
|
| 727 |
|
result = clippedTriangles;
|
| 728 |
|
}
|
| 729 |
|
else
|
| 730 |
|
{
|
| 731 |
|
result = triangles;
|
| 732 |
|
}
|
| 733 |
|
|
| 734 |
|
return result;
|
| 735 |
|
};
|
| 736 |
|
|
| 737 |
368 |
function clipTrianglesTest()
|
| 738 |
369 |
{
|
| 739 |
370 |
clear();
|
| 740 |
371 |
var x1 = 100;
|
| 741 |
|
var y1 = 100;
|
|
372 |
var y1 = 100 + Math.floor(Math.random() * 50) * Math.sign(Math.random() - 0.5);
|
| 742 |
373 |
var x2 = 300;
|
| 743 |
|
var y2 = 300;
|
|
374 |
var y2 = 300 - Math.floor(Math.random() * 100) * Math.sign(Math.random() - 0.5);
|
| 744 |
375 |
var x3 = 400;
|
| 745 |
|
var y3 = 100;
|
| 746 |
|
clipRegions = [{x: 100, y: 100, width: 101, height: 201},
|
| 747 |
|
{x: 280, y: 290, width: 101, height: 201},
|
| 748 |
|
{x: 265, y: 275, width: 101, height: 1},
|
| 749 |
|
{x: 201, y: 100, width: 101, height: 101},
|
| 750 |
|
{x: 201, y: 210, width: 301, height: 40},
|
| 751 |
|
{x: 350, y: 50, width: 101, height: 101},
|
| 752 |
|
{x: 310, y: 10, width: 10, height: 150},
|
| 753 |
|
{x: 325, y: 10, width: 1, height: 130},
|
| 754 |
|
{x: 460, y: 100, width: 101, height: 101}];
|
|
376 |
var y3 = 100 - Math.floor(Math.random() * 50) * Math.sign(Math.random() - 0.5);
|
|
377 |
var clipRegions = [{x: 100, y: 100, width: 101, height: 201},
|
|
378 |
{x: 280, y: 290, width: 101, height: 201},
|
|
379 |
{x: 265, y: 275, width: 101, height: 1},
|
|
380 |
{x: 201, y: 100, width: 101, height: 101},
|
|
381 |
{x: 201, y: 210, width: 301, height: 40},
|
|
382 |
{x: 350, y: 50, width: 101, height: 101},
|
|
383 |
{x: 310, y: 10, width: 10, height: 150},
|
|
384 |
{x: 325, y: 10, width: 1, height: 130},
|
|
385 |
{x: 460, y: 100, width: 101, height: 101}];
|
|
386 |
me.glCanvasRenderer.clip(clipRegions);
|
| 755 |
387 |
var black = [0, 0, 0];
|
| 756 |
388 |
var yellow = [255, 255, 0];
|
|
389 |
var t = [x1, y1, x2, y2, x3, y3, 0, 0, 0, 1];
|
|
390 |
append("Split triangle" + JSON.stringify(t) + " into areas:");
|
| 757 |
391 |
me.canvasRenderer.setColor(black);
|
| 758 |
392 |
me.canvasRenderer.drawLine(x1, y1, x2, y2, black);
|
| 759 |
393 |
me.canvasRenderer.drawLine(x2, y2, x3, y3, black);
|
| ... | ... | |
| 768 |
402 |
me.canvasRenderer.drawRect(rect.x, rect.y, rect.width, rect.height, red, false);
|
| 769 |
403 |
}
|
| 770 |
404 |
me.canvasRenderer.flash();
|
| 771 |
|
var test = clipTriangles([[x1, y1, x2, y2, x3, y3, 0, 0, 0, 1]]);
|
|
405 |
var test = me.glCanvasRenderer.clipTriangles([t]);
|
| 772 |
406 |
|
| 773 |
407 |
me.canvasRenderer.setColor(yellow);
|
| 774 |
408 |
for (var i = 0; i < test.length; i++)
|
| ... | ... | |
| 782 |
416 |
append(JSON.stringify(test[i]));
|
| 783 |
417 |
console.debug(test[i]);
|
| 784 |
418 |
}
|
| 785 |
|
|
|
419 |
//clear clipping regions
|
|
420 |
me.glCanvasRenderer.unclip();
|
| 786 |
421 |
}
|
| 787 |
422 |
|
| 788 |
423 |
function xtogl(x, canvas)
|
| ... | ... | |
| 982 |
617 |
{
|
| 983 |
618 |
var vertices = [
|
| 984 |
619 |
{ x: x1, y: y1, color: c},
|
| 985 |
|
{ x: x2, y: y2, color: c}
|
|
620 |
{ x: x2, y: y2, color: c},
|
|
621 |
{ x: x2, y: y2+1, color: c},
|
|
622 |
{ x: x1, y: y1+1, color: c},
|
|
623 |
{ x: x1, y: y1, color: c},
|
|
624 |
{ x: x2, y: y2, color: c},
|
| 986 |
625 |
];
|
| 987 |
|
var buffer = new ArrayBuffer(12 * 2);
|
|
626 |
|
|
627 |
/* for (var i=0; i < 100; i++)
|
|
628 |
{
|
|
629 |
vertices.push({ x: x1, y: y1, color: c});
|
|
630 |
vertices.push({ x: x1 + 1, y: y1, color: c});
|
|
631 |
vertices.push({ x: x2, y: y2, color: c});
|
|
632 |
} */
|
|
633 |
var buffer = new ArrayBuffer(12 * vertices.length);
|
| 988 |
634 |
//Fill array buffer
|
| 989 |
635 |
var dv = new DataView(buffer);
|
| 990 |
636 |
for (let i = 0; i < vertices.length; i++) {
|
| ... | ... | |
| 994 |
640 |
dv.setUint8(12 * i + 9, vertices[i].color[1]);
|
| 995 |
641 |
dv.setUint8(12 * i + 10, vertices[i].color[2]);
|
| 996 |
642 |
dv.setUint8(12 * i + 11, 255);
|
|
643 |
i += 1;
|
|
644 |
dv.setFloat32(12 * i, vertices[i].x, true);
|
|
645 |
dv.setFloat32(12 * i + 4, vertices[i].y, true);
|
|
646 |
dv.setUint8(12 * i + 8, vertices[i].color[0]);
|
|
647 |
dv.setUint8(12 * i + 9, vertices[i].color[1]);
|
|
648 |
dv.setUint8(12 * i + 10, vertices[i].color[2]);
|
|
649 |
dv.setUint8(12 * i + 11, 255);
|
|
650 |
i += 1;
|
|
651 |
dv.setFloat32(12 * i, vertices[i].x, true);
|
|
652 |
dv.setFloat32(12 * i + 4, vertices[i].y, true);
|
|
653 |
dv.setUint8(12 * i + 8, vertices[i].color[0]);
|
|
654 |
dv.setUint8(12 * i + 9, vertices[i].color[1]);
|
|
655 |
dv.setUint8(12 * i + 10, vertices[i].color[2]);
|
|
656 |
dv.setUint8(12 * i + 11, 255);
|
| 997 |
657 |
}
|
|
658 |
me.gl.bindBuffer(me.gl.ARRAY_BUFFER, me.positionBuffer);
|
| 998 |
659 |
me.gl.bufferData(me.gl.ARRAY_BUFFER, dv, me.gl.STATIC_DRAW);
|
|
660 |
me.gl.enableVertexAttribArray(me.positionAttributeLocation);
|
|
661 |
|
|
662 |
// Tell the attribute how to get data out of positionBuffer (ARRAY_BUFFER)
|
|
663 |
var size = 2; // 2 components per iteration
|
|
664 |
var type = me.gl.FLOAT; // the data is 32bit floats
|
|
665 |
var normalize = false; // don't normalize the data
|
|
666 |
var stride = 0; // 0 = move forward size * sizeof(type) each iteration to get the next position
|
|
667 |
var offset = 0; // start at the beginning of the buffer
|
|
668 |
me.gl.vertexAttribPointer(
|
|
669 |
me.positionAttributeLocation, size, type, normalize, stride, offset);
|
|
670 |
me.gl.disableVertexAttribArray(me.endPosAttrLoc);
|
|
671 |
me.gl.disableVertexAttribArray(me.distAttrLoc);
|
|
672 |
/*
|
|
673 |
var endPos = [];
|
|
674 |
var w = Math.abs(x2 - x1);
|
|
675 |
var dist = []
|
|
676 |
for (var i=0; i < 100; i++)
|
|
677 |
{
|
|
678 |
endPos.push(x2);
|
|
679 |
endPos.push(y2);
|
|
680 |
endPos.push(x2);
|
|
681 |
endPos.push(y2);
|
|
682 |
endPos.push(x2);
|
|
683 |
endPos.push(y2);
|
|
684 |
dist.push((i + 1)/100);
|
|
685 |
dist.push((i + 1)/100);
|
|
686 |
dist.push((i + 1)/100);
|
|
687 |
}
|
|
688 |
me.gl.bindBuffer(me.gl.ARRAY_BUFFER, me.endPosBuf);
|
|
689 |
me.gl.bufferData(me.gl.ARRAY_BUFFER, new Float32Array(endPos), me.gl.STATIC_DRAW);
|
|
690 |
me.gl.enableVertexAttribArray(me.endPosAttrLoc);
|
|
691 |
var size = 2; // 2 components per iteration
|
|
692 |
var type = me.gl.FLOAT; // the data is 32bit floats
|
|
693 |
var normalize = false; // don't normalize the data
|
|
694 |
var stride = 0; // 0 = move forward size * sizeof(type) each iteration to get the next position
|
|
695 |
var offset = 0; // start at the beginning of the buffer
|
|
696 |
me.gl.vertexAttribPointer(
|
|
697 |
me.endPosAttrLoc, size, type, normalize, stride, offset); // Set color.
|
|
698 |
|
|
699 |
me.gl.enableVertexAttribArray(me.distAttrLoc);
|
|
700 |
me.gl.bindBuffer(me.gl.ARRAY_BUFFER, me.distBuf);
|
|
701 |
me.gl.bufferData(me.gl.ARRAY_BUFFER, new Float32Array(dist), me.gl.STATIC_DRAW);
|
|
702 |
var size = 1; // 1 components per iteration
|
|
703 |
var type = me.gl.FLOAT; // the data is 32bit floats
|
|
704 |
var normalize = false; // don't normalize the data
|
|
705 |
var stride = 0; // 0 = move forward size * sizeof(type) each iteration to get the next position
|
|
706 |
var offset = 0; // start at the beginning of the buffer
|
|
707 |
me.gl.vertexAttribPointer(
|
|
708 |
me.distAttrLoc, size, type, normalize, stride, offset);
|
|
709 |
*/
|
| 999 |
710 |
// Set color.
|
| 1000 |
711 |
//me.gl.uniform4f(me.colorUniformLocation, c[0] / 255.0, c[1] / 255.0 , c[2] / 255.0, 1);
|
| 1001 |
712 |
// Draw the geometry.
|
| 1002 |
|
var primitiveType = me.gl.LINES;
|
|
713 |
var primitiveType = me.gl.TRIANGLES;
|
| 1003 |
714 |
var offset = 0;
|
| 1004 |
|
var count = 2;
|
|
715 |
var count = vertices.length;
|
| 1005 |
716 |
me.gl.drawArrays(primitiveType, offset, count);
|
| 1006 |
717 |
}
|
| 1007 |
718 |
|
| ... | ... | |
| 1115 |
826 |
[0, 0, 64],
|
| 1116 |
827 |
[0, 0, 0]];
|
| 1117 |
828 |
const t0 = performance.now();
|
| 1118 |
|
gridTest(23, 17, 43, 23, colors, me.canvas0.width, me.canvas0.height, true, glDrawRect);
|
|
829 |
var fun = function(x, y, w, h, c, fill)
|
|
830 |
{
|
|
831 |
me.glCanvasRenderer.setColor(c);
|
|
832 |
me.glCanvasRenderer.drawRect(x, y, w, h, c, fill);
|
|
833 |
//me.glCanvasRenderer.flashGL();
|
|
834 |
}
|
|
835 |
gridTest(23, 17, 43, 23, colors, me.canvas0.width, me.canvas0.height, true, fun);
|
|
836 |
me.glCanvasRenderer.flashGL();
|
| 1119 |
837 |
const t1 = performance.now();
|
| 1120 |
838 |
append("WebGL Fill Test finished in", t1-t0);
|
| 1121 |
839 |
}
|
| ... | ... | |
| 1165 |
883 |
[128, 0, 64],
|
| 1166 |
884 |
[0, 0, 0]];
|
| 1167 |
885 |
const t0 = performance.now();
|
| 1168 |
|
gridTest(11, 7, 51, 37, colors, me.canvas0.width, me.canvas0.height, false, glDrawRect);
|
|
886 |
var fun = function(x, y, w, h, c, fill)
|
|
887 |
{
|
|
888 |
me.glCanvasRenderer.setColor(c);
|
|
889 |
me.glCanvasRenderer.strokeRect(x, y, w, h, c, fill);
|
|
890 |
//me.glCanvasRenderer.flashGL();
|
|
891 |
}
|
|
892 |
gridTest(11, 7, 51, 37, colors, me.canvas0.width, me.canvas0.height, false, fun);
|
|
893 |
me.glCanvasRenderer.flashGL();
|
| 1169 |
894 |
const t1 = performance.now();
|
| 1170 |
895 |
append("WebGL Stroke Test finished in", t1-t0);
|
| 1171 |
896 |
}
|
| ... | ... | |
| 1216 |
941 |
[0, 0, 0]];
|
| 1217 |
942 |
var fun = function(x1, y1, x2, y2, c, fill)
|
| 1218 |
943 |
{
|
| 1219 |
|
glDrawLine(x1, y1, x2, y2, c);
|
|
944 |
me.glCanvasRenderer.strokeLineSegment(x1, y1, x2, y2, c);
|
|
945 |
//me.glCanvasRenderer.flashGL();
|
| 1220 |
946 |
}
|
| 1221 |
947 |
const t0 = performance.now();
|
| 1222 |
948 |
gridTest(17, 13, me.canvas0.width >> 1, me.canvas0.height >> 1, colors, me.canvas0.width, me.canvas0.height, false, fun);
|
|
949 |
me.glCanvasRenderer.flashGL();
|
| 1223 |
950 |
const t1 = performance.now();
|
| 1224 |
951 |
append("WebGL Lines Test finished in", t1-t0);
|
| 1225 |
952 |
}
|
| ... | ... | |
| 1385 |
1112 |
restoreLineStyle();
|
| 1386 |
1113 |
}
|
| 1387 |
1114 |
|
|
1115 |
function glDrawingJava2DTest()
|
|
1116 |
{
|
|
1117 |
clear();
|
|
1118 |
|
|
1119 |
const t0 = performance.now();
|
|
1120 |
me.strokesManager.applyStrokeToCanvas(me.ctx, 1, 1);//set style
|
|
1121 |
me.canvasRenderer.setLineStroke(1, 1);
|
|
1122 |
me.glCanvasRenderer.setLineStroke(1, 1);
|
|
1123 |
var color = [0, 0, 0];
|
|
1124 |
me.glCanvasRenderer.drawLine(10, 10, 790, 30, color);
|
|
1125 |
me.glCanvasRenderer.drawRect(40, 40, 55, 30, color, false);
|
|
1126 |
me.glCanvasRenderer.drawLine(210, 40, 210, 70, color);
|
|
1127 |
me.glCanvasRenderer.drawLine(241, 40, 241, 70, color);
|
|
1128 |
me.glCanvasRenderer.drawLine(250, 40, 305, 40, color);
|
|
1129 |
me.glCanvasRenderer.drawLine(250, 70, 305, 70, color);
|
|
1130 |
|
|
1131 |
me.strokesManager.applyStrokeToCanvas(me.ctx, 1, 2);
|
|
1132 |
me.canvasRenderer.setLineStroke(1, 2);
|
|
1133 |
me.glCanvasRenderer.setLineStroke(1, 2);
|
|
1134 |
me.glCanvasRenderer.drawLine(10, 80, 790, 100, color);
|
|
1135 |
me.glCanvasRenderer.drawRect(40, 110, 55, 30, color, false);
|
|
1136 |
me.glCanvasRenderer.drawLine(210, 110, 210, 140, color);
|
|
1137 |
me.glCanvasRenderer.drawLine(241, 110, 241, 140, color);
|
|
1138 |
me.glCanvasRenderer.drawLine(250, 110, 305, 110, color);
|
|
1139 |
me.glCanvasRenderer.drawLine(250, 140, 305, 140, color);
|
|
1140 |
|
|
1141 |
me.strokesManager.applyStrokeToCanvas(me.ctx, 1, 3);
|
|
1142 |
me.canvasRenderer.setLineStroke(1, 3);
|
|
1143 |
me.glCanvasRenderer.setLineStroke(1, 3);
|
|
1144 |
me.glCanvasRenderer.drawLine(10, 150, 790, 170, color);
|
|
1145 |
me.glCanvasRenderer.drawRect(40, 180, 55, 30, color, false);
|
|
1146 |
me.glCanvasRenderer.drawLine(210, 180, 210, 210, color);
|
|
1147 |
me.glCanvasRenderer.drawLine(241, 180, 241, 210, color);
|
|
1148 |
me.glCanvasRenderer.drawLine(250, 180, 305, 180, color);
|
|
1149 |
me.glCanvasRenderer.drawLine(250, 210, 305, 210, color);
|
|
1150 |
|
|
1151 |
me.strokesManager.applyStrokeToCanvas(me.ctx, 2, 1);
|
|
1152 |
me.canvasRenderer.setLineStroke(2, 1);
|
|
1153 |
me.glCanvasRenderer.setLineStroke(2, 1);
|
|
1154 |
me.glCanvasRenderer.drawLine(10, 220, 790, 240, color);
|
|
1155 |
me.glCanvasRenderer.drawRect(40, 250, 55, 30, color, false);
|
|
1156 |
me.glCanvasRenderer.drawLine(210, 250, 210, 280, color);
|
|
1157 |
me.glCanvasRenderer.drawLine(241, 250, 241, 280, color);
|
|
1158 |
me.glCanvasRenderer.drawLine(250, 250, 305, 250, color);
|
|
1159 |
me.glCanvasRenderer.drawLine(250, 280, 305, 280, color);
|
|
1160 |
|
|
1161 |
me.strokesManager.applyStrokeToCanvas(me.ctx, 3, 1);
|
|
1162 |
me.canvasRenderer.setLineStroke(3, 1);
|
|
1163 |
me.glCanvasRenderer.setLineStroke(3, 1);
|
|
1164 |
me.glCanvasRenderer.drawLine(10, 290, 790, 310, color);
|
|
1165 |
me.glCanvasRenderer.drawRect(40, 320, 55, 30, color, false);
|
|
1166 |
me.glCanvasRenderer.drawLine(210, 320, 210, 350, color);
|
|
1167 |
me.glCanvasRenderer.drawLine(241, 320, 241, 350, color);
|
|
1168 |
me.glCanvasRenderer.drawLine(250, 320, 305, 320, color);
|
|
1169 |
me.glCanvasRenderer.drawLine(250, 350, 305, 350, color);
|
|
1170 |
|
|
1171 |
me.strokesManager.applyStrokeToCanvas(me.ctx, 4, 1);
|
|
1172 |
me.canvasRenderer.setLineStroke(4, 1);
|
|
1173 |
me.glCanvasRenderer.setLineStroke(4, 1);
|
|
1174 |
me.glCanvasRenderer.drawLine(10, 360, 790, 380, color);
|
|
1175 |
me.glCanvasRenderer.drawRect(40, 390, 55, 30, color, false);
|
|
1176 |
me.glCanvasRenderer.drawLine(210, 390, 210, 420, color);
|
|
1177 |
me.glCanvasRenderer.drawLine(241, 390, 241, 420, color);
|
|
1178 |
me.glCanvasRenderer.drawLine(250, 390, 305, 390, color);
|
|
1179 |
me.glCanvasRenderer.drawLine(250, 420, 305, 420, color);
|
|
1180 |
me.glCanvasRenderer.flashGL();
|
|
1181 |
const t1 = performance.now();
|
|
1182 |
append("WebGL Drawing Java 2D Test finished in", t1-t0);
|
|
1183 |
|
|
1184 |
//restore line style
|
|
1185 |
restoreLineStyle();
|
|
1186 |
}
|
|
1187 |
|
| 1388 |
1188 |
function precisionTest()
|
| 1389 |
1189 |
{
|
| 1390 |
1190 |
clear();
|
| ... | ... | |
| 1481 |
1281 |
});
|
| 1482 |
1282 |
|
| 1483 |
1283 |
var mainMenuBar = new MenuBar({});
|
| 1484 |
|
/*
|
| 1485 |
|
var pSubMenu = new DropDownMenu({});
|
| 1486 |
|
pSubMenu.addChild(new MenuItem({
|
| 1487 |
|
label: "Save"
|
| 1488 |
|
}));
|
| 1489 |
|
pSubMenu.addChild(new MenuItem({
|
| 1490 |
|
label: "Save As..."
|
| 1491 |
|
}));
|
| 1492 |
|
mainMenuBar.addChild(new PopupMenuBarItem({
|
| 1493 |
|
label: "File",
|
| 1494 |
|
popup: pSubMenu
|
| 1495 |
|
}));
|
| 1496 |
|
*/
|
| 1497 |
1284 |
var testsSubMenu = new DropDownMenu({});
|
| 1498 |
1285 |
testsSubMenu.addChild(new MenuItem({
|
| 1499 |
1286 |
label: "Fill Test",
|
| ... | ... | |
| 1557 |
1344 |
}
|
| 1558 |
1345 |
}));
|
| 1559 |
1346 |
glTestsSubMenu.addChild(new MenuItem({
|
|
1347 |
label: "WebGL Java 2D Test",
|
|
1348 |
onClick: function(event)
|
|
1349 |
{
|
|
1350 |
glDrawingJava2DTest();
|
|
1351 |
}
|
|
1352 |
}));
|
|
1353 |
glTestsSubMenu.addChild(new MenuItem({
|
| 1560 |
1354 |
label: "Vertex Shader Test",
|
| 1561 |
1355 |
onClick: function(event)
|
| 1562 |
1356 |
{
|
| ... | ... | |
| 1570 |
1364 |
{
|
| 1571 |
1365 |
glPrecisionTest();
|
| 1572 |
1366 |
}
|
| 1573 |
|
}));
|
| 1574 |
|
glTestsSubMenu.addChild(new MenuItem({
|
| 1575 |
|
label: "Java 2D Test",
|
| 1576 |
|
onClick: function(event)
|
| 1577 |
|
{
|
| 1578 |
|
glDrawingJava2DTest();
|
| 1579 |
|
}
|
| 1580 |
1367 |
})); */
|
| 1581 |
1368 |
mainMenuBar.addChild(new PopupMenuBarItem({
|
| 1582 |
1369 |
label: "WebGL Tests",
|
| ... | ... | |
| 1604 |
1391 |
clipTrianglesTest();
|
| 1605 |
1392 |
}
|
| 1606 |
1393 |
}));
|
| 1607 |
|
/*
|
| 1608 |
|
pSubMenu2.addChild(new MenuItem({
|
| 1609 |
|
label: "Copy",
|
| 1610 |
|
iconClass: "dijitEditorIcon dijitEditorIconCopy"
|
| 1611 |
|
}));
|
| 1612 |
|
pSubMenu2.addChild(new MenuItem({
|
| 1613 |
|
label: "Paste",
|
| 1614 |
|
iconClass: "dijitEditorIcon dijitEditorIconPaste"
|
| 1615 |
|
}));
|
| 1616 |
|
*/
|
|
1394 |
pSubMenu2.addChild(new MenuItem({
|
|
1395 |
label: "Draw Primitives Test",
|
|
1396 |
onClick: function(event)
|
|
1397 |
{
|
|
1398 |
drawPrimitivesTest();
|
|
1399 |
}
|
|
1400 |
}));
|
| 1617 |
1401 |
mainMenuBar.addChild(new PopupMenuBarItem({
|
| 1618 |
|
label: "Tools",
|
|
1402 |
label: "Miscellaneous Tests",
|
| 1619 |
1403 |
popup: pSubMenu2
|
| 1620 |
1404 |
}));
|
| 1621 |
1405 |
mainMenuBar.placeAt(div.id);
|
| ... | ... | |
| 1623 |
1407 |
|
| 1624 |
1408 |
style = "width:800px;height:600px;position:relative";
|
| 1625 |
1409 |
var canvasContainer = domConstruct.create("div", { style: style }, div);
|
|
1410 |
me.canvasContainer = canvasContainer;
|
| 1626 |
1411 |
style = "width:800px;height:600px;position:absolute;top:0px;left:0px;";
|
| 1627 |
1412 |
var canvas0 = domConstruct.create("canvas", { style: style }, canvasContainer);
|
| 1628 |
1413 |
style = "width:800px;height:600px;position:absolute;top:0px;left:0px;background-color:transparent;";
|
| ... | ... | |
| 1630 |
1415 |
style = "width:800px;height:600px;position:absolute;top:0px;left:0px;background-color:transparent;";
|
| 1631 |
1416 |
var canvas2 = domConstruct.create("canvas", { style: style }, canvasContainer);
|
| 1632 |
1417 |
|
| 1633 |
|
style = "width:800px;height:100px;position:relative;overflow-y:auto;";
|
|
1418 |
style = "width:800px;height:auto;max-height:140px;position:relative;overflow-y:auto;";
|
| 1634 |
1419 |
var textContainer = domConstruct.create("div", { style: style }, div);
|
| 1635 |
1420 |
style = "width:100%;height:auto;margin: 1";
|
| 1636 |
1421 |
var textElement = domConstruct.create("textarea", { style: style}, textContainer);
|
| ... | ... | |
| 1661 |
1446 |
me.canvas.height = me.height;
|
| 1662 |
1447 |
me.canvas2.width = me.width;
|
| 1663 |
1448 |
me.canvas2.height = me.height;
|
| 1664 |
|
|
| 1665 |
|
init();
|
| 1666 |
1449 |
});
|
| 1667 |
1450 |
|
| 1668 |
1451 |
that.open = function ()
|
| 1669 |
1452 |
{
|
|
1453 |
if (!me.offscreenCanvas)
|
|
1454 |
{
|
|
1455 |
init();
|
|
1456 |
if (me.glCanvasRenderer.webglCanvas.parentNode)
|
|
1457 |
{
|
|
1458 |
me.glCanvasRenderer.webglCanvas.parentNode.removeChild(me.glCanvasRenderer.webglCanvas);
|
|
1459 |
me.canvasContainer.appendChild(me.glCanvasRenderer.webglCanvas);
|
|
1460 |
}
|
|
1461 |
}
|
| 1670 |
1462 |
if (me.dialog)
|
| 1671 |
1463 |
{
|
| 1672 |
1464 |
me.dialog.show();
|