Initial work to make renderers serializable, and viewable in the ParametersView

Author: jsantell

src/app/ContentBridge.js

@@ -9,17 +9,19 @@ const $log = Symbol('log');
 const $eval = Symbol('eval');
 const $dispatchToContent = Symbol('dispatchToContent');
 const $renderers = Symbol('renderers');
+const $renderingInfo = Symbol('renderingInfo');
 
 const VERBOSE_CONTENT_BRIDGE = false;
 
 export default class ContentBridge extends EventTarget {
   /**
    * Events:
    * 'load'
-   * 'entity-update' { object, uuid }
+   * 'entity-update' { entity, uuid }
    * 'scene-graph-update' { uuid, graph }
    * 'overview-update' { type, entities }
-   * 'renderer-update' {}
+   * 'rendering-info-update' {}
+   * 'renderer-update' { renderer, id }
    */
   constructor() {
     super();
@@ -28,6 +30,7 @@ export default class ContentBridge extends EventTarget {
     this[$overviews] = new Map();
     this[$sceneGraphs] = new Map();
     this[$renderers] = new Map();
+    this[$renderingInfo] = new Map();
 
     this.port = browser.runtime.connect({
       name: 'three-devtools',
@@ -74,8 +77,11 @@ export default class ContentBridge extends EventTarget {
     while (uuids.length) {
       const uuid = uuids.shift();
       const entity = this.getEntity(uuid);
-      if (entity && !data[entity.uuid]) {
-        data[entity.uuid] = entity;
+      // In renderers case, uuid is an id.
+      // @TODO should probably abstract away the differences
+      // between UUID and synthesized renderer ids.
+      if (entity && !data[uuid]) {
+        data[uuid] = entity;
 
         // entities can have several dependencies, like textures on materials,
         // or a Mesh's geometry
@@ -90,6 +96,10 @@ export default class ContentBridge extends EventTarget {
     return data;
   }
 
+  getRenderingInfo(uuid) {
+    return this[$renderingInfo].get(uuid);
+  }
+
   getResourcesOverview(type) {
     return this[$overviews].get(type);
   }
@@ -132,6 +142,10 @@ export default class ContentBridge extends EventTarget {
     this[$dispatchToContent]('_request-scene-graph', { uuid });
   }
 
+  requestRenderingInfo(uuid) {
+    this[$dispatchToContent]('_request-rendering-info', { uuid });
+  }
+
   select(uuid) {
     if (!uuid) {
       return;
@@ -158,6 +172,7 @@ export default class ContentBridge extends EventTarget {
         this[$overviews].clear();
         this[$sceneGraphs].clear();
         this[$renderers].clear();
+        this[$renderingInfo].clear();
 
         this[$eval](injection);
         this.dispatchEvent(new CustomEvent('load'));
@@ -187,11 +202,20 @@ export default class ContentBridge extends EventTarget {
           },
         }));
         break;
+      case 'rendering-info':
+        this.dispatchEvent(new CustomEvent('rendering-info-update', {
+          detail: data,
+        }));
+        this[$renderingInfo].set(data.id, data);
+        break;
       case 'entity':
         if (data.type === 'renderer') {
           this[$renderers].set(data.id, data);
           this.dispatchEvent(new CustomEvent('renderer-update', {
-            detail: data,
+            detail: {
+              renderer: data,
+              id: data.id,
+            },
           }));
         } else if (Array.isArray(data)) {
           for (let entity of data) {

src/app/data/renderers.js

@@ -0,0 +1,239 @@
+const PBR = {
+  name: 'Physically-based Rendering',
+  type: 'group',
+  props: [{
+    name: 'Physically Correct Lights',
+    prop: 'physicallyCorrectLights',
+    type: 'boolean',
+    default: false,
+  }, {
+    name: 'Gamma',
+    prop: 'gammaFactor',
+    type: 'number',
+    default: 2,
+  }, {
+    // @TODO
+    name: 'Output Encoding',
+    prop: 'outputEncoding',
+    type: 'enum'
+  }]
+};
+
+const ToneMapping = {
+  name: 'Tone Mapping',
+  type: 'group',
+  props: [{
+    // @TODO
+    name: 'Type',
+    prop: 'toneMapping',
+    type: 'enum',
+  }, {
+    name: 'Exposure',
+    prop: 'toneMappingExposure',
+    type: 'number',
+    default: 1,
+  }],
+};
+
+const ShadowMap = {
+  name: 'Shadow Map',
+  type: 'group',
+  props: [{
+    name: 'Enabled',
+    prop: 'shadowMap.enabled',
+    type: 'boolean',
+    default: false,
+  }, {
+    name: 'Auto Update',
+    prop: 'shadowMap.autoUpdate',
+    type: 'boolean',
+    default: true,
+  }, {
+    // @TODO enum 
+    name: 'Shadow Type',
+    prop: 'shadowMap.type',
+    type: 'enum'
+  }],
+};
+
+const BufferClearing = {
+  name: 'Buffer Clearing',
+  type: 'group',
+  props: [{
+    name: 'Auto Clear',
+    prop: 'autoClear',
+    type: 'boolean',
+    default: true,
+  }, {
+    name: 'Auto Clear Color',
+    prop: 'autoClearColor',
+    type: 'boolean',
+    default: true,
+  }, {
+    name: 'Auto Clear Depth',
+    prop: 'autoClearDepth',
+    type: 'boolean',
+    default: true,
+  }, {
+    name: 'Auto Clear Stencil',
+    prop: 'autoClearStencil',
+    type: 'boolean',
+    default: true,
+  }]
+};
+
+
+// Does not have a further classification yet
+const Capabilities = {
+  name: 'Capabilities',
+  type: 'group',
+  props: [{
+    name: 'WebGL2',
+    prop: 'capabilities.isWebGL2',
+    type: 'boolean',
+    readonly: true,
+  }, {
+    name: 'Precision',
+    prop: 'capabilities.precision',
+    type: 'string',
+    readonly: true,
+  }, {
+    name: 'Float Fragment Textures',
+    prop: 'capabilities.floatFragmentTextures',
+    type: 'boolean',
+    readonly: true,
+  }, {
+    name: 'Float Vertex Textures',
+    prop: 'capabilities.floatVertexTextures',
+    type: 'boolean',
+    readonly: true,
+  }, {
+    name: 'Logarithmic Depth Buffer',
+    prop: 'capabilities.logarithmicDepthBuffer',
+    type: 'boolean',
+    readonly: true,
+  }, {
+    name: 'Max Anisotropy',
+    prop: 'capabilities.maxAnisotropy',
+    type: 'number',
+    readonly: true,
+  }, {
+    name: 'Max Precision',
+    prop: 'capabilities.maxPrecision',
+    type: 'string',
+    readonly: true,
+  }, {
+    name: 'Max Attributes',
+    prop: 'capabilities.maxAttributes',
+    type: 'int',
+    readonly: true,
+  }, {
+    name: 'Max Cubemap Size',
+    prop: 'capabilities.maxCubemapSize',
+    type: 'int',
+    readonly: true,
+  }, {
+    name: 'Max Fragment Uniforms',
+    prop: 'capabilities.maxFragmentUniforms',
+    type: 'int',
+    readonly: true,
+  }, {
+    name: 'Max Texture Size',
+    prop: 'capabilities.maxTextureSize',
+    type: 'int',
+    readonly: true,
+  }, {
+    name: 'Max Textures',
+    prop: 'capabilities.maxTextures',
+    type: 'int',
+    readonly: true,
+  }, {
+    name: 'Max Varyings',
+    prop: 'capabilities.maxVaryings',
+    type: 'int',
+    readonly: true,
+  }, {
+    name: 'Max Vertex Textures',
+    prop: 'capabilities.maxVertexTextures',
+    type: 'int',
+    readonly: true,
+  }, {
+    name: 'Max Vertex Uniforms',
+    prop: 'capabilities.maxVertexUniforms',
+    type: 'int',
+    readonly: true,
+  }, {
+    name: 'Vertex Textures',
+    prop: 'capabilities.vertexTextures',
+    type: 'boolean',
+    readonly: true,
+  }]
+};
+
+// @TODO clippingPlanes
+const Clipping = {
+  name: 'Clipping',
+  type: 'group',
+  props: [{
+    name: 'Local Clipping',
+    prop: 'localClippingEnabled',
+    type: 'boolean',
+    default: false,
+  }],
+};
+
+const Scene = {
+  name: 'Scene',
+  type: 'group',
+  props: [{
+    name: 'Sort Objects',
+    prop: 'sortObjects',
+    type: 'boolean',
+    default: true,
+  }],
+};
+
+const MorphLimits = {
+  name: 'Morph Limits',
+  type: 'group',
+  props: [{
+    name: 'Max Morph Targets',
+    prop: 'maxMorphTargets',
+    type: 'int',
+    default: 8,
+    min: 0,
+    max: 8,
+  }, {
+    name: 'Max Morph Normals',
+    prop: 'maxMorphNormals',
+    type: 'int',
+    default: 4,
+    min: 0,
+    max: 4,
+  }],
+};
+
+const WebGLRenderer = {
+  type: 'renderer',
+  props: [
+  {
+    name: 'Check Shader Errors',
+    prop: 'debug.checkShaderErrors',
+    type: 'boolean',
+    default: true,
+  },
+    PBR,
+    ToneMapping,
+    ShadowMap,
+    BufferClearing,
+    Capabilities,
+    Clipping,
+    Scene,
+    MorphLimits,
+  ],
+};
+
+export default {
+  WebGLRenderer: WebGLRenderer,
+  WebGL1Renderer: WebGLRenderer,
+};