First I'll tell you my initial goal is to draw various polygon like this...
Each point has time-series data attached to it and we would like to render the colors based on where that value is at each point on some given gradient or range scheme. (e.g. {range : 1-5, color : blue}, {range : 5-10, color : white}, {range : 10-15, color : green}). Although my image above isn't showing it, I want to exploit webgl's smooth shading library to blend the colors as we see in the starting triangle examples for web and opengl.
I'm new to Cesium and it's wonderful (Sandcastle is a brilliant tool)! However, as I have been looking through some old forum posts and some of the documentation and I can't seem to get a clear picture of where things are currently in terms of using the lower-level WebGL functionality.
I started looking through the forum and found this post...
But it seems that all the references are outdated, the libraries have changed and the sandcastle examples provided no longer work so I tried to modify it but am still getting errors...
require(['Cesium'], function(Cesium) {
"use strict";
var viewer = new Cesium.Viewer('cesiumContainer');
var scene = viewer.scene;
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;
var polygon = Cesium.PolygonGeometry.fromPositions({
positions : Cesium.Cartesian3.fromDegreesArray([
-122.300313,38.351973,
-122.299669,38.351094,
-122.300245,38.350785,
-122.300548,38.351103,
-122.300882,38.350944,
-122.300927,38.350981,
-122.301006,38.35094,
-122.301287,38.350796,
-122.301405,38.350909,
-122.301669,38.350779,
-122.301912,38.351047
])
});
// Add extent instances to primitives
scene.primitives.add(new Cesium.Primitive({
geometryInstances : [polygon],
appearance : new ExampleAppearance()
}));
Sandcastle.finishedLoading();
});
with this error...
An error occurred while rendering. Rendering has stopped.
undefined
TypeError: Cannot read property '_workerName' of undefined
TypeError: Cannot read property '_workerName' of undefined
at Primitive.update (http://cesiumjs.org/Cesium/Source/Scene/Primitive.js:761:46)
at PrimitiveCollection.update (http://cesiumjs.org/Cesium/Source/Scene/PrimitiveCollection.js:364:27)
at updatePrimitives (http://cesiumjs.org/Cesium/Source/Scene/Scene.js:1572:27)
at render (http://cesiumjs.org/Cesium/Source/Scene/Scene.js:1634:9)
at Scene.render (http://cesiumjs.org/Cesium/Source/Scene/Scene.js:1678:13)
at CesiumWidget.render (http://cesiumjs.org/Cesium/Source/Widgets/CesiumWidget/CesiumWidget.js:659:25)
at render (http://cesiumjs.org/Cesium/Source/Widgets/CesiumWidget/CesiumWidget.js:68:32)
So overall I would also like some advice (maybe an up to date example) of how I could do this. Should I try to make my own Geometry with it's own appearance? (I guess that currently we shouldn't create our own custom geometry per the tutorial)...
I looked up to see if people had done anything to draw linear gradients:
https://groups.google.com/forum/embed/?place=forum/cesium-dev&showsearch=true&showpopout=true&hideforumtitle=true&fragments=true&parenturl=http%3A%2F%2Fcesiumjs.org%2Fforum.html#!searchin/cesium-dev/gradient/cesium-dev/IUtQ9U53e5E/zwG4mA7YptgJ
One post suggests to define a material but this will be specific to each polygon and set of points so I'm not sure if this is the correct route to go.
https://groups.google.com/forum/embed/?place=forum/cesium-dev&showsearch=true&showpopout=true&hideforumtitle=true&fragments=true&parenturl=http%3A%2F%2Fcesiumjs.org%2Fforum.html#!searchin/cesium-dev/gradient/cesium-dev/xxSp8UzMBeg/XI9mUEdRQjcJ
Or in future (or maybe more recent) releases are there any ways we will be able to directly draw something using pure webgl and just add it to the map at a specific grid coordinate? (This would ease the mind of all involved at my lab).
Thank you!!
Brian