shawn0326 / zen-3d

JavaScript 3D library.
MIT License
196 stars 24 forks source link

A bit confused about the readme #13

Closed VanderSP closed 3 years ago

VanderSP commented 3 years ago

Hi! how are you?

Thanks for the hard work! I see that you updated readme... i can´t remember the cube example before... but i´ve feel intrigued with somepoints:

1 - why webgl2? it have some fallback to 1 if not available? so it´s better to always initialize this way?

2 - what´s webglcore?? i never seen that!

3 - why stencil true, why rendertargetback, what all those

scene.updateMatrix();
scene.updateLights();
glCore.renderTarget.setRenderTarget(backRenderTarget);
glCore.clear(true, true, false);

does in render loop? i never used that... i would be happy if i understand more...

shawn0326 commented 3 years ago

why webgl2? it have some fallback to 1 if not available? so it´s better to always initialize this way?

The better way is try to use webgl2 (so that zen3d can use more webgl features, like VAO etc). On the other hand, zen3d also provides the fallback to webgl1.

so you can initalize like this:

var gl = canvas.getContext("webgl2", contextParams) || canvas.getContext("webgl", contextParams);
var glCore = new zen3d.WebGLCore(gl);

zen3d.Renderer is also initialized like this.

VanderSP commented 3 years ago

strangely, i tried now, like this

const options = { antialias: false }

    const gl =
        this.worldCanvas.getContext('webgl2', options) ||
        this.worldCanvas.getContext('webgl', options)
    this.worldRenderer = new zen3d.WebGLCore(gl)

but the problem is that now, i can´t access this

this.worldRenderer.backRenderTarget.resize like i did before...

if i see in the readme i get confused because seems you manage backrendertarget differently lol!

sorry my noooooobness

shawn0326 commented 3 years ago

As for question 2 and question 3, it involves the main difference between zen3d and some other webgl rendering libraries, like three.js.

In three.js, renderer.render provides all the rendering functions and hides enough details. But it also brings some problems. When the rendering process is more complicated (or deferred rendering), the performance of repeatedly calling renderer.render becomes very low.

zen3d attempts to decompose renderer.render into individual steps:

  1. Update scene and get renderlist.
scene.updateMatrix(); // update matrix
scene.updateLights(); // update lights
scene.updateRenderList(camera); // update render list
var renderList = scene.getRenderList(camera); // get render list
  1. Set render target and clear(if needed).
glCore.renderTarget.setRenderTarget(renderTarget); // set render target
glCore.clear(true, true, true); // clear
  1. Render:
// render opaque objects
glCore.renderPass(renderList.opaque, camera, {
    scene: scene,
    getMaterial: function(renderable) {
        return scene.overrideMaterial || renderable.material;
    }
});
// render transparent objects
glCore.renderPass(renderList.transparent, camera, {
    scene: scene,
    getMaterial: function(renderable) {
        return scene.overrideMaterial || renderable.material;
    }
});

or use a simple way if you do not need to modify the default rendering configuration:

glCore.render(scene, camera, false); // 'false' means don't need to call scene.updateRenderList because we just did this. 

By doing this, it is easier to implement efficient forward renderers, deferred renderers and even VR renderers. Since the rendering steps are fully decoupled, it is possible to avoid repeating certain logic in the complex rendering process. (like updateRenderList, update matrix etc).

See ForwardRenderer DeferredRenderer XRRenderer.

After all, if you don't need to modify the default rendering process, using zen3d.Renderer is also a good choice.

shawn0326 commented 3 years ago

but the problem is that now, i can´t access this this.worldRenderer.backRenderTarget.resize like i did before...

If you are not using zen3d.Renderer, you need create backRenderTarget by yourself.

var backRenderTarget = new zen3d.RenderTargetBack(canvas);
VanderSP commented 3 years ago

well i will read everything, thanks for the info!!!

EDIT: i think i understand that... deferred only means more performance when used more than 1 direct light, and more yet if it´s moving light... or i can have some other benefit using the simpler Renderer approach?