⚠ Archived content — this site is no longer maintained.   Current WebKit documentation is at docs.webkit.org.

Changeset 249685 in webkit


Ignore:
Timestamp:
Sep 9, 2019, 6:39:57 PM (7 years ago)
Author:
Justin Fan
Message:

[WebGPU] Upload Babylon.js, WSL compile, and MotionMark links to demo page
​https://bugs.webkit.org/show_bug.cgi?id=201621

Reviewed by Dean Jackson.

Add new demos to the WebGPU demo collection.
Ensure error alerts/divs display properly if WebGPU is not enabled.

  • demos/webgpu/babylon/oneHelmetWebGPU.html:
  • demos/webgpu/babylon/oneSphereWebGPU.html:
  • demos/webgpu/compute-blur.html:
  • demos/webgpu/compute-boids-compile.html:
  • demos/webgpu/compute-boids.html:
  • demos/webgpu/hello-cube.html:
  • demos/webgpu/hello-triangle.html:
  • demos/webgpu/index.html:
  • demos/webgpu/resources/babylon-helmet.png: Added.
  • demos/webgpu/resources/babylon-sphere.png: Added.
  • demos/webgpu/resources/motionmark.jpeg: Added.
  • demos/webgpu/resources/webkit-logo.png: Added.
  • demos/webgpu/scripts/compute-boids-compile.js:
  • demos/webgpu/textured-cube.html:
Location:
trunk/Websites/webkit.org
Files:
4 added
11 edited

Legend:

