Editor: Added REALISTIC shading support for video rendering

[ycw]

video.rendering.+.realistic.shading.mp4

Preview: https://raw.githack.com/ycw/three.js/editor-render-video-with-realistic-shading/editor/index.html

Demo project: (File>Open) project (1).json

[mrdoob]

Hmm, is there a way of not modifying app.js?

[ycw]

extends it instead?

App.Player < App.RenderingPlayer

[mrdoob]

That'd be better 👌

[ycw]

extends it instead ?

That'd be better 👌

Player methods were all bound to instance, so RenderingPlayer eventually mixins them instead of extends;

Details:

• Player exposes renderer,scene,camera,dispatch,events
• RenderingPlayer overrides render,start,stop
• RenderingPlayer.render() accepts shadingType and maxSamples;
  • Returns Promise; resolves when a frame completed rendering.
  • shadingType either 'solid' or 'realistic'
  • maxSamples samples for that frame; This param is ignored when shadingType isn't 'realistic'.

Suggestions:

• Renames app.js to players.js:

editor/
  js/
    libs/
      players.js  # export { AppPlayer, RenderingPlayer }
    Sidebar.Project.App.js   # import { AppPlayer } from './libs/players.js'
    Sidebar.Project.Video.js  # import { RenderingPlayer } from './libs/players.js'

[mrdoob]

Have you tried doing:

Player: function ( renderer = null ) {

    if ( renderer === null ) renderer = new THREE.WebGLRenderer( { antialias: true } );

}

That way we can do new Player( new PathTracingRenderer() ) and we should be able to keep the current untouched?

[mrdoob]

Or maybe just adding a setRenderer() method to Player?

[ycw]

Do you mean that using single Player to handle both playing app and rendering video? or, Using two players, and make them both accept a custom renderer?

[mrdoob]

Trying to look for ways to implement this while modifying the current code as less are possible.

[ycw]

#28517 (Added setPathTracer() to Player)

[Mugen87]

Closing since the modifications to app.js are too extensive. Let's revisit this issue if there are more demands in realistic shading support for video rendering.