how transport a picture to postProcessStage

[7737...@qq.com]

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]

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

https://cesiumjs.org/Cesium/Build/Documentation/PostProcessStage.html

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

https://cesiumjs.org/Cesium/Build/Apps/Sandcastle/?src=Custom%20Post%20Process.html

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]

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]

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]

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:

https://cesiumjs.org/Cesium/Build/Documentation/PostProcessStage.html

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

https://cesiumjs.org/Cesium/Build/Apps/Sandcastle/?src=Custom%20Post%20Process.html

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]

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]

my friend, so I need tranport a texture in selfdefine frame buffer to postprocessstage,but I dont have idea

---原始邮件---

[Omar Shehata]

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]

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]

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]

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]

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]

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:

https://cesium.com/blog/2015/05/15/graphics-tech-in-cesium-architecture/

And more blogs on that:

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

发件人: "Omar Shehata"<omar.sameh.shehata@gmail.com>;

发送时间: 2018年12月18日(星期二) 凌晨2:25

收件人: "cesium-dev"<cesium-dev@googlegroups.com>;

[noble]

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]

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]

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]

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]

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/

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>;