Skip to content

Latest commit

 

History

History
72 lines (58 loc) · 5.78 KB

build.md

File metadata and controls

72 lines (58 loc) · 5.78 KB
Raw

SpectorJS

How to build and use locally

Like any simple typescript repository everything start with.

git clone https://github.com/BabylonJS/Spector.js.git
cd spector
npm install

Then you can use the following npm commands to speed your development:

  1. npm start Will compile and run a local server with a watch command so that you can directly try your changes (TS or scss). Navigate to the the embedded sample to start playing with the dev tools.
  2. npm run build Will create and build a new version of the dist folder files.
  3. npm run clean Will clean all the generated files from the repo.

If you are looking for the temporary generated .js or .map files, they are all available in the built folder which is not under source control.

I would recommend developping on VsCode as the entire setup is present so that if you install the chrome debugger extension you can directly debug from your typescript files by pressing F5.

As Tslint is part of the build checks, please run it locally before any PR. The easiest is to install the TsLint plugin in VsCode. npm run build:tslint

Available Samples

Once npm start has been launched, you can access the following samples to try your new features:

Error Handling

  1. Exception: Test of exception during capture.
  2. No Render: Test to capture if no frame are detected.
  3. No command: Simple use case containing a frame with no webgl commands.

Valid Use Cases

  1. Simple: A basic use case validating state changes.
  2. Lights: Simple BabylonJS scene with three lights.
  3. Texture 2d: BabylonJS scene containing materials with texture.
  4. Texture cube: BabylonJS scene containing a cube texture.
  5. Render Target Texture: Test to do a capture containing render target textures.
  6. Float Render Target Texture: Test to do a capture containing float render target textures.
  7. MSAA Render Buffer: Test to do a capture containing an msaa render buffer.
  8. Buffer View Texture: Test to do a capture containing a cube texture created from bufferview data.
  9. Instanced: Test to do a capture of instanced objects.
  10. Float sized FrameBuffer: Test to do a capture containing a none integer based sized FrameBuffer.
  11. Uniform Command: Test to do a capture a uniform with a value matching a webgl constant.
  12. Custom Metadata: Test to do a capture containing custom metadata.
  13. Custom Marker: Test to do a capture containing custom marker.
  14. Custom Shader Name in define SHADER_NAME: Test to do a capture containing custom marker.
  15. Uniform Array: Test to do a capture containing uniform array values.
  16. Quick Capture: Test to do a quick capture not containing visual states.
  17. Depth Range: Test redundant depth range states.
  18. setTimeout Parameters: Test parameters of setTimeout functions.
  19. Viewport: Test viewport capture in Render Targets.
  20. Offscreen: Test Offscreen canvas support.
  21. Scissor Clear: Test scissor redundant calls when clearing.
  22. Custom Log: Test the custom log functionnality.
  23. Pixelated Nearest: Test visual texture capture being pixelated on nearest.

You can also add &noSpy=1 at the end of the previous Urls to test without enabling the full spy before starting your rendering engine.

Add more samples

To add a new sample, simply add a new script in the sample/js folder. To launch it you can use the following url by replacing the fileName by your new file name without the .js extension.

http://localhost:1337/sample/index.html?sample=fileName

Extension

As stated on the extension documentation, you can side load the extension. The main use cases to try out to test the captures are: