how transport a picture to postProcessStage

167 views
Skip to first unread message

7737...@qq.com

unread,
Dec 9, 2018, 12:23:27 AM12/9/18
to cesium-dev
hi,friend, I want to Transport a picture to uniform sample2D pic in postProcessStage ,now i have rgb array or jpg in textureUnit1


Omar Shehata

unread,
Dec 11, 2018, 2:30:50 PM12/11/18
to cesium-dev
You can pass in a uniforms object, see the docs:


For example, I modified the post process Sandcastle here to add another texture:


So instead of:

viewer.scene.postProcessStages.add(new Cesium.PostProcessStage({
    fragmentShader : fragmentShaderSource
}));



I had:

viewer.scene.postProcessStages.add(new Cesium.PostProcessStage({
    fragmentShader : fragmentShaderSource,
    uniforms : {
        customTexture : '../images/bumpmap.png'
    }
}));

You can then access this in the shader by declaring the uniform:

uniform sampler2D customTexture;

Does that help?

noble

unread,
Dec 11, 2018, 9:10:07 PM12/11/18
to cesium-dev
oh, actually, I plan to render the scene to in a textureUnit in  my frameBufferObj,then i want transport the texture to postprocessStage . then ,how to define the custom value. 

viewer.scene.postProcessStages.add(new Cesium.PostProcessStage({
    fragmentShader : fragmentShaderSource,
    uniforms : {
        customTexture : here,what's the value.
    }
}));

------------------ 原始邮件 ------------------
发件人: "Omar Shehata"<omar.same...@gmail.com>;
发送时间: 2018年12月12日(星期三) 凌晨3:30
收件人: "cesium-dev"<cesiu...@googlegroups.com>;
主题: [cesium-dev] Re: how transport a picture to postProcessStage
--
You received this message because you are subscribed to a topic in the Google Groups "cesium-dev" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/cesium-dev/9yJ-rkWf5d4/unsubscribe.
To unsubscribe from this group and all its topics, send an email to cesium-dev+...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

noble

unread,
Dec 11, 2018, 9:54:59 PM12/11/18
to cesium-dev
or the way below will work?

my fuction(){
1.render scene, add postProcessStage1 
2.camera fly to some place,
3.add postProcessStage2. and postProcessStage2
 
}
 The default input sampler2D uniforms ( colorTexture and depthTexture)  of postProcessStage2  can be postProcessStage1 output.
or it is  the same as postProcessStage1 input colorTexture .

Omar Shehata

unread,
Dec 12, 2018, 11:27:07 AM12/12/18
to cesium-dev
Yeah all you have to do is just add a second post process stage. The output from the last one will be the colorTexture. So for example, these two:

var fragmentShaderSource = `
uniform sampler2D colorTexture; 
varying vec2 v_textureCoordinates; 
void main(void) 
    
    gl_FragColor = texture2D(colorTexture, v_textureCoordinates); 
    gl_FragColor.r = gl_FragColor.g;
}`

viewer.scene.postProcessStages.add(new Cesium.PostProcessStage({
    fragmentShader : fragmentShaderSource
}));

var fragmentShaderSource = `
uniform sampler2D colorTexture; 
varying vec2 v_textureCoordinates; 
void main(void) 
    
    gl_FragColor = texture2D(colorTexture, v_textureCoordinates); 
    gl_FragColor.g = gl_FragColor.b;
}`

viewer.scene.postProcessStages.add(new Cesium.PostProcessStage({
    fragmentShader : fragmentShaderSource
}));


The first shader sets the red to green, and then the second sets the green to blue. If you reverse the order you add these two shaders in the output is different. Here's a Sandcastle link where you can try that.

I'm curious to hear, what kind of application are you working on that uses this?


On Tuesday, December 11, 2018 at 9:54:59 PM UTC-5, noble wrote:
or the way below will work?

my fuction(){
1.render scene, add postProcessStage1 
2.camera fly to some place,
3.add postProcessStage2. and postProcessStage2
 
}
 The default input sampler2D uniforms ( colorTexture and depthTexture)  of postProcessStage2  can be postProcessStage1 output.
