Import webgl code to Cesium

[alegarreta]

Hi,

I'm trying to import pure webgl code to Cesium, but I don't know what is the correct way.

With my webgl code is able to create a animation between 2 textures. For this purpose I define shaders (vertex and fragment). At first of all I'm trying to do some tests with createShaderProgram of Context.js (http://cesiumjs.org/Cesium/Build/Documentation/Context.html):

// Example 2. Create a shader program with explicit attribute indices.

var vs = 'attribute vec4 position;' +

         'attribute vec3 normal;' +

         'void main() { gl_Position = position; }';

var fs = 'void main() { gl_FragColor = vec4(1.0); }';

var attributes = {

    position : 0,

    normal   : 1

};

sp = context.createShaderProgram(vs, fs, attributes);

But when I launched the program it didn't do anything and in console appear this error:

But Uncaught ReferenceError: Context is not defined

I attached full file.

¿How is the correct way to use this code? ¿How can I create and use shader program?¿Do you know any simple example which work like the documentation example?

Thanks,

Aritz

[dext...@gmail.com]

If you want to use Cesium's scene context, I think you need to use the proper namespace:

var context = scene.context;

If you want to instantiate your own context, try

var context = new Cesium.Context(...)

[alegarreta]

Thank you!!

With var context = scene.context; fixed the error. 

Somebody know any simple example about createShaderProgram? After created that shader what steps I need to follow?

Regards,

Aritz

[Patrick Cozzi]

Aritz,

For most use cases, we do not need to do custom rendering.  If we just want custom vertex/fragment shaders, consider writing an appearance, which will then work with Cesium's geometries.

To get started, copy and paste the following into Sandcastle:

require(['Cesium'], function(Cesium) {
    "use strict";
   
    var viewer = new Cesium.Viewer('cesiumContainer');
    var scene = viewer.scene;
    var ellipsoid = viewer.centralBody.ellipsoid;

    var ExampleAppearance = function() {
        this.material = undefined;

        this.vertexShaderSource =
'attribute vec3 position3DHigh;' +
'attribute vec3 position3DLow;' +
'attribute vec3 normal;' +
'varying vec3 v_positionEC;' +
'varying vec3 v_normalEC;' +
'void main()' +
'{' +
'    vec4 p = czm_computePosition();' +
'    v_positionEC = (czm_modelViewRelativeToEye * p).xyz;' +
'    v_normalEC = czm_normal * normal;' +
'    gl_Position = czm_modelViewProjectionRelativeToEye * p;' +
'}';

        this.fragmentShaderSource =
'varying vec3 v_positionEC;' +
'varying vec3 v_normalEC;' +
'void main()' +
'{' +
'    gl_FragColor = vec4(v_normalEC, 0.5);' +
'}';
        this.renderState = Cesium.Appearance.getDefaultRenderState(true, false);
    };

    ExampleAppearance.prototype.getFragmentShaderSource = Cesium.Appearance.prototype.getFragmentShaderSource;
    ExampleAppearance.prototype.isTranslucent = Cesium.Appearance.prototype.isTranslucent;
    ExampleAppearance.prototype.getRenderState = Cesium.Appearance.prototype.getRenderState;
 
    // Red extent
    var extent = Cesium.Extent.fromDegrees(-180.0, -90.0, 180.0, 90.0);
    var redExtentInstance = new Cesium.GeometryInstance({
        geometry : new Cesium.ExtentGeometry({
            extent : extent,
            vertexFormat : Cesium.VertexFormat.POSITION_AND_NORMAL
        })
    });

    // Add extent instances to primitives
    scene.primitives.add(new Cesium.Primitive({
        geometryInstances : [redExtentInstance],
        appearance : new ExampleAppearance()
    }));

    Sandcastle.finishedLoading();
});

Patrick

[alegarreta]

Thank you very much PatricK!!!

It looks very good.

Now I'm trying to put my own shaders code and this error appear:

DeveloperError: Appearance/Geometry mismatch. The appearance requires vertex shader attribute input 'aTextureCoord', which was not computed as part of the Geometry. Use the appearance's vertexFormat property when constructing the geometry. Error

How can I manage the different type of attributes of the shaders? I watch this http://cesiumjs.org/Cesium/Build/Documentation/VertexFormat.html?classFilter=vertexFormat&show=all in documentation but I don't know how to use it.

