# How to make a Primitive render to texture?

**URL:** https://community.cesium.com/t/how-to-make-a-primitive-render-to-texture/8007
**Category:** CesiumJS
**Created:** [February 15, 2019, 1:11pm UTC](https://community.cesium.com/t/how-to-make-a-primitive-render-to-texture/8007 "2019-02-15T13:11:10Z")
**Posts on this page:** 5
**Page:** 1

<div class="post-metadata">

### Author: ![Rayman\_Ng](https://avatars.discourse-cdn.com/v4/letter/r/a183cd/32.png) [@Rayman\_Ng](https://community.cesium.com/u/Rayman_Ng)
#### Post date: [February 15, 2019, 1:11pm UTC](https://community.cesium.com/t/how-to-make-a-primitive-render-to-texture/8007/1 "2019-02-15T13:11:10Z")

</div>

1. A concise explanation of the problem you're experiencing.

I want to perform particle computation in GPU and use the result to render the particle. Now I am able to perform the computation with WebGL, and I am trying to render the result of computation to a texture.

2. A minimal code example. If you've found a bug, this helps us reproduce and repair it.

I don't have a code example but a rough plan:

The source code of DrawCommand contains a framebuffer option.  
[https://github.com/AnalyticalGraphicsInc/cesium/blob/039375c3c33c577a5afae3bff62da83c819fe50b/Source/Renderer/DrawCommand.js#L34](https://github.com/AnalyticalGraphicsInc/cesium/blob/039375c3c33c577a5afae3bff62da83c819fe50b/Source/Renderer/DrawCommand.js#L34)

Maybe I can create a Cesium.Framebuffer and pass it to the DrawCommand?  
[https://github.com/AnalyticalGraphicsInc/cesium/blob/master/Source/Renderer/Framebuffer.js](https://github.com/AnalyticalGraphicsInc/cesium/blob/master/Source/Renderer/Framebuffer.js)

Then I may use the \_colorTextures(I am not sure which texture to use) of Framebuffer as a uniform?

Finally I set up a custom primitive with custom vertex and fragment shader source by using MaterialAppearence and begin my custom WebGl render?

I am not sure whether it will works. I will appreciate it if you can tell me a better(simpler) solution.

3. Context. Why do you need to do this? We might know a better way to accomplish your goal.

I want to make a GPU particle system. You can see the full problem context in my previous threads:  
[https://groups.google.com/forum/#!topic/cesium-dev/gjjd9TNeY2A](https://groups.google.com/forum/#!topic/cesium-dev/gjjd9TNeY2A)  
[https://groups.google.com/forum/#!topic/cesium-dev/vR7H4KJURJ8](https://groups.google.com/forum/#!topic/cesium-dev/vR7H4KJURJ8)  
[https://groups.google.com/forum/#!topic/cesium-dev/7kCcITmGbEA](https://groups.google.com/forum/#!topic/cesium-dev/7kCcITmGbEA)

4. The Cesium version you're using, your operating system and browser.  
Cesium 1.53

---

<div class="post-metadata">

### Author: ![omar](https://sea2.discourse-cdn.com/cesium/user_avatar/community.cesium.com/omar/32/1999_2.png) [@omar](https://community.cesium.com/u/omar)
#### Post date: [February 18, 2019, 3:50am UTC](https://community.cesium.com/t/how-to-make-a-primitive-render-to-texture/8007/2 "2019-02-18T03:50:35Z")

</div>

The best example I’ve found for rendering to a texture in CesiumJS is on Scene.pick:

> <https://github.com/CesiumGS/cesium/blob/master/Source/Scene/Scene.js#L3452-L3502>

The way it works is the scene is rendered with a special pick pass, where each primitive renders a unique solid color. A framebuffer is created, and it’s set on the Pass:

> <https://github.com/CesiumGS/cesium/blob/master/Source/Scene/PickFramebuffer.js#L57-L71>

Then, when a DrawCommand is executed, the context uses the given framebuffer:

> <https://github.com/CesiumGS/cesium/blob/master/Source/Renderer/Context.js#L1071>

When this framebuffer is used, the attached colorTextures are drawn to. For the case of the Scene.pick, the pixels are then read back to check which object the mouse clicked on:

> <https://github.com/CesiumGS/cesium/blob/master/Source/Scene/PickFramebuffer.js#L87-L93>

So to summarize, if you want to draw to a texture in CesiumJS, you have to create a framebuffer, and one colorTexture, then set it as the framebuffer on passState for your custom draw command.

---

<div class="post-metadata">

### Author: ![Rayman\_Ng](https://avatars.discourse-cdn.com/v4/letter/r/a183cd/32.png) [@Rayman\_Ng](https://community.cesium.com/u/Rayman_Ng)
#### Post date: [February 19, 2019, 12:53am UTC](https://community.cesium.com/t/how-to-make-a-primitive-render-to-texture/8007/3 "2019-02-19T00:53:57Z")

</div>

Thanks for your help!

I wrote a example of [render to texture](https://cesiumjs.org/Cesium/Build/Apps/Sandcastle/#c=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). I hope it can help others

It is a rough(and probably imperfect) example, if someone has a better idea, please feel free to improve it.

Omar Shehata [omar.sameh.shehata@gmail.com](mailto:omar.sameh.shehata@gmail.com) 于2019年2月18日周一 上午11:50写道：

---

<div class="post-metadata">

### Author: ![omar](https://sea2.discourse-cdn.com/cesium/user_avatar/community.cesium.com/omar/32/1999_2.png) [@omar](https://community.cesium.com/u/omar)
#### Post date: [February 19, 2019, 2:15pm UTC](https://community.cesium.com/t/how-to-make-a-primitive-render-to-texture/8007/4 "2019-02-19T14:15:27Z")

</div>

This is awesome Rayman! Thanks for sharing this!!!

I’ve definitely bookmarked this thread. I’m sure it will help a lot of people. Hopefully it can serve as a basis for a future tutorial.

---

<div class="post-metadata">

### Author: ![liu\_liang](https://sea2.discourse-cdn.com/cesium/user_avatar/community.cesium.com/liu_liang/32/3885_2.png) [@liu\_liang](https://community.cesium.com/u/liu_liang)
#### Post date: [May 22, 2019, 6:59am UTC](https://community.cesium.com/t/how-to-make-a-primitive-render-to-texture/8007/5 "2019-05-22T06:59:42Z")

</div>

Hi,It seems the cull setting of renderState didn’t [work.in](http://work.in/) DrawCommand which has a framebuffer instance.

[https://groups.google.com/forum/#!searchin/cesium-dev/framebuffer%7Csort:date/cesium-dev/uK\_QAdHBAHM/yu4lStHxBQAJ](https://groups.google.com/forum/#!searchin/cesium-dev/framebuffer%7Csort:date/cesium-dev/uK_QAdHBAHM/yu4lStHxBQAJ)

在 2019年2月19日星期二 UTC+8上午8:54:13，Rayman Ng写道：