| /* |
| * Copyright (C) 2019 Apple Inc. All rights reserved. |
| * |
| * Redistribution and use in source and binary forms, with or without |
| * modification, are permitted provided that the following conditions |
| * are met: |
| * 1. Redistributions of source code must retain the above copyright |
| * notice, this list of conditions and the following disclaimer. |
| * 2. Redistributions in binary form must reproduce the above copyright |
| * notice, this list of conditions and the following disclaimer in the |
| * documentation and/or other materials provided with the distribution. |
| * |
| * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS'' |
| * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, |
| * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR |
| * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS |
| * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR |
| * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF |
| * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS |
| * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN |
| * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) |
| * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF |
| * THE POSSIBILITY OF SUCH DAMAGE. |
| */ |
| |
| const whlslShaders = ` |
| struct VertexOutput { |
| float4 position : SV_Position; |
| float4 color : attribute(1); |
| } |
| |
| vertex VertexOutput vertexMain(float4 position : attribute(0), |
| float4 color : attribute(1), |
| constant float[] timeUniform : register(b0, space0), |
| constant float[] uniforms : register(b0, space1)) { |
| float scale = uniforms[0]; |
| float offsetX = uniforms[1]; |
| float offsetY = uniforms[2]; |
| float scalar = uniforms[3]; |
| float scalarOffset = uniforms[4]; |
| float time = timeUniform[0]; |
| |
| float fade = fmod(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; |
| |
| VertexOutput out; |
| out.position = float4(xpos, ypos, 0.0, 1.0); |
| out.color = float4(fade, 1.0 - fade, 0.0, 1.0) + color; |
| return out; |
| } |
| |
| fragment float4 fragmentMain(float4 inColor : attribute(1)) : SV_Target 0 { |
| return inColor; |
| } |
| `; |
| |
| (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; |
| |
| const gpuContext = this.element.getContext('gpu'); |
| |
| navigator.gpu.requestAdapter({ powerPreference: "low-power" }).then(adapter => { |
| return adapter.requestDevice().then(device => { |
| this._device = device; |
| |
| const swapChainFormat = "bgra8unorm"; |
| this._swapChain = gpuContext.configureSwapChain({ |
| device: device, |
| format: swapChainFormat, |
| usage: GPUTextureUsage.OUTPUT_ATTACHMENT |
| }); |
| |
| this._timeBindGroupLayout = device.createBindGroupLayout({ |
| bindings: [ |
| { binding: 0, visibility: GPUShaderStage.VERTEX, type: "uniform-buffer" }, |
| ], |
| }); |
| |
| this._bindGroupLayout = device.createBindGroupLayout({ |
| bindings: [ |
| { binding: 0, visibility: GPUShaderStage.VERTEX, type: "uniform-buffer" }, |
| ], |
| }); |
| |
| const vec4Size = 4 * Float32Array.BYTES_PER_ELEMENT; |
| |
| const pipelineLayout = device.createPipelineLayout({ bindGroupLayouts: [this._timeBindGroupLayout, this._bindGroupLayout] }); |
| const shaderModule = device.createShaderModule({ code: whlslShaders, isWHLSL: true }); |
| |
| const pipelineDesc = { |
| layout: pipelineLayout, |
| vertexStage: { |
| module: shaderModule, |
| entryPoint: "vertexMain", |
| }, |
| fragmentStage: { |
| module: shaderModule, |
| entryPoint: "fragmentMain" |
| }, |
| |
| primitiveTopology: "triangle-list", |
| |
| vertexInput: { |
| indexFormat: "uint32", |
| vertexBuffers: [{ |
| // vertex buffer |
| stride: 2 * vec4Size, |
| stepMode: "vertex", |
| attributeSet: [{ |
| // vertex positions |
| shaderLocation: 0, |
| offset: 0, |
| format: "float4" |
| }, { |
| // vertex colors |
| shaderLocation: 1, |
| offset: vec4Size, |
| format: "float4" |
| }], |
| }], |
| }, |
| |
| rasterizationState: { |
| frontFace: 'ccw', |
| cullMode: 'none', |
| }, |
| |
| colorStates: [{ |
| format: swapChainFormat, |
| alphaBlend: {}, |
| colorBlend: {}, |
| }], |
| }; |
| |
| this._pipeline = device.createRenderPipeline(pipelineDesc); |
| |
| const [vertexBuffer, vertexArrayBuffer] = device.createBufferMapped({ |
| size: 2 * 3 * vec4Size, |
| usage: GPUBufferUsage.VERTEX |
| }); |
| const vertexWriteBuffer = new Float32Array(vertexArrayBuffer); |
| vertexWriteBuffer.set([ |
| // position data /**/ color data |
| 0, 0.1, 0, 1, /**/ 1, 0, 0, 1, |
| -0.1, -0.1, 0, 1, /**/ 0, 1, 0, 1, |
| 0.1, -0.1, 0, 1, /**/ 0, 0, 1, 1, |
| ]); |
| vertexBuffer.unmap(); |
| |
| this._vertexBuffer = vertexBuffer; |
| this._timeMappedBuffers = []; |
| |
| this._resetIfNecessary(); |
| |
| benchmark._initPromise.resolve(); |
| }); |
| }); |
| }, |
| |
| _getFunctionSource: function(id) |
| { |
| return document.getElementById(id).text; |
| }, |
| |
| _resetIfNecessary: function() |
| { |
| if (this._bindGroups != undefined && this._numTriangles <= this._bindGroups.length) |
| return; |
| |
| const numTriangles = this._numTriangles; |
| |
| const device = this._device; |
| |
| // Minimum buffer offset alignment is 256 bytes. |
| const uniformBytes = 5 * Float32Array.BYTES_PER_ELEMENT; |
| const alignedUniformBytes = Math.ceil(uniformBytes / 256) * 256; |
| const alignedUniformFloats = alignedUniformBytes / Float32Array.BYTES_PER_ELEMENT; |
| |
| const [uniformBuffer, uniformArrayBuffer] = device.createBufferMapped({ |
| size: numTriangles * alignedUniformBytes + Float32Array.BYTES_PER_ELEMENT, |
| usage: GPUBufferUsage.TRANSFER_DST | GPUBufferUsage.UNIFORM |
| }); |
| const uniformWriteArray = new Float32Array(uniformArrayBuffer); |
| |
| this._bindGroups = new Array(numTriangles); |
| for (let i = 0; i < numTriangles; ++i) { |
| uniformWriteArray[alignedUniformFloats * i + 0] = Stage.random(0.2, 0.4); // scale |
| uniformWriteArray[alignedUniformFloats * i + 1] = Stage.random(-0.9, 0.9); // offsetX |
| uniformWriteArray[alignedUniformFloats * i + 2] = Stage.random(-0.9, 0.9); // offsetY |
| uniformWriteArray[alignedUniformFloats * i + 3] = Stage.random(0.5, 2); // scalar |
| uniformWriteArray[alignedUniformFloats * i + 4] = Stage.random(0, 10); // scalarOffset |
| |
| this._bindGroups[i] = device.createBindGroup({ |
| layout: this._bindGroupLayout, |
| bindings: [{ |
| binding: 0, |
| resource: { |
| buffer: uniformBuffer, |
| offset: i * alignedUniformBytes, |
| size: 6 * Float32Array.BYTES_PER_ELEMENT, |
| } |
| }] |
| }); |
| } |
| |
| uniformBuffer.unmap(); |
| |
| this._timeOffset = numTriangles * alignedUniformBytes; |
| this._timeBindGroup = device.createBindGroup({ |
| layout: this._timeBindGroupLayout, |
| bindings: [{ |
| binding: 0, |
| resource: { |
| buffer: uniformBuffer, |
| offset: this._timeOffset, |
| size: Float32Array.BYTES_PER_ELEMENT, |
| } |
| }] |
| }); |
| |
| this._uniformBuffer = uniformBuffer; |
| }, |
| |
| tune: function(count) |
| { |
| if (!count) |
| return; |
| |
| this._numTriangles += count; |
| this._numTriangles = Math.max(this._numTriangles, 0); |
| |
| this._resetIfNecessary(); |
| }, |
| |
| animate: function(timeDelta) |
| { |
| const device = this._device; |
| |
| if (!this._startTime) |
| this._startTime = Stage.dateCounterValue(1000); |
| |
| const elapsedTimeData = new Float32Array([Stage.dateCounterValue(1000) - this._startTime]); |
| |
| // Update time uniform |
| let mappedBuffer; |
| |
| if (this._timeMappedBuffers.length === 0) { |
| mappedBuffer = device.createBufferMapped({ |
| size: Float32Array.BYTES_PER_ELEMENT, |
| usage: GPUBufferUsage.TRANSFER_SRC | GPUBufferUsage.MAP_WRITE |
| }); |
| } else |
| mappedBuffer = this._timeMappedBuffers.shift(); |
| |
| const [timeStagingBuffer, timeStagingArrayBuffer] = mappedBuffer; |
| |
| const writeArray = new Float32Array(timeStagingArrayBuffer); |
| writeArray.set(elapsedTimeData); |
| timeStagingBuffer.unmap(); |
| |
| const commandEncoder = device.createCommandEncoder({}); |
| commandEncoder.copyBufferToBuffer(timeStagingBuffer, 0, this._uniformBuffer, this._timeOffset, elapsedTimeData.byteLength); |
| |
| const renderPassDescriptor = { |
| colorAttachments: [{ |
| loadOp: "clear", |
| storeOp: "store", |
| clearColor: { r: 1, g: 1, b: 1, a: 1.0 }, |
| attachment: this._swapChain.getCurrentTexture().createDefaultView(), |
| }], |
| }; |
| |
| const passEncoder = commandEncoder.beginRenderPass(renderPassDescriptor); |
| passEncoder.setPipeline(this._pipeline); |
| passEncoder.setVertexBuffers(0, [this._vertexBuffer], [0]); |
| passEncoder.setBindGroup(0, this._timeBindGroup); |
| for (let i = 0; i < this._numTriangles; ++i) { |
| passEncoder.setBindGroup(1, this._bindGroups[i]); |
| passEncoder.draw(3, 1, 0, 0); |
| } |
| passEncoder.endPass(); |
| |
| device.getQueue().submit([commandEncoder.finish()]); |
| |
| timeStagingBuffer.mapWriteAsync().then(arrayBuffer => { |
| mappedBuffer[1] = arrayBuffer; |
| this._timeMappedBuffers.push(mappedBuffer); |
| }); |
| }, |
| |
| complexity: function() |
| { |
| return this._numTriangles; |
| } |
| } |
| ); |
| |
| WebGLBenchmark = Utilities.createSubclass(Benchmark, |
| function(options) |
| { |
| Benchmark.call(this, new WebGLStage(), options); |
| }, { |
| |
| waitUntilReady: function() { |
| this._initPromise = new SimplePromise; |
| return this._initPromise; |
| }, |
| }); |
| |
| window.benchmarkClass = WebGLBenchmark; |
| |
| })(); |