These are my attributes:
'     attribute vec3 aVertexPosition;\n'+
'     attribute vec2 aTextureCoord;\n'+

Regards,

Aritz

[Patrick Cozzi]

Attributes are matched by name and geometries do not have attributes called aVertexPosition and aTextureCoord.  Instead use

attribute vec3 position3DHigh;

attribute vec3 position3DLow;

attribute vec2 st;

For example, see

https://github.com/AnalyticalGraphicsInc/cesium/blob/master/Source/Shaders/Appearances/AllMaterialAppearanceVS.glsl

Patrick

--
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/WmDTD1PU_Mw/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.

--

twitter.com/pjcozzi

[alegarreta]

Thanks for your reply Patrick!!

Is possible to link or pass a texture to shader? Something like:
gl_FragColor = vec4(v_normalEC, 0.5) + texture2D(textureName, texPos);

Or how is the correct way to do a gl.bindTexture with shaders in CESIUM?

Regards,

Aritz

[Patrick Cozzi]

Yes.  Use an existing material or create a new material (which can integrate with your appearance or the existing MaterialAppearance).  For more on materials, see

https://github.com/AnalyticalGraphicsInc/cesium/wiki/Fabric

Patrick

[alegarreta]

Ok Patrick, I use a test image and the code is here:

var widget = new Cesium.CesiumWidget('cesiumContainer');
var scene = widget.scene;
var ellipsoid = widget.centralBody.ellipsoid;

var ExampleAppearance = function() {
        this.material = undefined;

        this.vertexShaderSource =
'attribute vec3 position3DHigh;' +
'attribute vec3 position3DLow;' +
'attribute vec3 normal;' +
'varying vec3 v_positionEC;' +
'varying vec3 v_normalEC;' +

'attribute vec2 st;' +

'void main()' +
'{' +
'    vec4 p = czm_computePosition();' +
'    v_positionEC = (czm_modelViewRelativeToEye * p).xyz;' +
'    v_normalEC = czm_normal * normal;' +
'    gl_Position = czm_modelViewProjectionRelativeToEye * p;' +
'}';

        this.fragmentShaderSource =
'varying vec3 v_positionEC;' +
'varying vec3 v_normalEC;' +
'void main()' +
'{' +
'    gl_FragColor = vec4(v_normalEC, 0.5);' +
'}';
        this.renderState = Cesium.Appearance.getDefaultRenderState(true, false);
    };

    ExampleAppearance.prototype.getFragmentShaderSource = Cesium.Appearance.prototype.getFragmentShaderSource;
    ExampleAppearance.prototype.isTranslucent = Cesium.Appearance.prototype.isTranslucent;
    ExampleAppearance.prototype.getRenderState = Cesium.Appearance.prototype.getRenderState;
 
    // Red extent
    var extent = Cesium.Extent.fromDegrees(-180.0, -90.0, 180.0, 90.0);
    var redExtentInstance = new Cesium.GeometryInstance({
        geometry : new Cesium.ExtentGeometry({
            extent : extent,
            vertexFormat : Cesium.VertexFormat.POSITION_AND_NORMAL
        })
    });
   

    scene.primitives.add(new Cesium.ExtentPrimitive({
    extent : Cesium.Extent.fromDegrees(-95.0, 20.0, -90.0, 25.0),
    material : new Cesium.Material({
    fabric : {
        type : 'Image',
        uniforms : {
          image : 'img/Cesium_Logo_overlay.png',
        }
        }
    })
}));

    // Add extent instances to primitives
    scene.primitives.add(new Cesium.Primitive({
        geometryInstances : [redExtentInstance],
        appearance : new ExampleAppearance()
    }));

But if I want to link or pass a texture to shader I don't know how can I do. I read your shared links but there isn't example to show me what is the way. I'm a beginner in this kind of topics.

Thanks,

Aritz

[alegarreta]

When I try to link texture in shader this error appear:
[GL] Fragment shader compile log: ERROR: 0:? : 'texture2D' : no matching overloaded function found

I don't know what but I'm doing somthing wrong. Somebody know how can I link or pass correctly a texture to a shader? Somebody know any simple example about it?

Best regards,

Aritz

[Daniel Bagnell]

Hi Aritz,

Can you post the code that is causing the error?

For how to use 'texture2D' , see the Texture Lookup Functions section of the GLSL ES 2.0 Specification.

