Import webgl code to Cesium

alegarreta · April 7, 2014, 3:27pm

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

Dan_Bagnell · April 8, 2014, 6:23pm

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 · April 9, 2014, 3:30pm

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

Dan_Bagnell · April 14, 2014, 5:58pm

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

alegarreta · May 8, 2014, 11:28am

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

18749606532 · March 26, 2018, 3:45am

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.heide11 · June 3, 2018, 9:03am

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:

Thanks,
Martin

martin.heide11 · June 3, 2018, 11:06am

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],
        appearance : new ExampleAppearance()
    }));

Sandcastle.finishedLoading();
});