Skip to content

Commit 9af3bcd

Browse files
committed
Convert Stage and subclasses to use JS class syntax.
1 parent cacbf11 commit 9af3bcd

30 files changed

+890
-944
lines changed
Lines changed: 145 additions & 150 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
/*
2-
* Copyright (C) 2015-2017 Apple Inc. All rights reserved.
2+
* Copyright (C) 2015-2024 Apple Inc. All rights reserved.
33
*
44
* Redistribution and use in source and binary forms, with or without
55
* modification, are permitted provided that the following conditions
@@ -22,179 +22,176 @@
2222
* ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
2323
* THE POSSIBILITY OF SUCH DAMAGE.
2424
*/
25-
(function() {
2625

27-
WebGLStage = Utilities.createSubclass(Stage,
28-
function(element, options)
26+
class WebGLStage extends Stage {
27+
constructor(element, options)
2928
{
30-
Stage.call(this);
31-
},
29+
super();
30+
}
31+
32+
initialize(benchmark, options)
3233
{
34+
super.initialize(benchmark, options);
3335

34-
initialize: function(benchmark, options)
35-
{
36-
Stage.prototype.initialize.call(this, benchmark, options);
37-
38-
this._numTriangles = 0;
39-
this._bufferSize = 0;
40-
41-
this._gl = this.element.getContext("webgl");
42-
var gl = this._gl;
43-
44-
gl.clearColor(0, 0, 0, 1);
45-
46-
// Create the vertex shader object.
47-
var vertexShader = gl.createShader(gl.VERTEX_SHADER);
48-
49-
// The source code for the shader is extracted from the <script> element above.
50-
gl.shaderSource(vertexShader, this._getFunctionSource("vertex"));
51-
52-
// Compile the shader.
53-
gl.compileShader(vertexShader);
54-
if (!gl.getShaderParameter(vertexShader, gl.COMPILE_STATUS)) {
55-
// We failed to compile. Output to the console and quit.
56-
console.error("Vertex Shader failed to compile.");
57-
console.error(gl.getShaderInfoLog(vertexShader));
58-
return;
59-
}
60-
61-
// Now do the fragment shader.
62-
var fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
63-
gl.shaderSource(fragmentShader, this._getFunctionSource("fragment"));
64-
gl.compileShader(fragmentShader);
65-
if (!gl.getShaderParameter(fragmentShader, gl.COMPILE_STATUS)) {
66-
console.error("Fragment Shader failed to compile.");
67-
console.error(gl.getShaderInfoLog(fragmentShader));
68-
return;
69-
}
70-
71-
// We have two compiled shaders. Time to make the program.
72-
var program = gl.createProgram();
73-
gl.attachShader(program, vertexShader);
74-
gl.attachShader(program, fragmentShader);
75-
gl.linkProgram(program);
76-
77-
if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
78-
console.error("Unable to link shaders into program.");
79-
return;
80-
}
81-
82-
// Our program has two inputs. We have a single uniform "color",
83-
// and one vertex attribute "position".
84-
85-
gl.useProgram(program);
86-
this._uScale = gl.getUniformLocation(program, "scale");
87-
this._uTime = gl.getUniformLocation(program, "time");
88-
this._uOffsetX = gl.getUniformLocation(program, "offsetX");
89-
this._uOffsetY = gl.getUniformLocation(program, "offsetY");
90-
this._uScalar = gl.getUniformLocation(program, "scalar");
91-
this._uScalarOffset = gl.getUniformLocation(program, "scalarOffset");
92-
93-
this._aPosition = gl.getAttribLocation(program, "position");
94-
gl.enableVertexAttribArray(this._aPosition);
95-
96-
this._aColor = gl.getAttribLocation(program, "color");
97-
gl.enableVertexAttribArray(this._aColor);
98-
99-
this._positionData = new Float32Array([
100-
// x y z 1
101-
0, 0.1, 0, 1,
102-
-0.1, -0.1, 0, 1,
103-
0.1, -0.1, 0, 1
104-
]);
105-
this._positionBuffer = gl.createBuffer();
106-
gl.bindBuffer(gl.ARRAY_BUFFER, this._positionBuffer);
107-
gl.bufferData(gl.ARRAY_BUFFER, this._positionData, gl.STATIC_DRAW);
108-
109-
this._colorData = new Float32Array([
110-
1, 0, 0, 1,
111-
0, 1, 0, 1,
112-
0, 0, 1, 1
113-
]);
114-
this._colorBuffer = gl.createBuffer();
115-
gl.bindBuffer(gl.ARRAY_BUFFER, this._colorBuffer);
116-
gl.bufferData(gl.ARRAY_BUFFER, this._colorData, gl.STATIC_DRAW);
36+
this._numTriangles = 0;
37+
this._bufferSize = 0;
11738

118-
this._resetIfNecessary();
119-
},
39+
this._gl = this.element.getContext("webgl");
40+
var gl = this._gl;
12041

121-
_getFunctionSource: function(id)
122-
{
123-
return document.getElementById(id).text;
124-
},
42+
gl.clearColor(0, 0, 0, 1);
12543

126-
_resetIfNecessary: function()
127-
{
128-
if (this._numTriangles <= this._bufferSize)
129-
return;
44+
// Create the vertex shader object.
45+
var vertexShader = gl.createShader(gl.VERTEX_SHADER);
13046

131-
if (!this._bufferSize)
132-
this._bufferSize = 128;
47+
// The source code for the shader is extracted from the <script> element above.
48+
gl.shaderSource(vertexShader, this._getFunctionSource("vertex"));
13349

134-
while (this._numTriangles > this._bufferSize)
135-
this._bufferSize *= 4;
50+
// Compile the shader.
51+
gl.compileShader(vertexShader);
52+
if (!gl.getShaderParameter(vertexShader, gl.COMPILE_STATUS)) {
53+
// We failed to compile. Output to the console and quit.
54+
console.error("Vertex Shader failed to compile.");
55+
console.error(gl.getShaderInfoLog(vertexShader));
56+
return;
57+
}
13658

137-
this._uniformData = new Float32Array(this._bufferSize * 6);
138-
for (var i = 0; i < this._bufferSize; ++i) {
139-
this._uniformData[i * 6 + 0] = Stage.random(0.2, 0.4);
140-
this._uniformData[i * 6 + 1] = 0;
141-
this._uniformData[i * 6 + 2] = Stage.random(-0.9, 0.9);
142-
this._uniformData[i * 6 + 3] = Stage.random(-0.9, 0.9);
143-
this._uniformData[i * 6 + 4] = Stage.random(0.5, 2);
144-
this._uniformData[i * 6 + 5] = Stage.random(0, 10);
145-
}
146-
},
59+
// Now do the fragment shader.
60+
var fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
61+
gl.shaderSource(fragmentShader, this._getFunctionSource("fragment"));
62+
gl.compileShader(fragmentShader);
63+
if (!gl.getShaderParameter(fragmentShader, gl.COMPILE_STATUS)) {
64+
console.error("Fragment Shader failed to compile.");
65+
console.error(gl.getShaderInfoLog(fragmentShader));
66+
return;
67+
}
14768

148-
tune: function(count)
149-
{
150-
if (!count)
151-
return;
69+
// We have two compiled shaders. Time to make the program.
70+
var program = gl.createProgram();
71+
gl.attachShader(program, vertexShader);
72+
gl.attachShader(program, fragmentShader);
73+
gl.linkProgram(program);
15274

153-
this._numTriangles += count;
154-
this._numTriangles = Math.max(this._numTriangles, 0);
75+
if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
76+
console.error("Unable to link shaders into program.");
77+
return;
78+
}
15579

156-
this._resetIfNecessary();
157-
},
80+
// Our program has two inputs. We have a single uniform "color",
81+
// and one vertex attribute "position".
82+
83+
gl.useProgram(program);
84+
this._uScale = gl.getUniformLocation(program, "scale");
85+
this._uTime = gl.getUniformLocation(program, "time");
86+
this._uOffsetX = gl.getUniformLocation(program, "offsetX");
87+
this._uOffsetY = gl.getUniformLocation(program, "offsetY");
88+
this._uScalar = gl.getUniformLocation(program, "scalar");
89+
this._uScalarOffset = gl.getUniformLocation(program, "scalarOffset");
90+
91+
this._aPosition = gl.getAttribLocation(program, "position");
92+
gl.enableVertexAttribArray(this._aPosition);
93+
94+
this._aColor = gl.getAttribLocation(program, "color");
95+
gl.enableVertexAttribArray(this._aColor);
96+
97+
this._positionData = new Float32Array([
98+
// x y z 1
99+
0, 0.1, 0, 1,
100+
-0.1, -0.1, 0, 1,
101+
0.1, -0.1, 0, 1
102+
]);
103+
this._positionBuffer = gl.createBuffer();
104+
gl.bindBuffer(gl.ARRAY_BUFFER, this._positionBuffer);
105+
gl.bufferData(gl.ARRAY_BUFFER, this._positionData, gl.STATIC_DRAW);
106+
107+
this._colorData = new Float32Array([
108+
1, 0, 0, 1,
109+
0, 1, 0, 1,
110+
0, 0, 1, 1
111+
]);
112+
this._colorBuffer = gl.createBuffer();
113+
gl.bindBuffer(gl.ARRAY_BUFFER, this._colorBuffer);
114+
gl.bufferData(gl.ARRAY_BUFFER, this._colorData, gl.STATIC_DRAW);
115+
116+
this._resetIfNecessary();
117+
}
158118

159-
animate: function(timeDelta)
160-
{
161-
var gl = this._gl;
119+
_getFunctionSource(id)
120+
{
121+
return document.getElementById(id).text;
122+
}
162123

163-
gl.clear(gl.COLOR_BUFFER_BIT);
124+
_resetIfNecessary()
125+
{
126+
if (this._numTriangles <= this._bufferSize)
127+
return;
128+
129+
if (!this._bufferSize)
130+
this._bufferSize = 128;
131+
132+
while (this._numTriangles > this._bufferSize)
133+
this._bufferSize *= 4;
134+
135+
this._uniformData = new Float32Array(this._bufferSize * 6);
136+
for (var i = 0; i < this._bufferSize; ++i) {
137+
this._uniformData[i * 6 + 0] = Stage.random(0.2, 0.4);
138+
this._uniformData[i * 6 + 1] = 0;
139+
this._uniformData[i * 6 + 2] = Stage.random(-0.9, 0.9);
140+
this._uniformData[i * 6 + 3] = Stage.random(-0.9, 0.9);
141+
this._uniformData[i * 6 + 4] = Stage.random(0.5, 2);
142+
this._uniformData[i * 6 + 5] = Stage.random(0, 10);
143+
}
144+
}
164145

165-
if (!this._startTime)
166-
this._startTime = Stage.dateCounterValue(1000);
167-
var elapsedTime = Stage.dateCounterValue(1000) - this._startTime;
146+
tune(count)
147+
{
148+
if (!count)
149+
return;
168150

169-
for (var i = 0; i < this._numTriangles; ++i) {
151+
this._numTriangles += count;
152+
this._numTriangles = Math.max(this._numTriangles, 0);
170153

171-
this._uniformData[i * 6 + 1] = elapsedTime;
154+
this._resetIfNecessary();
155+
}
156+
157+
animate(timeDelta)
158+
{
159+
var gl = this._gl;
160+
161+
gl.clear(gl.COLOR_BUFFER_BIT);
172162

173-
var uniformDataOffset = i * 6;
174-
gl.uniform1f(this._uScale, this._uniformData[uniformDataOffset++]);
175-
gl.uniform1f(this._uTime, this._uniformData[uniformDataOffset++]);
176-
gl.uniform1f(this._uOffsetX, this._uniformData[uniformDataOffset++]);
177-
gl.uniform1f(this._uOffsetY, this._uniformData[uniformDataOffset++]);
178-
gl.uniform1f(this._uScalar, this._uniformData[uniformDataOffset++]);
179-
gl.uniform1f(this._uScalarOffset, this._uniformData[uniformDataOffset++]);
163+
if (!this._startTime)
164+
this._startTime = Stage.dateCounterValue(1000);
165+
var elapsedTime = Stage.dateCounterValue(1000) - this._startTime;
180166

181-
gl.bindBuffer(gl.ARRAY_BUFFER, this._positionBuffer);
182-
gl.vertexAttribPointer(this._aPosition, 4, gl.FLOAT, false, 0, 0);
167+
for (var i = 0; i < this._numTriangles; ++i) {
183168

184-
gl.bindBuffer(gl.ARRAY_BUFFER, this._colorBuffer);
185-
gl.vertexAttribPointer(this._aColor, 4, gl.FLOAT, false, 0, 0);
169+
this._uniformData[i * 6 + 1] = elapsedTime;
186170

187-
gl.drawArrays(gl.TRIANGLES, 0, 3);
188-
}
171+
var uniformDataOffset = i * 6;
172+
gl.uniform1f(this._uScale, this._uniformData[uniformDataOffset++]);
173+
gl.uniform1f(this._uTime, this._uniformData[uniformDataOffset++]);
174+
gl.uniform1f(this._uOffsetX, this._uniformData[uniformDataOffset++]);
175+
gl.uniform1f(this._uOffsetY, this._uniformData[uniformDataOffset++]);
176+
gl.uniform1f(this._uScalar, this._uniformData[uniformDataOffset++]);
177+
gl.uniform1f(this._uScalarOffset, this._uniformData[uniformDataOffset++]);
189178

190-
},
179+
gl.bindBuffer(gl.ARRAY_BUFFER, this._positionBuffer);
180+
gl.vertexAttribPointer(this._aPosition, 4, gl.FLOAT, false, 0, 0);
181+
182+
gl.bindBuffer(gl.ARRAY_BUFFER, this._colorBuffer);
183+
gl.vertexAttribPointer(this._aColor, 4, gl.FLOAT, false, 0, 0);
191184

192-
complexity: function()
193-
{
194-
return this._numTriangles;
185+
gl.drawArrays(gl.TRIANGLES, 0, 3);
195186
}
187+
196188
}
197-
);
189+
190+
complexity()
191+
{
192+
return this._numTriangles;
193+
}
194+
}
198195

199196
WebGLBenchmark = Utilities.createSubclass(Benchmark,
200197
function(options)
@@ -204,5 +201,3 @@ WebGLBenchmark = Utilities.createSubclass(Benchmark,
204201
);
205202

206203
window.benchmarkClass = WebGLBenchmark;
207-
208-
})();

0 commit comments

Comments
 (0)