回复:[cesium-dev] Re: how transport a picture to postProcessStage

do i need bind texture created by webgl to a textureUint? what’ the max number of textureUnit used by cesium?

It’s hard to tell here without seeing your full code. Have you already successfully rendered the scene to a texture? Can you show the code for that?

By the way ,are gl_FragCoord.z and gl_FragCoord.w in postProcessStage the same as raw WebGL ?

It should be, yes.

a lot of errors from consolo,like below

WebGL: INVALID_ENUM: bindTexture: invalid target

[.WebGL-11FFF320]RENDER WARNING: there is no texture bound to the unit 0

and it seems render to srceen when I use ”viewer.scene.render()“ after “gl.bindFramebuffer(gl.FRAMEBUFFER, fbo)”

these are my code ,but it seems not work properly.

//store current camera status

var curCameraPos = viewer.scene.camera.positionWC;

var curCameraDir = viewer.scene.camera.direction;

var curCameraUp = viewer.scene.camera.up;

//camera go to light postion

viewer.scene.camera.position = visibleStartPoint;

viewer.scene.camera.direction = new Cesium.Cartesian3(endPoint.x - visibleStartPoint.x, endPoint.y - visibleStartPoint.y, endPoint.z - visibleStartPoint.z)

//record lightView Matrix;

var lightViewMatrix = viewer.scene.camera.viewMatrix;

// Get the rendering context for WebGL

var gl = viewer.canvas.getContext(“webgl”)

viewer.canvas.getContext(“experimental-webgl”);

var OFFSCREEN_WIDTH = 2048, OFFSCREEN_HEIGHT = 2048;

gl.activeTexture(gl.TEXTURE0);

//create frameBufferObject

var fbo = initFramebufferObject(gl, OFFSCREEN_WIDTH,OFFSCREEN_HEIGHT);

gl.bindFramebuffer(gl.FRAMEBUFFER, fbo); // Change the drawing destination to FBO

gl.viewport(0, 0, OFFSCREEN_HEIGHT, OFFSCREEN_HEIGHT); // Set view port for FBO

gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT); // Clear FBO

//render to fbo

viewer.scene.render();

// Change the drawing destination to color buffer

gl.bindFramebuffer(gl.FRAMEBUFFER, null);

gl.viewport(0, 0, viewer.canvas.width, viewer.canvas.height);

gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT); // Clear

//restore camera postion

viewer.scene.camera.position = curCameraPos;

viewer.scene.camera.direction = curCameraDir;

viewer.scene.render();//

//then I add texture of fbo to postProcessStage

viewer.scene.postProcessStages.add(new Cesium.PostProcessStage({

fragmentShader: FSHADER_SOURCE,

uniforms: {

u_ShadowMap: fbo.texture}

});

I think you might need to dig around in the source to see some examples of this. I think you need to initialize a Texture object:

https://github.com/AnalyticalGraphicsInc/cesium/blob/master/Source/Renderer/Texture.js

Or possible just use the createUniform function to wrap it:

https://github.com/AnalyticalGraphicsInc/cesium/blob/master/Source/Renderer/createUniform.js

You might also find this series helpful for context in understanding Cesium’s rendering engine and where to look in the source code:

And more blogs on that:

https://cesium.com/blog/categories/webgl/

Is there some example code for rendering to FBO, I am still blocked here

I think Rayman’s blog post here talks a bit about it, and there’s a link to his app’s source code that might be helpful:

https://cesium.com/blog/2019/04/29/gpu-powered-wind/