-Dan

[alegarreta]

Hello Dan,

The error was that I passed a vec3 parameter instead of vec2 -> vec4 texture2D (sampler2D sampler, vec3 coord) insted of vec4 texture2D (sampler2D sampler, vec2 coord)

Now I have new problems.
[GL] Vertex shader compile log: ERROR: 0:1: 'assign' : cannot convert from ' -component vector of float' to 'varying highp -component vector of float'

I´m not sure if I followed the right steps for my purpose. Starting from Patrick's example I try to create new material in my case an image from 2 different ways, one with scene.primitives.add(new Cesium.Primitive({ and the other with var imageExtentInstance = new Cesium.GeometryInstance({ . After I wanted to link or pass this texture to the shader.
Here the code:

var widget = new Cesium.CesiumWidget('cesiumContainer');
    var scene = widget.scene;
    var ellipsoid = widget.centralBody.ellipsoid;

    var ExampleAppearance = function() {

        //this.material = undefined;
        this.material = new Cesium.Material.fromType('Image');
        this.material.uniforms.image = 'img/Cesium_Logo_overlay.png';

        this.vertexShaderSource =
'attribute vec3 position3DHigh;' +
'attribute vec3 position3DLow;' +
'attribute vec3 normal;' +
'varying vec3 v_positionEC;' +
'varying vec3 v_normalEC;' +
'attribute vec2 st;' +

'uniform sampler2D image;' +
'varying vec4 Position;\n'+
'void main()' +
'{' +
'     Position = (st,st);'+
'    vec2 texPos = Position.xy;\n'+

'    vec4 p = czm_computePosition();' +
'    v_positionEC = (czm_modelViewRelativeToEye * p).xyz;' +
'    v_normalEC = czm_normal * normal;' +
'    gl_Position = czm_modelViewProjectionRelativeToEye * p;' +
'}';

        this.fragmentShaderSource =
'varying vec3 v_positionEC;' +
'varying vec3 v_normalEC;' +

'uniform sampler2D image;' +
'varying vec4 Position;\n'+
'void main()' +
'{' +
'    vec2 texPos = Position.xy;\n'+
'    gl_FragColor = vec4(v_normalEC, 0.5) + texture2D(image, texPos);' +

'}';
        this.renderState = Cesium.Appearance.getDefaultRenderState(true, false);
    };

    ExampleAppearance.prototype.getFragmentShaderSource = Cesium.Appearance.prototype.getFragmentShaderSource;
    ExampleAppearance.prototype.isTranslucent = Cesium.Appearance.prototype.isTranslucent;
    ExampleAppearance.prototype.getRenderState = Cesium.Appearance.prototype.getRenderState;
    

    var imageExtentInstance = new Cesium.GeometryInstance({
        geometry : new Cesium.ExtentGeometry({
            extent : Cesium.Extent.fromDegrees(-95.0, 20.0, -90.0, 25.0),
            vertexFormat : Cesium.VertexFormat.POSITION_AND_NORMAL,
            appearance : new Cesium.MaterialAppearance({

                material : new Cesium.Material({
                    fabric : {
                        type : 'Image',
                        uniforms : {
                          image : 'img/Cesium_Logo_overlay.png',
                        }
                        }
                })
            })
        })

    });
    var mapExtentInstance = new Cesium.GeometryInstance({
        geometry : new Cesium.ExtentGeometry({
            extent : Cesium.Extent.fromDegrees(-180.0, -90.0, 180.0, 90.0),
            vertexFormat : Cesium.PerInstanceColorAppearance.POSITION_AND_NORMAL
            }),

    });


    // Add extent instances to primitives
    scene.primitives.add(new Cesium.Primitive({

        geometryInstances : [imageExtentInstance,mapExtentInstance],
        appearance : new ExampleAppearance()
           
        }));   
   
scene.primitives.add(new Cesium.ExtentPrimitive({
    extent : Cesium.Extent.fromDegrees(-100.0, 20.0, -90.0, 25.0),

    material : new Cesium.Material({
    fabric : {
        type : 'Image',
        uniforms : {
          image : 'img/Cesium_Logo_overlay.png',
        }
        }
    })
}));

What is the correct way to create a new material? and to pass or link texture to shader?

Best regards,

Aritz

[Daniel Bagnell]

Aritz,

Can you explain what you are trying to do? If I understand that I might be able to tell you the best way to get it done.

