Closed VanderSP closed 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.
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
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:
scene.updateMatrix(); // update matrix
scene.updateLights(); // update lights
scene.updateRenderList(camera); // update render list
var renderList = scene.getRenderList(camera); // get render list
glCore.renderTarget.setRenderTarget(renderTarget); // set render target
glCore.clear(true, true, true); // clear
// 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.
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);
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?
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
does in render loop? i never used that... i would be happy if i understand more...