Home Explore Help
Register Sign In
zhangyupeng
/
Babylon.js
1
0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Browse Source

Fix data setup :-(

sebavan 5 years ago
parent
df3ca8ee8e
commit
54d19f049a
2 changed files with 12 additions and 515 deletions
Split View Show Diff Stats
  1. 0 469
      Playground/indexWebGPU-local.html
  2. 12 46
      src/Engines/webgpuEngine.ts

+ 0 - 469
Playground/indexWebGPU-local.html
View File 

@@ -1,469 +0,0 @@
 
-<!DOCTYPE html>

-<html>

-

-

-<head>

-    <title>Babylon.js Playground WEBGPU</title>

-    <meta charset='utf-8' />

-    <meta name="viewport" content="width=device-width, user-scalable=no">

-    <script src="https://code.jquery.com/pep/0.4.2/pep.min.js"></script>

-    <link rel="stylesheet" href="https://use.typekit.net/cta4xsb.css">

-

-    <!--For canvas/code separator-->

-    <script src="js/libs/split.js"></script>

-

-    <script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.6.2/dat.gui.min.js"></script>

-    <!-- jszip -->

-    <script src="js/libs/jszip.min.js"></script>

-    <script src="js/libs/fileSaver.js"></script>

-    <!-- Dependencies -->

-    <script src="../dist/preview%20release/ammo.js"></script>

-    <script src="../dist/preview%20release/recast.js"></script>

-    <script src="../dist/preview%20release/cannon.js"></script>

-    <script src="../dist/preview%20release/Oimo.js"></script>

-    <script src="../dist/preview%20release/gltf_validator.js"></script>

-    <script src="../dist/preview%20release/earcut.min.js"></script>

-    <!-- Monaco -->

-

-    <!-- Babylon.js -->

-    <script src="../Tools/DevLoader/BabylonLoader.js"></script>

-

-    <link href="css/index.css" rel="stylesheet" />

-</head>

-

-<body>

-    <div class="navbar navBar1600">

-        <div class="title">

-            Babylon.js Playground WEBGPU

-        </div>

-        <div class="version" id="mainTitle">

-        </div>

-

-        <div class="category">

-            <div class="button run" id="runButton1600">Run

-                <i class="fa fa-play" aria-hidden="true"></i>

-            </div>

-        </div>

-

-

-        <div class="category">

-            <div class="button" id="newButton1600">New

-                <i class="fa fa-file" aria-hidden="true"></i>

-            </div>

-            <div class="button removeOnPhone" id="clearButton1600">Clear

-                <i class="fa fa-trash" aria-hidden="true"></i>

-            </div>

-        </div>

-

-        <div class="category">

-            <div class="button" id="saveButton1600">Save

-                <i class="fa fa-floppy-o" aria-hidden="true"></i>

-            </div>

-        </div>

-

-        <div class="category">

-            <div class="button select">Settings

-                <div class="toDisplay">

-                    <div class="option subSelect">Theme

-                        <i class="fa fa-chevron-right" aria-hidden="true"></i>

-                        <div class="toDisplaySub">

-                            <div class="option" id="darkTheme1600">Dark</div>

-                            <div class="option" id="lightTheme1600">Light</div>

-                        </div>

-                    </div>

-                    <div class="option subSelect">

-                        <span id="currentFontSize1600">Font: 14</span>

-                        <i class="fa fa-chevron-right" aria-hidden="true"></i>

-                        <div class="toDisplaySub">

-                            <div class="option" onclick="setFontSize(12);">12</div>

-                            <div class="option" onclick="setFontSize(14);">14</div>

-                            <div class="option" onclick="setFontSize(16);">16</div>

-                            <div class="option" onclick="setFontSize(18);">18</div>

-                            <div class="option" onclick="setFontSize(20);">20</div>

-                            <div class="option" onclick="setFontSize(22);">22</div>

-                        </div>

-                    </div>

-                    <div class="option" id="safemodeToggle1600">Safe mode

-                        <i class="far fa-square" aria-hidden="true"></i>

-                    </div>

-                    <div class="option checked" id="editorButton1600">Editor

-                        <i class="fa fa-check-square" aria-hidden="true"></i>

-                    </div>

-                    <div class="option" id="fullscreenButton1600">Fullscreen</div>

-                    <div class="option" id="editorFullscreenButton1600">Editor Fullscreen</div>

-                    <div class="option" id="formatButton1600">Format code</div>

-                    <div class="option" id="minimapToggle1600">Minimap

-                        <i class="far fa-square" aria-hidden="true"></i>

-                    </div>

-                    <div class="option subSelect" id="qrCodeHover" onmouseover="showQRCode();">QR Code Link

-                        <i class="fa fa-chevron-right" aria-hidden="true"></i>

-                        <div class="toDisplaySub">

-                            <div class="option" style="height:auto;padding: 20px;background: white;" id="qrCodeImage">QR Code Image</div>

-                        </div>

-                    </div>

-                </div>

-            </div>

-

-            <!-- <div class="button uncheck" id="debugButton1600">Inspector</div> -->

-            <div class="button" id="metadataButton1600">Metadata</div>

-        </div>

-

-

-

-        <div class="category right">

-            <div class="button select">

-                <span id="currentVersion1600">Version: Latest</span>

-                <div class="toDisplay">

-                    <div class="option" onclick="setVersion('latest');">Latest</div>

-                    <div class="option" onclick="setVersion('2.5');">2.5</div>

-                </div>

-            </div>

-            <div class="button select">

-                <span class="examplesButton">Examples</span>

-            </div>

-        </div>

-    </div>

-

-    <div class="navbar navBar1475">

-        <div class="title">

-            Babylon.js Playground

-        </div>

-        <div class="version" id="mainTitle">

-        </div>

-

-        <div class="category">

-            <div class="button run" id="runButton1475">Run

-                <i class="fa fa-play" aria-hidden="true"></i>

-            </div>

-        </div>

-

-

-        <div class="category">

-            <div class="button" id="newButton1475">New

-                <i class="fa fa-file" aria-hidden="true"></i>

-            </div>

-            <div class="button removeOnPhone" id="clearButton1475">Clear

-                <i class="fa fa-trash" aria-hidden="true"></i>

-            </div>

-        </div>

-

-        <div class="category">

-            <div class="button" id="saveButton1475">Save

-                <i class="fa fa-floppy-o" aria-hidden="true"></i>

-            </div>

-        </div>

-

-        <div class="category">

-            <div class="button select">Settings

-                <div class="toDisplay">

-                    <div class="option subSelect">Theme

-                        <i class="fa fa-chevron-right" aria-hidden="true"></i>

-                        <div class="toDisplaySub">

-                            <div class="option" id="darkTheme1475">Dark</div>

-                            <div class="option" id="lightTheme1475">Light</div>

-                        </div>

-                    </div>

-                    <div class="option subSelect">

-                        <span id="currentFontSize1475">Font: 14</span>

-                        <i class="fa fa-chevron-right" aria-hidden="true"></i>

-                        <div class="toDisplaySub">

-                            <div class="option" onclick="setFontSize(12);">12</div>

-                            <div class="option" onclick="setFontSize(14);">14</div>

-                            <div class="option" onclick="setFontSize(16);">16</div>

-                            <div class="option" onclick="setFontSize(18);">18</div>

-                            <div class="option" onclick="setFontSize(20);">20</div>

-                            <div class="option" onclick="setFontSize(22);">22</div>

-                        </div>

-                    </div>

-                    <div class="option" id='safemodeToggle1475'>Safe mode

-                        <i class="far fa-square" aria-hidden="true"></i>

-                    </div>

-                    <div class="option checked" id="editorButton1475">Editor

-                        <i class="fa fa-check-square" aria-hidden="true"></i>

-                    </div>

-                    <div class="option" id="fullscreenButton1475">Fullscreen</div>

-                    <div class="option" id="editorFullscreenButton1475">Editor Fullscreen</div>

-                    <div class="option" id="formatButton1475">Format code</div>

-                    <div class="option" id="minimapToggle1475">Minimap

-                        <i class="far fa-square" aria-hidden="true"></i>

-                    </div>

-                    <!-- <div class="option" id="debugButton1475">Inspector</div> -->

-                    <div class="option" id="metadataButton1475">Metadata</div>

-                    <div class="option subSelect">

-                        <span id="currentVersion1475">Vers. : Latest</span>

-                        <i class="fa fa-chevron-right" aria-hidden="true"></i>

-                        <div class="toDisplaySub">

-                            <div class="option" onclick="setVersion('latest');">Latest</div>

-                            <div class="option" onclick="setVersion('2.5');">2.5</div>

-                        </div>

-                    </div>

-                </div>

-            </div>

-        </div>

-

-        <div class="category right">

-            <div class="button select">

-                <span class="examplesButton">Examples</span>

-            </div>

-        </div>

-    </div>

-

-    <div class="navbar navBar1030">

-        <div class="category">

-            <div class="button run" id="runButton1030">Run

-                <i class="fa fa-play" aria-hidden="true"></i>

-            </div>

-        </div>

-

-

-        <div class="category">

-            <div class="button" id="newButton1030">New

-                <i class="fa fa-file" aria-hidden="true"></i>

-            </div>

-            <div class="button removeOnPhone" id="clearButton1030">Clear

-                <i class="fa fa-trash" aria-hidden="true"></i>

-            </div>

-        </div>

-

-        <div class="category">

-            <div class="button" id="saveButton1030">Save

-                <i class="fa fa-floppy-o" aria-hidden="true"></i>

-            </div>

-        </div>

-

-        <div class="category">

-            <div class="button select">Settings

-                <div class="toDisplay">

-                    <div class="option subSelect">Theme

-                        <i class="fa fa-chevron-right" aria-hidden="true"></i>

-                        <div class="toDisplaySub">

-                            <div class="option" id="darkTheme1030">Dark</div>

-                            <div class="option" id="lightTheme1030">Light</div>

-                        </div>

-                    </div>

-                    <div class="option subSelect">

-                        <span id="currentFontSize1030">Font: 14</span>

-                        <i class="fa fa-chevron-right" aria-hidden="true"></i>

-                        <div class="toDisplaySub">

-                            <div class="option" onclick="setFontSize(12);">12</div>

-                            <div class="option" onclick="setFontSize(14);">14</div>

-                            <div class="option" onclick="setFontSize(16);">16</div>

-                            <div class="option" onclick="setFontSize(18);">18</div>

-                            <div class="option" onclick="setFontSize(20);">20</div>

-                            <div class="option" onclick="setFontSize(22);">22</div>

-                        </div>

-                    </div>

-                    <div class="option" id="safemodeToggle1030">Safe mode

-                        <i class="far fa-square" aria-hidden="true"></i>

-                    </div>

-                    <div class="option checked" id="editorButton1030">Editor

-                        <i class="fa fa-check-square" aria-hidden="true"></i>

-                    </div>

-                    <div class="option" id="fullscreenButton1030">Fullscreen</div>

-                    <div class="option" id="editorFullscreenButton1030">Editor Fullscreen</div>

-                    <div class="option" id="formatButton1030">Format code</div>

-                    <div class="option" id="minimapToggle1030">Minimap

-                        <i class="far fa-square" aria-hidden="true"></i>

-                    </div>

-                    <!-- <div class="option" id="debugButton1030">Inspector</div> -->

-                    <div class="option" id="metadataButton1030">Metadata</div>

-                    <div class="option subSelect">

-                        <span id="currentVersion1030">Vers. : Latest</span>

-                        <i class="fa fa-chevron-right" aria-hidden="true"></i>

-                        <div class="toDisplaySub">

-                            <div class="option" onclick="setVersion('latest');">Latest</div>

-                            <div class="option" onclick="setVersion('2.5');">2.5</div>

-                        </div>

-                    </div>

-                </div>

-            </div>

-        </div>

-

-        <div class="category right">

-            <div class="button select">

-                <span class="examplesButton">Examples</span>

-            </div>

-        </div>

-    </div>

-

-    <div class="navbar navBar750">

-        <div class="category">

-            <div class="button select">File

-                <div class="toDisplay">

-                    <div class="option" id="runButton750">Run

-                        <i class="fa fa-play" aria-hidden="true"></i>

-                    </div>

-                    <div class="option" id="newButton750">New

-                        <i class="fa fa-file" aria-hidden="true"></i>

-                    </div>

-                    <div class="option" id="clearButton750">Clear

-                        <i class="fa fa-trash" aria-hidden="true"></i>

-                    </div>

-                    <div class="option" id="saveButton750">Save

-                        <i class="fa fa-floppy-o" aria-hidden="true"></i>

-                    </div>

-                </div>

-            </div>

-        </div>

-

-        <div class="category">

-            <div class="button select">Settings

-                <div class="toDisplay">

-                    <div class="option subSelect">Theme

-                        <i class="fa fa-chevron-right" aria-hidden="true"></i>

-                        <div class="toDisplaySub">

-                            <div class="option" id="darkTheme750">Dark</div>

-                            <div class="option" id="lightTheme750">Light</div>

-                        </div>

-                    </div>

-                    <div class="option subSelect">

-                        <span id="currentFontSize750">Font: 14</span>

-                        <i class="fa fa-chevron-right" aria-hidden="true"></i>

-                        <div class="toDisplaySub">

-                            <div class="option" onclick="setFontSize(12);">12</div>

-                            <div class="option" onclick="setFontSize(14);">14</div>

-                            <div class="option" onclick="setFontSize(16);">16</div>

-                            <div class="option" onclick="setFontSize(18);">18</div>

-                            <div class="option" onclick="setFontSize(20);">20</div>

-                            <div class="option" onclick="setFontSize(22);">22</div>

-                        </div>

-                    </div>

-                    <div class="option" id="safemodeToggle750">Safe mode

-                        <i class="far fa-square" aria-hidden="true"></i>

-                    </div>

-                    <div style="display:none;" class="option checked" id="editorButton750">Editor

-                        <i class="fa fa-check-square" aria-hidden="true"></i>

-                    </div>

-                    <div class="option" id="fullscreenButton750">Fullscreen</div>

-                    <div class="option" id="editorFullscreenButton750">Editor Fullscreen</div>

-                    <div class="option" id="formatButton750">Format code</div>

-                    <div class="option" id="minimapToggle750">Minimap

-                        <i class="far fa-square" aria-hidden="true"></i>

-                    </div>

-                    <!-- <div class="option" id="debugButton750">Inspector</div> -->

-                    <div class="option" id="metadataButton750">Metadata</div>

-                    <div class="option subSelect">

-                        <span id="currentVersion750">Vers. : Latest</span>

-                        <i class="fa fa-chevron-right" aria-hidden="true"></i>

-                        <div class="toDisplaySub">

-                            <div class="option" onclick="setVersion('latest');">Latest</div>

-                            <div class="option" onclick="setVersion('2.5');">2.5</div>

-                        </div>

-                    </div>

-                </div>

-            </div>

-        </div>

-

-        <div class="category right">

-            <div class="button select">

-                <span class="examplesButton">Examples</span>

-            </div>

-        </div>

-    </div>

-

-    <div class="wrapper">

-        <div id="jsEditor"></div>

-        <div id="canvasZone">

-            <canvas touch-action="none" id="renderCanvas"></canvas>

-        </div>

-    </div>

-    <div id="exampleList">

-        <div id="exampleBanner">

-            <h1>Examples</h1>

-        </div>

-        <div class="horizontalSeparator"></div>

-        <input id="filterBar" type="text" placeholder="Filter examples...">

-        <img id="filterBarClear"

-            src="https://d33wubrfki0l68.cloudfront.net/17ca450bae302631f4857cd8c3992234ec5dd9a7/057f9/img/ui/clear_button.png">

-    </div>

-

-    <span class="label" id="fpsLabel">FPS</span>

-

-    <div id="errorZone">

-    </div>

-

-    <div class="navbarBottom">

-        <div id="statusBar"></div>

-        <div class="links">

-            <div class='link'>

-                <a target='_new' href="https://www.netlify.com/">Deployed by Netlify</a>

-            </div>

-            <div class='link'>

-                <a target='_new' href="https://forum.babylonjs.com/">Forum</a>

-            </div>

-            <div class='link'>

-                <a target='_new' href="https://www.babylonjs.com/sandbox">Sandbox</a>

-            </div>

-            <div class='link'>

-                <a target='_new' href="https://doc.babylonjs.com">Documentation</a>

-            </div>

-            <div class='link'>

-                <a target='_new' href="https://doc.babylonjs.com/playground">Search</a>

-            </div>

-        </div>

-    </div>

-

-    <div id="saveLayer" class="save-layer">

-        <div class="save-form">

-            <label for="saveFormTitle">TITLE</label>

-            <div class="separator"></div>

-            <input type="text" maxlength="120" id="saveFormTitle" class="save-form-title">

-

-            <label for="saveFormDescription">DESCRIPTION</label>

-            <div class="separator"></div>

-            <textarea id="saveFormDescription" rows="4" cols="10"></textarea>

-

-            <label for="saveFormTags">TAGS (separated by comma)</label>

-            <div class="separator"></div>

-            <textarea id="saveFormTags" rows="4" cols="10"></textarea>

-

-            <div class="save-form-buttons" id="saveFormButtons">

-

-                <div id="saveFormButtonOk" class="button">OK</div>

-                <div id="saveFormButtonCancel" class="button">Cancel</div>

-            </div>

-        </div>

-    </div>

-

-    <div id="waitDiv">

-        <span id="waitTitle">Babylon.js Playground

-            <BR>

-            <BR>

-            <BR>

-        </span>

-        <div id="logo-part">

-            <img src="v4.svg" id="waitLogo" />

-            <img src="spinner.svg" id="waitSpinner" />

-        </div>

-    </div>

-

-    <script src="https://code.jquery.com/jquery.js"></script>

-    <script src="js/jquery.qrcode.js"></script>

-    <script src="js/qrcode.js"></script>

-

-    <script src="js/actions.js"></script>

-    <script src="js/pbt.js"></script>

-    

-    <script src="/dist/preview release/glslang/glslang.js"></script>

-

-    <script>

-        window.glslangOptions = { 

-            jsPath: "/dist/preview release/glslang/glslang.js",

-            wasmPath: "/dist/preview release/glslang/glslang.wasm"

-        };

-

-        BABYLONDEVTOOLS.Loader

-            .loadCoreOnly()

-            .require('node_modules/monaco-editor/min/vs/loader.js')

-            .require('js/indexWebGPU.js')

-            .load(function() {

-                BABYLON.DracoCompression.Configuration.decoder = {

-                    wasmUrl: "../dist/preview%20release/draco_wasm_wrapper_gltf.js",

-                    wasmBinaryUrl: "../dist/preview%20release/draco_decoder_gltf.wasm",

-                    fallbackUrl: "../dist/preview%20release/draco_decoder_gltf.js"

-                };

-            });

-    </script>

-</body>

-

-</html>

+ 12 - 46
src/Engines/webgpuEngine.ts
View File 

@@ -150,7 +150,6 @@ export class WebGPUEngine extends Engine {
 
     private _currentIndexBuffer: Nullable<DataBuffer> = null;

     private __colorWrite = true;

     private _uniformsBuffers: { [name: string]: WebGPUDataBuffer } = {};

-    private _maxBufferChunk = 1024 * 1024 * 15;

 

     // Caches

     private _compiledShaders: { [key: string]: {

@@ -262,8 +261,7 @@ export class WebGPUEngine extends Engine {
 
             .then(() => {

                 this._initializeLimits();

                 this._initializeContextAndSwapChain();

-                // this._initializeMainAttachments();

-                // Initialization is in the resize :-)

+                this._initializeMainAttachments();

                 this.resize();

             })

             .catch((e: any) => {

@@ -515,27 +513,18 @@ export class WebGPUEngine extends Engine {
 
     //                              WebGPU Buffers

     //------------------------------------------------------------------------------

     private _createBuffer(view: ArrayBufferView, flags: GPUBufferUsageFlags): DataBuffer {

-        if (view.byteLength == 0) {

-            throw new Error("Unable to create WebGPU buffer: cannot create zero-sized buffer"); // Zero size buffer would kill the tab in chrome

-        }

         const padding = view.byteLength % 4;

-        const mappedAtCreation: boolean = padding == 0 && view.byteLength < this._maxBufferChunk;

         const verticesBufferDescriptor = {

             size: view.byteLength + padding,

-            usage: flags,

-            mappedAtCreation

+            usage: flags

         };

-       const buffer = this._device.createBuffer(verticesBufferDescriptor);

+        const buffer = this._device.createBuffer(verticesBufferDescriptor);

         const dataBuffer = new WebGPUDataBuffer(buffer);

         dataBuffer.references = 1;

         dataBuffer.capacity = view.byteLength;

-        if (mappedAtCreation) {

-            const range = buffer.getMappedRange();

-            new Uint8Array(range).set(new Uint8Array(view.buffer, view.byteOffset, view.byteLength));

-            buffer.unmap();

-        } else {

-            this._setSubData(dataBuffer, 0, view);

-        }

+

+        this._setSubData(dataBuffer, 0, view);

+

         return dataBuffer;

     }

 

@@ -546,7 +535,6 @@ export class WebGPUEngine extends Engine {
 
         byteLength = Math.min(byteLength, dataBuffer.capacity - dstByteOffset);

 

         // After Migration to Canary

-        // This would do from PR #261

         let chunkStart = src.byteOffset + srcByteOffset;

         let chunkEnd = chunkStart + byteLength;

 

@@ -565,36 +553,14 @@ export class WebGPUEngine extends Engine {
 
         }

 

         // Chunk

-        const commandEncoder = this._device.createCommandEncoder();

-        if (byteLength - srcByteOffset < 1) {

-            throw new Error("Cannot create zero-sized buffer"); // 0 size buffer would kill the tab in chrome

+        const maxChunk = 1024 * 1024 * 15;

+        let offset = 0;

+        while ((chunkEnd - (chunkStart + offset)) > maxChunk) {

+            this._device.defaultQueue.writeBuffer(buffer, dstByteOffset + offset, src.buffer, chunkStart + offset, maxChunk);

+            offset += maxChunk;

         }

-        const uploadBuffer = this._device.createBuffer({

-            usage: WebGPUConstants.GPUBufferUsage_COPY_SRC | WebGPUConstants.GPUBufferUsage_MAP_WRITE,

-            size: byteLength - srcByteOffset

-        });

-

-        (async() => {

-            try {

-                for (let offset = 0; offset < byteLength; offset += this._maxBufferChunk) {

-                    const uploadCount = Math.min(byteLength - offset, this._maxBufferChunk);

-                    await uploadBuffer.mapAsync(WebGPUConstants.GPUMapMode_WRITE, offset, uploadCount);

-                    const uploadMapping = uploadBuffer.getMappedRange();

 

-                    new Uint8Array(uploadMapping).set(new Uint8Array(src.buffer, srcByteOffset + offset, uploadCount));

-                    uploadBuffer.unmap();

-                }

-                commandEncoder.copyBufferToBuffer(

-                    uploadBuffer, 0,

-                    buffer, dstByteOffset,

-                    byteLength);

-                this._device.defaultQueue.submit([commandEncoder.finish()]);

-            } catch (e) {

-                Logger.Error(e);

-            } finally {

-                uploadBuffer.destroy();

-            }

-        })();

+        this._device.defaultQueue.writeBuffer(buffer, dstByteOffset + offset, src.buffer, chunkStart + offset, byteLength - offset);

     }

 

     //------------------------------------------------------------------------------