or it is  the same as postProcessStage1 input colorTexture .


------------------ 原始邮件 ------------------
发件人: "Omar Shehata"<omar.sameh.shehata@gmail.com>;
发送时间: 2018年12月12日(星期三) 凌晨3:30
收件人: "cesium-dev"<cesium-dev@googlegroups.com>;
主题: [cesium-dev] Re: how transport a picture to postProcessStage

You can pass in a uniforms object, see the docs:


For example, I modified the post process Sandcastle here to add another texture:


So instead of:

viewer.scene.postProcessStages.add(new Cesium.PostProcessStage({
    fragmentShader : fragmentShaderSource
}));



I had:

viewer.scene.postProcessStages.add(new Cesium.PostProcessStage({
    fragmentShader : fragmentShaderSource,
    uniforms : {
        customTexture : '../images/bumpmap.png'
    }
}));

You can then access this in the shader by declaring the uniform:

uniform sampler2D customTexture;

Does that help?

On Sunday, December 9, 2018 at 12:23:27 AM UTC-5, 7737...@qq.com wrote:
hi,friend, I want to Transport a picture to  uniform sample2D  pic in postProcessStage ,now i have rgb array or jpg in textureUnit1


--
You received this message because you are subscribed to a topic in the Google Groups "cesium-dev" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/cesium-dev/9yJ-rkWf5d4/unsubscribe.
To unsubscribe from this group and all its topics, send an email to cesium-dev+unsubscribe@googlegroups.com.

noble

unread,
Dec 13, 2018, 6:20:20 AM12/13/18
to cesium-dev
I try to analysis the visibility form  a view ,shows the result in the another view.
or render result to entity like mirror.
 


------------------ 原始邮件 ------------------
发件人: "Omar Shehata"<omar.same...@gmail.com>;
发送时间: 2018年12月13日(星期四) 凌晨0:27
收件人: "cesium-dev"<cesiu...@googlegroups.com>;
主题: Re: 回复:[cesium-dev] Re: how transport a picture to postProcessStage
To unsubscribe from this group and all its topics, send an email to cesium-dev+...@googlegroups.com.

noble

unread,
Dec 13, 2018, 7:55:55 AM12/13/18
to cesium-dev
my friend, so I need tranport a texture in selfdefine frame buffer to postprocessstage,but I dont have idea

---原始邮件---

Omar Shehata

unread,
Dec 13, 2018, 12:08:46 PM12/13/18
to cesium-dev
Can you show the code you have? is it giving you any errors? If you have a texture object just pass it as a uniform.


On Thursday, December 13, 2018 at 7:55:55 AM UTC-5, noble wrote:
my friend, so I need tranport a texture in selfdefine frame buffer to postprocessstage,but I dont have idea

---原始邮件---
发件人: "Omar Shehata"<omar.sameh.shehata@gmail.com>
发送时间: 2018年12月13日(星期四) 凌晨0:27
收件人: "cesium-dev"<cesium-dev@googlegroups.com>;

noble

unread,
Dec 14, 2018, 11:27:13 AM12/14/18
to cesium-dev
do i need bind  texture created by webgl to a textureUint? what' the max number of textureUnit used by cesium?

---原始邮件---
发件人: "Omar Shehata"<omar.same...@gmail.com>
发送时间: 2018年12月14日(星期五) 凌晨1:08
收件人: "cesium-dev"<cesiu...@googlegroups.com>;
To unsubscribe from this group and all its topics, send an email to cesium-dev+...@googlegroups.com.

noble

unread,
Dec 16, 2018, 9:02:58 AM12/16/18
to cesium-dev
By the way ,are gl_FragCoord.z and gl_FragCoord.w in postProcessStage   the   same  as raw WebGL  ?

------------------ 原始邮件 ------------------
发件人: "Omar Shehata"<omar.same...@gmail.com>;
发送时间: 2018年12月14日(星期五) 凌晨1:08
收件人: "cesium-dev"<cesiu...@googlegroups.com>;
To unsubscribe from this group and all its topics, send an email to cesium-dev+...@googlegroups.com.

