<div dir="ltr"><div>Hi everyone,</div><div><br></div><div><br></div><div>> JSON is a built-in JavaScript object. This works out of the box: the parse method simply creates a valid JS object from a JSON string.</div><div>> The resulting object tree however still has to be traversed to attach meaning and behavior.</div><div><br></div><div>Exactly: the way the engine chooses to render the scenegraph is up to it, the JSON data is only meant to initialize the scenegraph in the 3D engine (and optionally export its state at a given moment if needed).</div><div><br></div><div><br></div><div>Which is actually why it would feel redundant to have prototypes inside JSON if you use it in for Javascript because in real life I'd use real JS modules if I need a custom object type with properties and methods (CommonJS, AMD, ES6 modules, typescript modules, factories or whatever the author prefers) because:</div><div> - it's the same scripting language as the rest of the application</div><div> - it can be optimized with the rest of the application</div><div> - it can be tested with the rest of the application</div><div> - it can refer to and interact with non-3D modules (e.g. a thirdparty library for formatting Date timestamps)</div><div> - no eval()</div><div><br></div><div><br></div><div>My goals for a scenegraph format are:</div><div> - lightweight to parse</div><div> - meaningful and low complexity because it's simpler to think with, easier to read, easier to diff between two states, and easier to sync between devices</div><div> - easy to require(), to use the same package management as the rest of the application code and assets</div><div><br></div><div>However I'm fine not having feature parity with XML if it keeps it lightweight and straightforward, so this is more a VRML/X3D-inspired format, not "real X3D".</div><div><br></div><div><br></div><div>Example (the "_type" is omitted in some nodes because I also have a concept of "Default type" for some fields, e.g. how most of the time the value in "Shape.appearance.material" is a Material node):</div><div><br></div><div><span class="" style="white-space:pre">        </span>[</div><div><span class="" style="white-space:pre">          </span>{</div><div><span class="" style="white-space:pre">                  </span>"_type": "Shape",</div><div><span class="" style="white-space:pre">                      </span>"appearance": {</div><div><span class="" style="white-space:pre">                          </span>"material": {</div><div><span class="" style="white-space:pre">                                    </span>"transparency": 0.5,</div><div><span class="" style="white-space:pre">                                     </span>"diffuseColor": [0.8, 1, 0.8]</div><div><span class="" style="white-space:pre">                            </span>}</div><div><span class="" style="white-space:pre">                  </span>},</div><div><span class="" style="white-space:pre">                 </span>"geometry": {</div><div><span class="" style="white-space:pre">                            </span>"_type": 'Box',</div><div><span class="" style="white-space:pre">                          </span>"size": [2, 1, 2]</div><div><span class="" style="white-space:pre">                        </span>}</div><div><span class="" style="white-space:pre">          </span>},</div><div><span class="" style="white-space:pre">         </span>{</div><div><span class="" style="white-space:pre">                  </span>"_type": "MyCustomObjectType",</div><div><span class="" style="white-space:pre">                 </span>"translation": [0, 0, 1],</div><div><span class="" style="white-space:pre">                        </span>"scale": [2, 2, 2]</div><div><span class="" style="white-space:pre">               </span>}</div><div><span class="" style="white-space:pre">  </span>]</div><div><br></div><div>And an example (without messaging or engine-specific code) of one of many ways to create something similar to Protos:</div><div><br></div><div><span class="" style="white-space:pre">    </span>var MyCustomObjectType = function(data){</div><div><span class="" style="white-space:pre">           </span>'use strict';</div><div><span class="" style="white-space:pre">              </span>var _data = data || {};</div><div><span class="" style="white-space:pre">            </span>var _json = {</div><div><span class="" style="white-space:pre">                      </span>_type: 'Transform',</div><div><span class="" style="white-space:pre">                        </span>translation: _data.translation || [0, 0, 0],</div><div><span class="" style="white-space:pre">                       </span>scale: _data.scale || [1, 1, 1],</div><div><span class="" style="white-space:pre">                   </span>children: [</div><div><span class="" style="white-space:pre">                                </span>{</div><div><span class="" style="white-space:pre">                                  </span>_type: 'Shape',</div><div><span class="" style="white-space:pre">                                    </span>appearance: {</div><div><span class="" style="white-space:pre">                                              </span>material: {</div><div><span class="" style="white-space:pre">                                                        </span>transparency: 0.5,</div><div><span class="" style="white-space:pre">                                                 </span>diffuseColor: [0.8, 1, 0.8]</div><div><span class="" style="white-space:pre">                                                </span>}</div><div><span class="" style="white-space:pre">                                  </span>},</div><div><span class="" style="white-space:pre">                                 </span>geometry: {</div><div><span class="" style="white-space:pre">                                                </span>_type: 'Sphere',</div><div><span class="" style="white-space:pre">                                           </span>radius: 5</div><div><span class="" style="white-space:pre">                                  </span>}</div><div><span class="" style="white-space:pre">                          </span>}</div><div><span class="" style="white-space:pre">                  </span>]</div><div><span class="" style="white-space:pre">          </span>};</div><div><span class="" style="white-space:pre">         </span>Object.defineProperty(</div><div><span class="" style="white-space:pre">                     </span>this,</div><div><span class="" style="white-space:pre">                      </span>'json',</div><div><span class="" style="white-space:pre">                    </span>{</div><div><span class="" style="white-space:pre">                          </span>configurable: false,</div><div><span class="" style="white-space:pre">                               </span>enumerable: true,</div><div><span class="" style="white-space:pre">                          </span>writable: false,</div><div><span class="" style="white-space:pre">                           </span>value: function(){</div><div><span class="" style="white-space:pre">                                 </span>return _json;</div><div><span class="" style="white-space:pre">                              </span>}</div><div><span class="" style="white-space:pre">                  </span>}</div><div><span class="" style="white-space:pre">          </span>);</div><div><span class="" style="white-space:pre"> </span>};</div><div><br></div><div><span class="" style="white-space:pre">        </span>MyCustomObjectType.prototype.modifySomething = function(){</div><div><span class="" style="white-space:pre">         </span>'use strict';</div><div><span class="" style="white-space:pre">              </span>//</div><div><span class="" style="white-space:pre">         </span>//</div><div><span class="" style="white-space:pre"> </span>};</div><div><br></div><div><span class="" style="white-space:pre">        </span>module.exports = MyCustomObjectType;</div><div><br></div><div><br></div><div>See you,</div><div>Cecile</div></div>