Custom Renderer - Shader Possibilities

Ruediger_Brand · March 2, 2017, 9:27am

Hi,

i have read post from Hannah, where she gave a tip to write a custom shader.
Does there exist any documentation for this ?

In my project we have a partner with huge know-how in OpenGL and computation on GPU. The partner uses its own datastructures for very fast access to the data and rendering. Is it possible to transfer/transfer this to Cesium? What is the best starting point ? For Rendering the partner uses ray-tracing mechanisms - is there a chance to use this in connection with cesium ?

Best regards

Rüdiger

hannah · March 2, 2017, 2:08pm

Hello Rüdiger,

You can create a custom material by writing a GLSL shader and adding it to our Material class. Here is an example for a checkerboard material:

github.com

CesiumGS/cesium/blob/master/Source/Shaders/Materials/CheckerboardMaterial.glsl

uniform vec4 lightColor;
uniform vec4 darkColor;
uniform vec2 repeat;

czm_material czm_getMaterial(czm_materialInput materialInput)
{
    czm_material material = czm_getDefaultMaterial(materialInput);

    vec2 st = materialInput.st;

    // From Stefan Gustavson's Procedural Textures in GLSL in OpenGL Insights
    float b = mod(floor(repeat.s * st.s) + floor(repeat.t * st.t), 2.0);  // 0.0 or 1.0

    // Find the distance from the closest separator (region between two colors)
    float scaledWidth = fract(repeat.s * st.s);
    scaledWidth = abs(scaledWidth - floor(scaledWidth + 0.5));
    float scaledHeight = fract(repeat.t * st.t);
    scaledHeight = abs(scaledHeight - floor(scaledHeight + 0.5));
    float value = min(scaledWidth, scaledHeight);

This file has been truncated. show original

github.com

CesiumGS/cesium/blob/master/Source/Scene/Material.js#L1271-L1286


* @readonly
*/
Material.AlphaMapType = "AlphaMap";
Material._materialCache.addMaterial(Material.AlphaMapType, {
 fabric: {
   type: Material.AlphaMapType,
   uniforms: {
     image: Material.DefaultImageId,
     channel: "a",
     repeat: new Cartesian2(1.0, 1.0),
   },
   components: {
     alpha: "texture2D(image, fract(repeat * materialInput.st)).channel",
   },
 },
 translucent: true,

I don’t know about using ray-tracing in Cesium. Maybe someone else will have pointers there.

Best,

Hannah

sean_lilley · March 3, 2017, 12:31am

Hi Rüdiger, it’s possible to do raytracing in WebGL/GLSL but won’t necessarily be easy to integrate with Cesium. Could you give more details about the type of rendering you are trying to do?

Ruediger_Brand · March 3, 2017, 7:40pm

Hi Sean, Hannah,

thank you for the response.

Concerning rendering:

Our partner has it’s own datastructure for a pointcloud and algorithms to search and navigate within this structure.

Rendering a scene, i.e. pointclouds, we discuss posibilities of integration - so I asked here.

One idea was writing a service for the rendering resp. a renderer, but I don’t where is the starting point.

I can deliver more details next week.

Regards

Rüdiger