<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>[198442] trunk/PerformanceTests</title>
</head>
<body>
<style type="text/css"><!--
#msg dl.meta { border: 1px #006 solid; background: #369; padding: 6px; color: #fff; }
#msg dl.meta dt { float: left; width: 6em; font-weight: bold; }
#msg dt:after { content:':';}
#msg dl, #msg dt, #msg ul, #msg li, #header, #footer, #logmsg { font-family: verdana,arial,helvetica,sans-serif; font-size: 10pt; }
#msg dl a { font-weight: bold}
#msg dl a:link { color:#fc3; }
#msg dl a:active { color:#ff0; }
#msg dl a:visited { color:#cc6; }
h3 { font-family: verdana,arial,helvetica,sans-serif; font-size: 10pt; font-weight: bold; }
#msg pre { overflow: auto; background: #ffc; border: 1px #fa0 solid; padding: 6px; }
#logmsg { background: #ffc; border: 1px #fa0 solid; padding: 1em 1em 0 1em; }
#logmsg p, #logmsg pre, #logmsg blockquote { margin: 0 0 1em 0; }
#logmsg p, #logmsg li, #logmsg dt, #logmsg dd { line-height: 14pt; }
#logmsg h1, #logmsg h2, #logmsg h3, #logmsg h4, #logmsg h5, #logmsg h6 { margin: .5em 0; }
#logmsg h1:first-child, #logmsg h2:first-child, #logmsg h3:first-child, #logmsg h4:first-child, #logmsg h5:first-child, #logmsg h6:first-child { margin-top: 0; }
#logmsg ul, #logmsg ol { padding: 0; list-style-position: inside; margin: 0 0 0 1em; }
#logmsg ul { text-indent: -1em; padding-left: 1em; }#logmsg ol { text-indent: -1.5em; padding-left: 1.5em; }
#logmsg > ul, #logmsg > ol { margin: 0 0 1em 0; }
#logmsg pre { background: #eee; padding: 1em; }
#logmsg blockquote { border: 1px solid #fa0; border-left-width: 10px; padding: 1em 1em 0 1em; background: white;}
#logmsg dl { margin: 0; }
#logmsg dt { font-weight: bold; }
#logmsg dd { margin: 0; padding: 0 0 0.5em 0; }
#logmsg dd:before { content:'\00bb';}
#logmsg table { border-spacing: 0px; border-collapse: collapse; border-top: 4px solid #fa0; border-bottom: 1px solid #fa0; background: #fff; }
#logmsg table th { text-align: left; font-weight: normal; padding: 0.2em 0.5em; border-top: 1px dotted #fa0; }
#logmsg table td { text-align: right; border-top: 1px dotted #fa0; padding: 0.2em 0.5em; }
#logmsg table thead th { text-align: center; border-bottom: 1px solid #fa0; }
#logmsg table th.Corner { text-align: left; }
#logmsg hr { border: none 0; border-top: 2px dashed #fa0; height: 1px; }
#header, #footer { color: #fff; background: #636; border: 1px #300 solid; padding: 6px; }
#patch { width: 100%; }
#patch h4 {font-family: verdana,arial,helvetica,sans-serif;font-size:10pt;padding:8px;background:#369;color:#fff;margin:0;}
#patch .propset h4, #patch .binary h4 {margin:0;}
#patch pre {padding:0;line-height:1.2em;margin:0;}
#patch .diff {width:100%;background:#eee;padding: 0 0 10px 0;overflow:auto;}
#patch .propset .diff, #patch .binary .diff {padding:10px 0;}
#patch span {display:block;padding:0 10px;}
#patch .modfile, #patch .addfile, #patch .delfile, #patch .propset, #patch .binary, #patch .copfile {border:1px solid #ccc;margin:10px 0;}
#patch ins {background:#dfd;text-decoration:none;display:block;padding:0 10px;}
#patch del {background:#fdd;text-decoration:none;display:block;padding:0 10px;}
#patch .lines, .info {color:#888;background:#fff;}
--></style>
<div id="msg">
<dl class="meta">
<dt>Revision</dt> <dd><a href="http://trac.webkit.org/projects/webkit/changeset/198442">198442</a></dd>
<dt>Author</dt> <dd>dino@apple.com</dd>
<dt>Date</dt> <dd>2016-03-18 13:48:39 -0700 (Fri, 18 Mar 2016)</dd>
</dl>
<h3>Log Message</h3>
<pre>Add a basic WebGL test to Animometer
https://bugs.webkit.org/show_bug.cgi?id=155475
<rdar://problem/25156860>
Reviewed by Simon Fraser and Jon Lee.
Add a pretty simple WebGL test to Animometer
which tries to draw a number of animated triangles.
The result still needs a bit of tuning.
* Animometer/resources/debug-runner/tests.js: Add a new
Suite for "3D" tests.
* Animometer/tests/3d/resources/webgl.js: Added.
* Animometer/tests/3d/webgl.html: Added.</pre>
<h3>Modified Paths</h3>
<ul>
<li><a href="#trunkPerformanceTestsAnimometerresourcesdebugrunnertestsjs">trunk/PerformanceTests/Animometer/resources/debug-runner/tests.js</a></li>
<li><a href="#trunkPerformanceTestsChangeLog">trunk/PerformanceTests/ChangeLog</a></li>
</ul>
<h3>Added Paths</h3>
<ul>
<li>trunk/PerformanceTests/Animometer/tests/3d/</li>
<li>trunk/PerformanceTests/Animometer/tests/3d/resources/</li>
<li><a href="#trunkPerformanceTestsAnimometertests3dresourceswebgljs">trunk/PerformanceTests/Animometer/tests/3d/resources/webgl.js</a></li>
<li><a href="#trunkPerformanceTestsAnimometertests3dwebglhtml">trunk/PerformanceTests/Animometer/tests/3d/webgl.html</a></li>
</ul>
</div>
<div id="patch">
<h3>Diff</h3>
<a id="trunkPerformanceTestsAnimometerresourcesdebugrunnertestsjs"></a>
<div class="modfile"><h4>Modified: trunk/PerformanceTests/Animometer/resources/debug-runner/tests.js (198441 => 198442)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/PerformanceTests/Animometer/resources/debug-runner/tests.js 2016-03-18 20:23:10 UTC (rev 198441)
+++ trunk/PerformanceTests/Animometer/resources/debug-runner/tests.js 2016-03-18 20:48:39 UTC (rev 198442)
</span><span class="lines">@@ -311,6 +311,15 @@
</span><span class="cx"> ]
</span><span class="cx"> ));
</span><span class="cx">
</span><ins>+Suites.push(new Suite("3D Graphics",
+ [
+ {
+ url: "3d/webgl.html",
+ name: "WebGL"
+ },
+ ]
+));
+
</ins><span class="cx"> Suites.push(new Suite("Miscellaneous Tests",
</span><span class="cx"> [
</span><span class="cx"> {
</span></span></pre></div>
<a id="trunkPerformanceTestsAnimometertests3dresourceswebgljs"></a>
<div class="addfile"><h4>Added: trunk/PerformanceTests/Animometer/tests/3d/resources/webgl.js (0 => 198442)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/PerformanceTests/Animometer/tests/3d/resources/webgl.js (rev 0)
+++ trunk/PerformanceTests/Animometer/tests/3d/resources/webgl.js 2016-03-18 20:48:39 UTC (rev 198442)
</span><span class="lines">@@ -0,0 +1,184 @@
</span><ins>+(function() {
+
+WebGLStage = Utilities.createSubclass(Stage,
+ function(element, options)
+ {
+ Stage.call(this);
+ },
+ {
+
+ initialize: function(benchmark, options)
+ {
+ Stage.prototype.initialize.call(this, benchmark, options);
+
+ this._numTriangles = 0;
+ this._bufferSize = 0;
+
+ this._gl = this.element.getContext("webgl");
+ var gl = this._gl;
+
+ gl.clearColor(0.5, 0.5, 0.5, 1);
+
+ // Create the vertex shader object.
+ var vertexShader = gl.createShader(gl.VERTEX_SHADER);
+
+ // The source code for the shader is extracted from the <script> element above.
+ gl.shaderSource(vertexShader, this._getFunctionSource("vertex"));
+
+ // Compile the shader.
+ gl.compileShader(vertexShader);
+ if (!gl.getShaderParameter(vertexShader, gl.COMPILE_STATUS)) {
+ // We failed to compile. Output to the console and quit.
+ console.error("Vertex Shader failed to compile.");
+ console.error(gl.getShaderInfoLog(vertexShader));
+ return;
+ }
+
+ // Now do the fragment shader.
+ var fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
+ gl.shaderSource(fragmentShader, this._getFunctionSource("fragment"));
+ gl.compileShader(fragmentShader);
+ if (!gl.getShaderParameter(fragmentShader, gl.COMPILE_STATUS)) {
+ console.error("Fragment Shader failed to compile.");
+ console.error(gl.getShaderInfoLog(fragmentShader));
+ return;
+ }
+
+ // We have two compiled shaders. Time to make the program.
+ var program = gl.createProgram();
+ gl.attachShader(program, vertexShader);
+ gl.attachShader(program, fragmentShader);
+ gl.linkProgram(program);
+
+ if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
+ console.error("Unable to link shaders into program.");
+ return;
+ }
+
+ // Our program has two inputs. We have a single uniform "color",
+ // and one vertex attribute "position".
+
+ gl.useProgram(program);
+ this._uScale = gl.getUniformLocation(program, "scale");
+ this._uTime = gl.getUniformLocation(program, "time");
+ this._uOffsetX = gl.getUniformLocation(program, "offsetX");
+ this._uOffsetY = gl.getUniformLocation(program, "offsetY");
+ this._uScalar = gl.getUniformLocation(program, "scalar");
+ this._uScalarOffset = gl.getUniformLocation(program, "scalarOffset");
+
+ this._aPosition = gl.getAttribLocation(program, "position");
+ gl.enableVertexAttribArray(this._aPosition);
+
+ this._aColor = gl.getAttribLocation(program, "color");
+ gl.enableVertexAttribArray(this._aColor);
+
+ this._positionData = new Float32Array([
+ // x y z 1
+ 0, 0.1, 0, 1,
+ -0.1, -0.1, 0, 1,
+ 0.1, -0.1, 0, 1
+ ]);
+ this._positionBuffer = gl.createBuffer();
+ gl.bindBuffer(gl.ARRAY_BUFFER, this._positionBuffer);
+ gl.bufferData(gl.ARRAY_BUFFER, this._positionData, gl.STATIC_DRAW);
+
+ this._colorData = new Float32Array([
+ 1, 0, 0, 1,
+ 0, 1, 0, 1,
+ 0, 0, 1, 1
+ ]);
+ this._colorBuffer = gl.createBuffer();
+ gl.bindBuffer(gl.ARRAY_BUFFER, this._colorBuffer);
+ gl.bufferData(gl.ARRAY_BUFFER, this._colorData, gl.STATIC_DRAW);
+
+ this._resetIfNecessary();
+ },
+
+ _getFunctionSource: function(id)
+ {
+ return document.getElementById(id).text;
+ },
+
+ _resetIfNecessary: function()
+ {
+ if (this._numTriangles <= this._bufferSize)
+ return;
+
+ if (!this._bufferSize)
+ this._bufferSize = 128;
+
+ while (this._numTriangles > this._bufferSize)
+ this._bufferSize *= 4;
+
+ this._uniformData = new Float32Array(this._bufferSize * 6);
+ for (var i = 0; i < this._bufferSize; ++i) {
+ this._uniformData[i * 6 + 0] = Stage.random(0.2, 0.4);
+ this._uniformData[i * 6 + 1] = 0;
+ this._uniformData[i * 6 + 2] = Stage.random(-0.9, 0.9);
+ this._uniformData[i * 6 + 3] = Stage.random(-0.9, 0.9);
+ this._uniformData[i * 6 + 4] = Stage.random(0.5, 2);
+ this._uniformData[i * 6 + 5] = Stage.random(0, 10);
+ }
+ },
+
+ tune: function(count)
+ {
+ if (!count)
+ return;
+
+ this._numTriangles += count;
+ this._numTriangles = Math.max(this._numTriangles, 0);
+
+ this._resetIfNecessary();
+ },
+
+ animate: function(timeDelta)
+ {
+ var gl = this._gl;
+
+ gl.clear(gl.COLOR_BUFFER_BIT);
+
+ if (!this._startTime)
+ this._startTime = Stage.dateCounterValue(1000);
+ var elapsedTime = Stage.dateCounterValue(1000) - this._startTime;
+
+ for (var i = 0; i < this._numTriangles; ++i) {
+
+ this._uniformData[i * 6 + 1] = elapsedTime;
+
+ var uniformDataOffset = i * 6;
+ gl.uniform1f(this._uScale, this._uniformData[uniformDataOffset++]);
+ gl.uniform1f(this._uTime, this._uniformData[uniformDataOffset++]);
+ gl.uniform1f(this._uOffsetX, this._uniformData[uniformDataOffset++]);
+ gl.uniform1f(this._uOffsetY, this._uniformData[uniformDataOffset++]);
+ gl.uniform1f(this._uScalar, this._uniformData[uniformDataOffset++]);
+ gl.uniform1f(this._uScalarOffset, this._uniformData[uniformDataOffset++]);
+
+ gl.bindBuffer(gl.ARRAY_BUFFER, this._positionBuffer);
+ gl.vertexAttribPointer(this._aPosition, 4, gl.FLOAT, false, 0, 0);
+
+ gl.bindBuffer(gl.ARRAY_BUFFER, this._colorBuffer);
+ gl.vertexAttribPointer(this._aColor, 4, gl.FLOAT, false, 0, 0);
+
+ gl.drawArrays(gl.TRIANGLES, 0, 3);
+ }
+
+ },
+
+ complexity: function()
+ {
+ return this._numTriangles;
+ }
+ }
+);
+
+WebGLBenchmark = Utilities.createSubclass(Benchmark,
+ function(options)
+ {
+ Benchmark.call(this, new WebGLStage(), options);
+ }
+);
+
+window.benchmarkClass = WebGLBenchmark;
+
+})();
</ins><span class="cx">Property changes on: trunk/PerformanceTests/Animometer/tests/3d/resources/webgl.js
</span><span class="cx">___________________________________________________________________
</span></span></pre></div>
<a id="svnmimetype"></a>
<div class="addfile"><h4>Added: svn:mime-type</h4></div>
<a id="svnkeywords"></a>
<div class="addfile"><h4>Added: svn:keywords</h4></div>
<a id="svneolstyle"></a>
<div class="addfile"><h4>Added: svn:eol-style</h4></div>
<a id="trunkPerformanceTestsAnimometertests3dwebglhtml"></a>
<div class="addfile"><h4>Added: trunk/PerformanceTests/Animometer/tests/3d/webgl.html (0 => 198442)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/PerformanceTests/Animometer/tests/3d/webgl.html (rev 0)
+++ trunk/PerformanceTests/Animometer/tests/3d/webgl.html 2016-03-18 20:48:39 UTC (rev 198442)
</span><span class="lines">@@ -0,0 +1,64 @@
</span><ins>+<!DOCTYPE html>
+<html>
+<head>
+ <meta charset="utf-8">
+ <link rel="stylesheet" type="text/css" href="../resources/stage.css">
+</head>
+<body>
+ <canvas id="stage"></canvas>
+ <script id="vertex" type="x-shader/x-glsl">
+attribute vec4 position;
+attribute vec4 color;
+
+uniform float scale;
+uniform float time;
+uniform float offsetX;
+uniform float offsetY;
+uniform float scalar;
+uniform float scalarOffset;
+
+varying vec4 v_color;
+
+void main() {
+
+ float fade = mod(scalarOffset + time * scalar / 10.0, 1.0);
+
+ if (fade < 0.5) {
+ fade = fade * 2.0;
+ } else {
+ fade = (1.0 - fade) * 2.0;
+ }
+
+ float xpos = position.x * scale;
+ float ypos = position.y * scale;
+
+ float angle = 3.14159 * 2.0 * fade;
+ float xrot = xpos * cos(angle) - ypos * sin(angle);
+ float yrot = xpos * sin(angle) + ypos * cos(angle);
+
+ xpos = xrot + offsetX;
+ ypos = yrot + offsetY;
+
+ v_color = vec4(fade, 1.0 - fade, 0.0, 1.0) + color;
+ gl_Position = vec4(xpos, ypos, 0.0, 1.0);
+}
+ </script>
+ <script id="fragment" type="x-shader/x-glsl">
+#ifdef GL_ES
+precision mediump float;
+#endif
+
+varying vec4 v_color;
+
+void main() {
+ gl_FragColor = v_color;
+}
+ </script>
+ <script src="../../resources/strings.js"></script>
+ <script src="../../resources/extensions.js"></script>
+ <script src="../../resources/statistics.js"></script>
+ <script src="../resources/math.js"></script>
+ <script src="../resources/main.js"></script>
+ <script src="resources/webgl.js"></script>
+</body>
+</html>
</ins><span class="cx">Property changes on: trunk/PerformanceTests/Animometer/tests/3d/webgl.html
</span><span class="cx">___________________________________________________________________
</span></span></pre></div>
<a id="svnmimetype"></a>
<div class="addfile"><h4>Added: svn:mime-type</h4></div>
<a id="svnkeywords"></a>
<div class="addfile"><h4>Added: svn:keywords</h4></div>
<a id="svneolstyle"></a>
<div class="addfile"><h4>Added: svn:eol-style</h4></div>
<a id="trunkPerformanceTestsChangeLog"></a>
<div class="modfile"><h4>Modified: trunk/PerformanceTests/ChangeLog (198441 => 198442)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/PerformanceTests/ChangeLog 2016-03-18 20:23:10 UTC (rev 198441)
+++ trunk/PerformanceTests/ChangeLog 2016-03-18 20:48:39 UTC (rev 198442)
</span><span class="lines">@@ -1,3 +1,20 @@
</span><ins>+2016-03-18 Dean Jackson <dino@apple.com>
+
+ Add a basic WebGL test to Animometer
+ https://bugs.webkit.org/show_bug.cgi?id=155475
+ <rdar://problem/25156860>
+
+ Reviewed by Simon Fraser and Jon Lee.
+
+ Add a pretty simple WebGL test to Animometer
+ which tries to draw a number of animated triangles.
+ The result still needs a bit of tuning.
+
+ * Animometer/resources/debug-runner/tests.js: Add a new
+ Suite for "3D" tests.
+ * Animometer/tests/3d/resources/webgl.js: Added.
+ * Animometer/tests/3d/webgl.html: Added.
+
</ins><span class="cx"> 2016-03-18 Jon Lee <jonlee@apple.com>
</span><span class="cx">
</span><span class="cx"> Add support for statically linking to a specific test
</span></span></pre>
</div>
</div>
</body>
</html>