Performance limitation of current styling specification

[SunBlack]

Currently it is hard to implement efficient styling code, because of limitation of the spec.

Example following style code:

style['color'] = {
	'conditions': [
		['length(${POSITION_ABSOLUTE}) < 100000', 'vec4(0.0)'],
		['length(${POSITION_ABSOLUTE}) > 100100', 'vec4(0.1)'],
		['length(${POSITION_ABSOLUTE}) > 100200', 'vec4(0.9)'],
		['length(${POSITION_ABSOLUTE}) > 100300', 'vec4(1.0)'],
		[true, 'vec4(1.0, 0.5, 0.5, 1.0)']
	]
};

Already here you have to multiple time same calculation (here length(${POSITION_ABSOLUTE})). I don't believe the glsl compiler will optimize this like a developer would be. So I miss possibility to store values into a variable before to increase performance. Another reason to do this: Sometimes it getting hard to read this code because of many calculation duplication (try to write this code in current styling language ;-) )

A quick & dirty extension to solve this would be this:

style['color'] = {
	'variables': [
		['HEIGHT', 'length(${POSITION_ABSOLUTE})'],
		['HEIGHT_OFFSET', '${HEIGHT) - 100000'],
	],
	'conditions': [
		['${HEIGHT_OFFSET} < 0', 'vec4(0.0)'],
		['${HEIGHT_OFFSET} > 100', 'vec4(0.1)'],
		['${HEIGHT_OFFSET} > 200', 'vec4(0.9)'],
		['${HEIGHT_OFFSET} > 300', 'vec4(1.0)'],
		[true, 'vec4(1.0, 0.5, 0.5, 1.0)']
	]
};

A other way would be to allow free code and modify and verify it like now:

style['color'] = "
	float height = length(${POSITION_ABSOLUTE});
	float heightOffset =height -100000 ;
	if ((heightOffset) < 0) return vec4(0.0);
	if ((heightOffset) > 100) return vec4(0.1);
	if ((heightOffset) > 200) return vec4(0.9);
	if ((heightOffset) > 300) return vec4(1.0);
	return vec4(1.0, 0.5, 0.5, 1.0);
";

In last case verify step is more complicated, but you can do a lot more with it - especially if you allow user functions.

[lilleyse]

For the first issue you bring up we are working towards that right now, and partial support already exists. Check out CesiumGS/cesium#5153

For custom shader code, there is a bullet point Include GLSL in a style here: #2. I agree this would be useful to have and you could try experimenting in Cesium. However I'm not sure that we would make it part of the spec right now, maybe as a future extension.

[pjcozzi]

However I'm not sure that we would make it part of the spec right now, maybe as a future extension.

Given the GLSL dependency, this would need to be a post 1.0 extension or something separate from the spec, e.g., Cesium can implement as many styling languages as it wants and one could be GLSL-based.

[lilleyse]

This is handled in theory by defines in the styling language, though the CesiumJS implementation does a basic string replacement which doesn't solve the performance problem.

Experimental custom shaders are now supported in CesiumJS which gives more control here.