The error is on the first line of main in your shader source. It should be:

Position = vec4(st, st); // or Position = st.xyxy;

Here is an example of a custom material:

var materialSource =

    'uniform sampler2D image;\n' +

    'czm_material czm_getMaterial(czm_materialInput materialInput)\n' +

    '{\n' +

    '    czm_material material = czm_getDefaultMaterial(materialInput);\n' +

    '    material.diffuse = texture2D(image, materialInput.st);\n' +

    '    return material;\n' +

    '}\n';

var material = new Material({

    fabric : {

        uniforms : {

            image : url

        },

        source : materialSource

    }

});

The definition of czm_materialInput and czm_material are here:

https://github.com/AnalyticalGraphicsInc/cesium/blob/master/Source/Shaders/Builtin/Structs/materialInput.glsl

https://github.com/AnalyticalGraphicsInc/cesium/blob/master/Source/Shaders/Builtin/Structs/material.glsl

You can create an extent to test your material like in the code for this example:

http://cesiumjs.org/Cesium/Apps/Sandcastle/index.html?src=Ellipsoid%20Surface.html&label=Appearances

Dan

[alegarreta]

Hello Dan,

Thank you for your response!!

I have webgl code which make animation with 3 images, two images are sea textures and the third one is a noise texture. With the cnoise and pnoise functions I make the animation in fragment shader, like a sea water flow animation. This animation is only a test to understood animations functionality, and in the future I want to make a animations with external data servers like a WMS or THREDDS.
With your example code I tried to make an custom material, but Material is not defined error appear:

var materialSource =
    'uniform sampler2D image;\n' +
    'czm_material czm_getMaterial(czm_materialInput materialInput)\n' +
    '{\n' +
    '    czm_material material = czm_getDefaultMaterial(materialInput);\n' +
    '    material.diffuse = texture2D(image, materialInput.st);\n' +
    '    return material;\n' +
    '}\n';

var testMaterial = new Material({ -> Uncaught ReferenceError: Material is not defined
    fabric : {
        uniforms : {
            image : 'img/Cesium_Logo_overlay.png'
        },
        source : materialSource

    }
});

scene.primitives.add(new Cesium.ExtentPrimitive({
    extent : Cesium.Extent.fromDegrees(-95.0, 20.0, -90.0, 25.0),

    fabric : {
        type : 'testMaterial'
    }
}));

What is the correct way to do that?

Best regards,

Aritz

[Daniel Bagnell]

Hi Aritz,

Here is a working Sandcastle example:

require(['Cesium'], function(Cesium) {

    "use strict";

    

    var viewer = new Cesium.Viewer('cesiumContainer');

    var scene = viewer.scene;

    var primitives = scene.primitives;

    var ellipsoid = viewer.centralBody.ellipsoid;

    

    var materialSource =

        'uniform sampler2D image;\n' +

        'czm_material czm_getMaterial(czm_materialInput materialInput)\n' +

        '{\n' +

        '    czm_material material = czm_getDefaultMaterial(materialInput);\n' +

        '    material.diffuse = texture2D(image, materialInput.st).rgb;\n' +

        '    return material;\n' +

        '}\n';

    var testMaterial = new Cesium.Material({

        fabric : {

            uniforms : {

                image : '../images/Cesium_Logo_Color.jpg'

            },

            source : materialSource

        }

    });

    scene.primitives.add(new Cesium.ExtentPrimitive({

        extent : Cesium.Extent.fromDegrees(-95.0, 20.0, -90.0, 25.0),

        material : testMaterial

    }));

    Sandcastle.finishedLoading();

});

I tested it with the head of the master branch on GitHub that will be released tomorrow. You might have to make modifications if you are using a previous version.

You can add the additional two image uniforms to the material and a float uniform for animation time. When the time is updated you can set it with:

testMaterial.uniforms.time = animationTime;

Regards,

Dan

[alegarreta]

Thank you Dan, it's work fine!!

When you say that I can add the additional two image uniforms to the material is something like this?

var MaterialSource =
    'uniform sampler2D ucurSampler;\n' +
    'uniform sampler2D vcurSampler;\n' +

    'czm_material czm_getMaterial(czm_materialInput materialInput)\n' +
    '{\n' +
    '    czm_material material = czm_getDefaultMaterial(materialInput);\n' +

    '    material.diffuse = texture2D(ucurSampler, materialInput.st).rgb;\n' +
    '     material.diffuse = texture2D(vcurSampler, materialInput.st).rgb;\n' +
    '     material.alpha = 0.5;\n' +

    '    return material;\n' +
    '}\n';