Omar Shehata

unread,
Dec 17, 2018, 1:25:28 PM12/17/18
to cesium-dev
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.

On Friday, December 14, 2018 at 11:27:13 AM UTC-5, noble wrote:
do i need bind  texture created by webgl to a textureUint? what' the max number of textureUnit used by cesium?

---原始邮件---
发件人: "Omar Shehata"<omar.sameh.shehata@gmail.com>
发送时间: 2018年12月14日(星期五) 凌晨1:08

noble

unread,
Dec 18, 2018, 11:06:14 AM12/18/18
to cesium-dev
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}
});
------------------ 原始邮件 ------------------
发件人: "Omar Shehata"<omar.same...@gmail.com>;
发送时间: 2018年12月18日(星期二) 凌晨2:25
收件人: "cesium-dev"<cesiu...@googlegroups.com>;
To unsubscribe from this group and all its topics, send an email to cesium-dev+...@googlegroups.com.

Omar Shehata

unread,
Dec 18, 2018, 4:58:32 PM12/18/18
to cesium-dev
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:


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:

发件人: "Omar Shehata"<omar.sameh.shehata@gmail.com>;
发送时间: 2018年12月18日(星期二) 凌晨2:25
收件人: "cesium-dev"<cesium-dev@googlegroups.com>;

noble

unread,
Dec 19, 2018, 11:24:52 AM12/19/18
to cesium-dev
thanks. these really are what i looking for

---原始邮件---
发件人: "Omar Shehata"<omar.same...@gmail.com>
发送时间: 2018年12月19日(星期三) 凌晨5:58
收件人: "cesium-dev"<cesiu...@googlegroups.com>;
主题: Re: 回复: 回复:[cesium-dev] Re: how transport a picture to postProcessStage
To unsubscribe from this group and all its topics, send an email to cesium-dev+...@googlegroups.com.

noble

unread,
Dec 22, 2018, 10:16:27 PM12/22/18
to cesium-dev
my friend,,the texture object you mentioned is gl.createtexture or class defined by cesium

---原始邮件---
发件人: "Omar Shehata"<omar.same...@gmail.com>
发送时间: 2018年12月14日(星期五) 凌晨1:08
收件人: "cesium-dev"<cesiu...@googlegroups.com>;

Omar Shehata

unread,
Jan 2, 2019, 9:16:37 AM1/2/19
to cesium-dev
It's a Cesium class. See the first link in my earlier post (https://groups.google.com/d/msg/cesium-dev/9yJ-rkWf5d4/yMG2y0vkBwAJ).


On Saturday, December 22, 2018 at 10:16:27 PM UTC-5, noble wrote:
my friend,,the texture object you mentioned is gl.createtexture or class defined by cesium

---原始邮件---
发件人: "Omar Shehata"<omar.sameh.shehata@gmail.com>
发送时间: 2018年12月14日(星期五) 凌晨1:08

noble

unread,
Jun 14, 2019, 2:25:08 AM6/14/19
to cesium-dev

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


------------------ 原始邮件 ------------------
发件人: "Omar Shehata"<omar.same...@gmail.com>;
发送时间: 2018年12月19日(星期三) 凌晨5:58
收件人: "cesium-dev"<cesiu...@googlegroups.com>;
主题: Re: 回复: 回复:[cesium-dev] Re: how transport a picture to postProcessStage
To unsubscribe from this group and all its topics, send an email to cesium-dev+...@googlegroups.com.

Omar Shehata

unread,
Jun 20, 2019, 5:49:01 PM6/20/19
to cesium-dev
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:



On Friday, June 14, 2019 at 2:25:08 AM UTC-4, noble wrote:

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


------------------ 原始邮件 ------------------
发件人: "Omar Shehata"<omar.sameh.shehata@gmail.com>;
发送时间: 2018年12月19日(星期三) 凌晨5:58
收件人: "cesium-dev"<cesium-dev@googlegroups.com>;
Reply all
Reply to author
Forward
0 new messages