Merge pull request #12023 from tschaub/uniform-names

Avoid collisions between user variables and internal names in WebGL shaders

src/ol/style/expressions.js

@@ -378,6 +378,15 @@ Operators['get'] = {
   },
 };
 
+/**
+ * Get the uniform name given a variable name.
+ * @param {string} variableName The variable name.
+ * @return {string} The uniform name.
+ */
+export function uniformNameForVariable(variableName) {
+  return 'u_var_' + variableName;
+}
+
 Operators['var'] = {
   getReturnType: function (args) {
     return ValueTypes.ANY;
@@ -389,7 +398,7 @@ Operators['var'] = {
     if (context.variables.indexOf(value) === -1) {
       context.variables.push(value);
     }
-    return `u_${value}`;
+    return uniformNameForVariable(value);
   },
 };
 

src/ol/webgl/ShaderBuilder.js

@@ -7,6 +7,7 @@ import {
   ValueTypes,
   expressionToGlsl,
   getStringNumberEquivalent,
+  uniformNameForVariable,
 } from '../style/expressions.js';
 
 /**
@@ -527,8 +528,9 @@ export function parseLiteralStyle(style) {
 
   // define one uniform per variable
   fragContext.variables.forEach(function (varName) {
-    builder.addUniform(`float u_${varName}`);
-    uniforms[`u_${varName}`] = function () {
+    const uniformName = uniformNameForVariable(varName);
+    builder.addUniform(`float ${uniformName}`);
+    uniforms[uniformName] = function () {
       if (!style.variables || style.variables[varName] === undefined) {
         throw new Error(
           `The following variable is missing from the style: ${varName}`