var testMaterial= new Cesium.Material({
        fabric : {
            uniforms : {

                ucurSampler : 'img/Cesium_Logo_overlay.png',
                vcurSampler : 'img/vcur.1024x1024.png'
            },
        source : MaterialSource
    }
});

scene.primitives.add(new Cesium.ExtentPrimitive({

    extent : Cesium.Extent.fromDegrees(-180.0, -90.0, 180.0, 90.0),

    material : testMaterial
}));

With this code I only view one texture, how can I view both of them? How can I define 2 or more material.diffuse? Or I need to create different materials?

Regards,

Aritz

[Daniel Bagnell]

Yes, you can add images like that, but the way MaterialSource is written, only vcurSampler will contribute to the diffuse color because it is the last assigned to material.diffuse. If you want to see both images you need to blend then somehow. You can change the source to something like below to see both textures.

vec4 ucurColor = texture2D(ucurSampler, materialInput.st);

vec4 vcurColor = texture2D(vcurSampler, materialInput.st);

material.diffuse = mix(ucurColor.rgb, vcurColor.rgb, 0.5);

[alegarreta]

Hello Dan,

And if I want add more than 2 images How can I do? This is the correct way?

var ucurMaterialSource =

    'uniform sampler2D ucurSampler;\n' +
    'uniform sampler2D vcurSampler;\n' +

    'uniform sampler2D earthSampler;\n'+

'czm_material czm_getMaterial(czm_materialInput materialInput)\n' +
    '{\n' +
    '    czm_material material = czm_getDefaultMaterial(materialInput);\n' +

    '     vec4 ucurColor = texture2D(ucurSampler, materialInput.st);\n' +
    '     vec4 vcurColor = texture2D(vcurSampler, materialInput.st);\n' +
    '     vec4 earthColor = texture2D(earthSampler, materialInput.st);\n' +
    '     vec3 test = mix(ucurColor.rgb, vcurColor.rgb, 0.5);\n' +
    '     material.diffuse = mix(test.rgb, earthColor.rgb, 0.5);\n' +

    '     material.alpha = 0.5;\n' +
    '    return material;\n' +
    '}\n';

var ucurMaterial = new Cesium.Material({
        fabric : {
            uniforms : {
                ucurSampler : 'img/ucur.1024x1024.png',
                vcurSampler : 'img/vcur.1024x1024.png',
                earthSampler : 'img/world.200412.3x1024x1024.jpg',
                noiseSampler : 'img/whiteNoise256.256.jpg'
            },
        source : ucurMaterialSource
    }
});

In the other hand I don't understand how can I use the testMaterial.uniforms.time = animationTime; Do you know some example?

Best regards,

aritz

<a href="http://twitter.com/pjcozzi" target="_blank" onmousedown="this.href='http://www.google.com/url?q\75http%3A%2F%2Ftwitter.com%2Fpjcozzi\46sa\75D\46sntz\0751\46usg\75AFQjCNHifU1T7z7hyG9Mz35y76-GUMDjOg';return true;" onclick="this.href='http://www.google.com/url?q\75http%3A%2F%2Ftwitter.com%2Fpjcozzi\46sa\75D\46sntz\0751\46usg\75AFQjCNHifU1T7z7hyG9Mz

...

[alegarreta]

Hello Dan,

I managed to create animations by following your advices, thank you very much!!

My next step is to add material with multple passes. What is the preferred way to do that? Connecting different materials? Or creating a single material with all the shaders?

I tried the first approach: defining two material and trying to link them using the "materials" member of "fabric".

