-
Notifications
You must be signed in to change notification settings - Fork 56
/
index.html
executable file
·87 lines (67 loc) · 4.26 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Canvas2DtoWebGL.js</title>
<link type="text/css" rel="stylesheet" media="all" href="github.css">
<link rel="stylesheet" type="text/css" href="style.css" />
<style type='text/css'>
</style>
</head>
<body>
<div id="wrap">
<div id="main">
<div id="content" class="markdown-body">
<article class="markdown-body entry-content" itemprop="mainContentOfPage"><h1>
<a name="user-content-canvas2dtowebgljs" class="anchor" href="#canvas2dtowebgljs" aria-hidden="true"><span class="octicon octicon-link"></span></a>Canvas2DtoWebGL.js</h1>
<p>Canvas2DtoWebGL.js ports almost all the methods from the regular Canvas2D context of HTML5 to WebGL calls, this allows to mix 3D in your 2D Canvas and in some cases it could even improve the performance of your regular Canvas2D.
It used <a href="https://github.com/jagenjo/litegl.js">litegl.js</a> as the base WebGL library.</p>
<ul class="task-list">
<li>translate, rotate, scale, transform, setTransform, save, restore</li>
<li>clearRect</li>
<li>fillStyle, strokeStyle, globalAlpha</li>
<li>drawImage (not the 9 params version), you can use images or canvas (video not tested)</li>
<li>beginPath, lineTo, moveTo, closePath, stroke, rect, strokeRect, fillRect, arc</li>
<li>fill (limited to convex shapes)</li>
<li>createPattern with images</li>
<li>bezierCurveTo and quadraticCurveTo</li>
<li>fillText (it creates a texture atlas with all the characters)</li>
<li>lineWidth (only one mode supported)</li>
<li>imageSmoothingEnabled</li>
<li>getImageData and putImageData (not fully tested)</li>
</ul><p>Not supported (yet):</p>
<ul class="task-list">
<li>clip</li>
<li>globalCompositeOperation</li>
<li>concave polygon shapes</li>
<li>createLinearGradient</li>
<li>drawImage using 9 parameters(img,sx,sy,swidth,sheight,x,y,width,height)</li>
<li>shadows</li>
</ul><h2>
<a name="user-content-demos--benchmark" class="anchor" href="#demos--benchmark" aria-hidden="true"><span class="octicon octicon-link"></span></a>Demos & Benchmark</h2>
<p>Demos are included in demo folder, you can <a href="http://tamats.com/projects/canvas2DtoWebGL/demo">test it here</a></p>
<h2>
<a name="user-content-usage" class="anchor" href="#usage" aria-hidden="true"><span class="octicon octicon-link"></span></a>Usage</h2>
<p>Include the library and dependencies</p>
<div class="highlight highlight-html"><pre><span class="nt"><script </span><span class="na">src=</span><span class="s">"js/gl-matrix-min.js"</span><span class="nt">></script></span>
<span class="nt"><script </span><span class="na">src=</span><span class="s">"js/litegl.min.js"</span><span class="nt">></script></span>
<span class="nt"><script </span><span class="na">src=</span><span class="s">"js/Canvas2DtoWebGL.js"</span><span class="nt">></script></span>
</pre></div>
<p>Once you have your Canvas created (and before a context2D has been obtained), call this function:</p>
<div class="highlight highlight-js"><pre><span class="kd">var</span> <span class="nx">ctx</span> <span class="o">=</span> <span class="nx">enableWebGLCanvas</span><span class="p">(</span> <span class="nx">mycanvas</span> <span class="p">);</span>
</pre></div>
<p>During your rendering you must call this two functions, it helps set the flags accordingly.</p>
<div class="highlight highlight-js">
<pre><span class="nx">ctx</span><span class="p">.</span><span class="nx">start</span><span class="p">();</span>
<span class="c1">//your rendering code</span>
<span class="c1">//...</span>
<span class="nx">ctx</span><span class="p">.</span><span class="nx">finish</span><span class="p">();</span>
</pre></div>
<h2>
<a name="user-content-feedback" class="anchor" href="#feedback" aria-hidden="true"><span class="octicon octicon-link"></span></a>Feedback</h2>
<p>You can write any feedback to <a href="mailto:[email protected]">[email protected]</a></p></article>
</div>
</div>
</div>
</body>
</html>