Unmodified
Added
Removed

  • trunk/Websites/webkit.org/ChangeLog

    r249666 r249685  
     12019-09-09  Justin Fan  <justin_fan@apple.com>
     2
     3        [WebGPU] Upload Babylon.js, WSL compile, and MotionMark links to demo page
     4        https://bugs.webkit.org/show_bug.cgi?id=201621
     5
     6        Reviewed by Dean Jackson.
     7
     8        Add new demos to the WebGPU demo collection.
     9        Ensure error alerts/divs display properly if WebGPU is not enabled.
     10
     11        * demos/webgpu/babylon/oneHelmetWebGPU.html:
     12        * demos/webgpu/babylon/oneSphereWebGPU.html:
     13        * demos/webgpu/compute-blur.html:
     14        * demos/webgpu/compute-boids-compile.html:
     15        * demos/webgpu/compute-boids.html:
     16        * demos/webgpu/hello-cube.html:
     17        * demos/webgpu/hello-triangle.html:
     18        * demos/webgpu/index.html:
     19        * demos/webgpu/resources/babylon-helmet.png: Added.
     20        * demos/webgpu/resources/babylon-sphere.png: Added.
     21        * demos/webgpu/resources/motionmark.jpeg: Added.
     22        * demos/webgpu/resources/webkit-logo.png: Added.
     23        * demos/webgpu/scripts/compute-boids-compile.js:
     24        * demos/webgpu/textured-cube.html:
     25
    1262019-09-09  Jon Lee  <jonlee@apple.com>
    227

  • trunk/Websites/webkit.org/demos/webgpu/babylon/oneHelmetWebGPU.html

    r249666 r249685  
    177177    (async function() {
    178178        if (!navigator.gpu) {
    179             alert("Web GPU is not supported on your platform so far.");
     179            alert("WebGPU is not enabled.");
    180180            return;
    181181        }

  • trunk/Websites/webkit.org/demos/webgpu/babylon/oneSphereWebGPU.html

    r249666 r249685  
    178178    (async function() {
    179179        if (!navigator.gpu) {
    180             alert("Web GPU is not supported on your platform so far.");
     180            alert("WebGPU is not enabled.");
    181181            return;
    182182        }

  • trunk/Websites/webkit.org/demos/webgpu/compute-blur.html

    r248309 r249685  
    7878    <p>
    7979        Make sure you are on a system with WebGPU enabled. In
    80         Safari, first make sure the Developer Menu is visible (Preferences →
    81         Advanced), then Develop → Experimental Features → WebGPU.
     80        Safari, first make sure the Developer Menu is visible (Preferences >
     81        Advanced), then Develop > Experimental Features > WebGPU.
    8282    </p>
    8383</div>

  • trunk/Websites/webkit.org/demos/webgpu/compute-boids-compile.html

    r249665 r249685  
    88    <script src="scripts/gl-matrix-min.js"></script>
    99    <script src="scripts/compute-boids-utils.js"></script>
    10     <script src="scripts/compute-boids-compile.js"> </script>
     10    <link rel="stylesheet" href="css/style.css"/>
    1111    <style>
    1212    body {
    1313        font-family: system-ui;
     14        color: #f7f7ff;
     15        background-color: rgb(38, 38, 127);
     16        text-align: center;
    1417    }
    15 
    1618    </style>
    1719</head>
    1820
    1921<body>
    20     <h1>WebGPU Compute Boids Compile Time Test</h1>
    21     <div id="not-supported" style="display: none">WebGPU not supported! Please visit <a href="//webgpu.io">webgpu.io</a> to see the current implementation status.</div>
     22<div id="contents">
     23    <h1>WebGPU Compute Shader Compile Time Test</h1>
    2224    <div id="results"></div>
    2325    <canvas height=10 width=10></canvas>
     26</div>
     27<div id="error">
     28    <h2>WebGPU not available</h2>
     29    <p>
     30        Make sure you are on a system with WebGPU enabled. In
     31        Safari, first make sure the Developer Menu is visible (Preferences >
     32        Advanced), then Develop > Experimental Features > WebGPU.
     33    </p>
     34</div>
     35<script src="scripts/compute-boids-compile.js"> </script>
    2436</body>
    25 
    2637</html>

  • trunk/Websites/webkit.org/demos/webgpu/compute-boids.html

    r249446 r249685  
     1<!-- Based off of https://github.com/austinEng/webgpu-samples/blob/master/compute_boids.html -->
    12<!DOCTYPE html>
    23<html>
    … …  
    45<head>
    56  <meta name="viewport" content="width=1200">
    6   <title>WebGPU Compute Flocking</title>
     7  <title>WebGPU Compute Shader Flocking</title>
    78  <script src="scripts/gl-matrix-min.js"></script>
    89  <link rel="stylesheet" href="css/style.css"/>
    … …  
    2122<body>
    2223  <div id="contents">
    23     <h1>Compute Flocking</h1>
     24    <h1>Compute Shader Flocking</h1>
    2425    <p>
    2526        This demo uses a compute shader to update the positions of objects in parallel.
    2627    </p>
    27     <canvas width="1200" height="1200"></canvas>
     28    <canvas></canvas>
    2829  </div>
    2930  <div id="error">
    … …  
    3132      <p>
    3233          Make sure you are on a system with WebGPU enabled. In
    33           Safari, first make sure the Developer Menu is visible (Preferences →
    34           Advanced), then Develop → Experimental Features → WebGPU.
     34          Safari, first make sure the Developer Menu is visible (Preferences >
     35          Advanced), then Develop > Experimental Features > WebGPU.
    3536      </p>
    3637  </div>
    … …  
    141142
    142143      const canvas = document.querySelector('canvas');
     144      let size = window.innerWidth < window.innerHeight ? window.innerWidth : window.innerHeight;
     145      size *= 0.75;
     146      canvas.width = size;
     147      canvas.height = size;
    143148      const context = canvas.getContext('gpu');
    144149

  • trunk/Websites/webkit.org/demos/webgpu/hello-cube.html

    r248309 r249685  
    3030    <p>
    3131        Make sure you are on a system with WebGPU enabled. In
    32         Safari, first make sure the Developer Menu is visible (Preferences →
    33         Advanced), then Develop → Experimental Features → WebGPU.
     32        Safari, first make sure the Developer Menu is visible (Preferences >
     33        Advanced), then Develop > Experimental Features > WebGPU.
    3434    </p>
    3535</div>

  • trunk/Websites/webkit.org/demos/webgpu/hello-triangle.html

    r248309 r249685  
    2727    <p>
    2828        Make sure you are on a system with WebGPU enabled. In
    29         Safari, first make sure the Developer Menu is visible (Preferences →
    30         Advanced), then Develop → Experimental Features → WebGPU.
     29        Safari, first make sure the Developer Menu is visible (Preferences >
     30        Advanced), then Develop > Experimental Features > WebGPU.
    3131    </p>
    3232</div>

  • trunk/Websites/webkit.org/demos/webgpu/index.html

    r249446 r249685  
    178178        <p class="howto">
    179179            Make sure you are on a system with WebGPU enabled. In Safari, first
    180             make sure the Developer Menu is visible (Preferences → Advanced),
    181             then ensure Develop → Experimental Features → WebGPU is checked.
     180            make sure the Developer Menu is visible (Preferences > Advanced),
     181            then ensure Develop > Experimental Features > WebGPU is checked.
    182182        </p>
    183183        <p class="warning">
    … …  
    201201            <a href="textured-cube.html">
    202202            <img src="resources/textured-cube.png"><br>
    203             Textured Spinning Cube
     203            Textured Cube
    204204            </a>
    205205        </div>
    … …  
    211211        </div>
    212212        <div class="example">
     213            <a href="babylon/oneSphereWebGPU.html">
     214            <img src="resources/babylon-sphere.png"><br>
     215            Sphere (Babylon.js)
     216            </a>
     217        </div>
     218        <div class="example">
     219            <a href="babylon/oneHelmetWebGPU.html">
     220            <img src="resources/babylon-helmet.png"><br>
     221            Helmet (Babylon.js)
     222            </a>
     223        </div>
     224        <div class="example">
    213225            <a href="compute-boids.html">
    214226            <img src="resources/compute-boids.png"><br>
    215             Compute Shader Boids
     227            Compute Shader Flocking
     228            </a>
     229        </div>
     230        <div class="example">
     231            <a href="compute-boids-compile.html">
     232            <img src="resources/webkit-logo.png"><br>
     233            Compute Shader Compile Time Test
     234            </a>
     235        </div>
     236        <div class="example">
     237            <a href="https://browserbench.org/MotionMark1.1/developer.html?test-interval=10&display=minimal&tiles=big&controller=ramp&frame-rate=50&kalman-process-error=1&kalman-measurement-error=4&time-measurement=performance&suite-name=3DGraphics&test-name=TrianglesWebGPU">
     238            <img src="resources/motionmark.jpeg">
     239            MotionMark Benchmark
    216240            </a>
    217241        </div>

  • trunk/Websites/webkit.org/demos/webgpu/scripts/compute-boids-compile.js

    r249665 r249685  
    1 if (!navigator.gpu) {
    2     document.getElementById('not-supported').style.display = 'block';
    3     alert('WebGPU not supported! Please visit webgpu.io to see the current implementation status.');
    4 }
     1if (!navigator.gpu)
     2    document.body.className = "error";
    53
    64const isChrome = navigator.userAgent.indexOf("Chrome") >= 0;

  • trunk/Websites/webkit.org/demos/webgpu/textured-cube.html

    r248309 r249685  
    3333    <p>
    3434        Make sure you are on a system with WebGPU enabled. In
    35         Safari, first make sure the Developer Menu is visible (Preferences →
    36         Advanced), then Develop → Experimental Features → WebGPU.
     35        Safari, first make sure the Developer Menu is visible (Preferences >
     36        Advanced), then Develop > Experimental Features > WebGPU.
    3737    </p>
    3838</div>
Note: See TracChangeset for help on using the changeset viewer.