This is my test code, but it does not work :-(

var rttmaterialSource =
    'uniform sampler2D temperatureSampler;\n' +

    'czm_material czm_getMaterial(czm_materialInput materialInput)\n' +
    '{\n' +
    '    czm_material material = czm_getDefaultMaterial(materialInput);\n' +

    '    material.diffuse = texture2D(temperatureSampler, materialInput.st).bgr;\n' + //how create a FBO texture in the first pass?

    '    return material;\n' +
    '}\n';
        

var simpleMaterialSource =
    'uniform sampler2D background;\n' +

    'czm_material czm_getMaterial(czm_materialInput materialInput)\n' +
    '{\n' +
    '    czm_material material = czm_getDefaultMaterial(materialInput);\n' +

    '    material.diffuse = texture2D(background, materialInput.st).rgb;\n' +

    '    return material;\n' +
    '}\n';

//1 pass : blur the input image

var colorInvertedmaterial = new Cesium.Material({
        fabric : {
            uniforms : {
                temperatureSampler : 'img/pottmp2010occam.2048x2048.png',
            },
        source : rttmaterialSource
    }
});

// pass screen --> globe

var passScreenMaterial = new Cesium.Material({
        fabric : {
            uniforms : {
                background : colorInvertedmaterial,   ///Is posible to asign FBO in this way????
            },
        source : simpleMaterialSource,
        materials : colorInvertedmaterial    ///or in this other way????

    }
});

scene.primitives.add(new Cesium.ExtentPrimitive({
    extent : Cesium.Extent.fromDegrees(-180.0, -90.0, 180.0, 90.0),

    material : passScreenMaterial
}));

The "colorInvertedmaterial" material (with the shader defined in "rttmaterialSource") would be the first pass. In this case we just play with the image component as an example.

The "screenMaterial" material (with the shader defined in "simpleMaterialSource") just renders the output of the previous shader in the cesium globe.

You may notice we have tried to link them by linking the "background" uniform to the "colorInvertedmaterial" material.

Best regards,

Aritz

For more options, visit <a href="https://groups.google.com/d/optout" target="_blank" onmousedown="this.href='https://groups.google.com/d/optout';return true;" onclick="this.href='https://groups.google.com/d/optout';ret

...

[Daniel Bagnell]

Hi Aritz,

Have you seen the wiki page on Fabric?

See the section on combining materials.

Regards,

Dan

'&n

...

[alegarreta]

Hi Dan,

I think that the section on combining materials is about the creation of 2 different materials, with one shader pass for each one. Both material are asigned to different channels of a new material (diffuse, ...).

I have tried to do a similar test with this code. But it fails with  Uncaught ReferenceError: diffuseMaterial is not defined.

var passScreenMaterial = new Cesium.Material({
    fabric:{

        materials: {
            diffuseMaterial  : {
                type : 'DiffuseMap',
                uniforms : {
                        temperatureSampler : 'img/pottmp2010occam.2048x2048.png'
                },
                source : rttmaterialSource
            }
        },
        fabric : {
            uniforms : {
                background : diffuseMaterial.diffuse,
            },
            source : simpleMaterialSource,
        }
    }
});

Did you know how add materials with multiple passes? Is it like described somehow in Combining materials section of Fabric?

rttmaterialSource contains the first pass code and simpleMaterialSource the code for the final pass.

Our guess is that diffuseMaterial.diffuse could refer to the FBO created internally for the first pass. This is our major concern here: how to link both passes.

Best regards,

Aritz

...

[Daniel Bagnell]

Hi Aritz,

Do you need multiple passes for you water animation? Are you trying to do something different? It isn't easy do use multiple passes right now, though it is on our road map to create a post-processing framework.

If you truly need multiple passes, check out the the sun post-process code as an example of several passes:

https://github.com/AnalyticalGraphicsInc/cesium/blob/master/Source/Scene/SunPostProcess.js

Regards,

Dan

...

[alegarreta]

Hi Dan,

Thank you very much for the link. That seems very promising. I guess I could adapt that code to create my shader chain (just 2 passes for the demo, but the final code will contain 3 passes more).

I have to understand how the SunPostProcess is integrated in the scene. The output of that shader seems to be the texture applied to the typical quad (screen aligned quad).

My concern is if I can use that output texture (RTT) as texture for the sea.

In other words, do I have to modify how the sea is rendered (extending or modifying cesium itself)? Since it seems we can not use (yet) Cesium:Material for this purpose, I don't see other alternative / option.

Any thoughts?

Regards,

Aritz

...

[Daniel Bagnell]

The color texture of the final framebuffer in the chain can be used as the texture in the material.

Do you want to change how the sea is rendered in the terrain example?

http://cesiumjs.org/Cesium/Apps/Sandcastle/index.html?src=Terrain.html&label=Showcases

Select "Small terrain heightmaps and water mask" and then click "San Francisco Bay".

Regards,

Dan

Attributes are matched by name and geometries do not have attributes called aVertexPosition and <span style="font-family:arial,sans-serif

...

[alegarreta]

Thank you very much Dan for all of your help!!!

I learnt a lot about CESIUM with your instructions and now I´m working on other options.

Best regards,

Aritz

...

[ants-double]

Now ,i also want import webgl code .but the cesium version is last ,I don't know the change .But i can't run you example code success .Can you tell me how to import webgl code .Thank you.

在 2014年3月20日星期四 UTC+8下午8:47:20，alegarreta写道：

[martin....@gmail.com]

Hi Patrick,

thank you for providing this example.
Could you please update it for the current version of Cesium? I would really appreciate that!

I tried a bit by myself; after exchanging "Extent" with "Rectangle", the initialization code works, but I get this error:

An error occurred while rendering. Rendering has stopped.
undefined
DeveloperError: normalized result is not a number
DeveloperError@http://localhost:8080/Source/Core/DeveloperError.js:43:19
Cartesian3.normalize@http://localhost:8080/Source/Core/Cartesian3.js:421:19
computeTriangleAttributes@http://localhost:8080/Source/Core/GeometryPipeline.js:1948:13
splitLongitudeTriangles@http://localhost:8080/Source/Core/GeometryPipeline.js:2132:17
GeometryPipeline.splitLongitude@http://localhost:8080/Source/Core/GeometryPipeline.js:2553:17
geometryPipeline@http://localhost:8080/Source/Scene/PrimitivePipeline.js:134:21
PrimitivePipeline.combineGeometry@http://localhost:8080/Source/Scene/PrimitivePipeline.js:278:26
combineGeometry@http://localhost:8080/Source/Workers/combineGeometry.js:11:23
createTaskProcessorWorker/<@http://localhost:8080/Source/Workers/createTaskProcessorWorker.js:55:42

Thanks,
Martin

[martin....@gmail.com]

With these modifications, the example works in Cesium 1.45:

require(['Cesium'], function(Cesium) {
"use strict";

var viewer = new Cesium.Viewer('cesiumContainer');
var scene = viewer.scene;

// CESIUM_1.45
//var ellipsoid = viewer.centralBody.ellipsoid;
var ellipsoid = scene.globe.ellipsoid;

var ExampleAppearance = function() {
this.material = undefined;

this.vertexShaderSource =
// CESIUM_1.45: Added batchId
'attribute float batchId;' +

'attribute vec3 position3DHigh;' +
'attribute vec3 position3DLow;' +
'attribute vec3 normal;' +
'varying vec3 v_positionEC;' +
'varying vec3 v_normalEC;' +
'void main()' +
'{' +
' vec4 p = czm_computePosition();' +
' v_positionEC = (czm_modelViewRelativeToEye * p).xyz;' +
' v_normalEC = czm_normal * normal;' +
' gl_Position = czm_modelViewProjectionRelativeToEye * p;' +
'}';

this.fragmentShaderSource =
'varying vec3 v_positionEC;' +
'varying vec3 v_normalEC;' +
'void main()' +
'{' +
' gl_FragColor = vec4(v_normalEC, 0.5);' +
'}';
this.renderState = Cesium.Appearance.getDefaultRenderState(true, false);
};

ExampleAppearance.prototype.getFragmentShaderSource = Cesium.Appearance.prototype.getFragmentShaderSource;
ExampleAppearance.prototype.isTranslucent = Cesium.Appearance.prototype.isTranslucent;
ExampleAppearance.prototype.getRenderState = Cesium.Appearance.prototype.getRenderState;

// CESIUM_1.45: Extent -> Rectangle.
// CESIUM_1.45: Smaller rectangle region, otherwise normal is computed as NaN.
// Red rectangle
//var rectangle = Cesium.Rectangle.fromDegrees(-180.0, -90.0, 180.0, 90.0);
var rectangle = Cesium.Rectangle.fromDegrees(0, 0, 180.0, 90.0);
var redRectangleInstance = new Cesium.GeometryInstance({
geometry : new Cesium.RectangleGeometry({
rectangle : rectangle,
vertexFormat : Cesium.VertexFormat.POSITION_AND_NORMAL
})
});

// Add rectangle instances to primitives
scene.primitives.add(new Cesium.Primitive({
geometryInstances : [redRectangleInstance],