Opengl es 如何在mapbox GL JS自定义样式图层中使用u_时间

我想在fragmentSource中为mapbox着色器添加时间，但当我添加

统一浮点u_时间时三角形不渲染。这是一把小提琴

见：

片段语言没有浮点类型的默认精度限定符。所以对于浮动，浮动
点向量和矩阵变量声明，声明必须包含精度限定符或
默认浮点精度必须事先声明

由于统一变量具有浮点类型，因此必须向片段着色器添加精度限定符。如果不指定精度限定符，则会导致编译错误（例如，没有（float）的精度限定符）

添加默认精度限定符：

precision mediump float；
均匀浮动u_时间；

或向统一变量添加显式精度限定符：

uniform mediump float u_时间；


我建议验证着色器是否已成功编译（
gl.getShaderParameter
/
gl.getShaderInfoLog
），以及程序是否已链接（
gl.getProgramParameter
/
gl.getProgramInfoLog
）。例如：

//创建顶点着色器
var vertexShader=gl.createShader（gl.VERTEX\u着色器）；
gl.shaderSource（vertexShader，vertexSource）；
gl.compileShader（顶点着色器）；
if（！gl.getShaderParameter（vertexShader，gl.COMPILE_状态））
警报（gl.getShaderInfoLog（vertexShader））；
//创建片段着色器
var fragmentShader=gl.createShader（gl.FRAGMENT\u着色器）；
gl.shaderSource（fragmentShader，fragmentSource）；
gl.compileShader（碎片着色器）；
if（！gl.getShaderParameter（fragmentShader，gl.COMPILE_状态））
警报（gl.getShaderInfoLog（fragmentShader））；
//将两个着色器链接到WebGL程序中
this.program=gl.createProgram（）；
gl.attachShader（this.program，vertexShader）；
gl.attachShader（this.program，fragmentShader）；
总账链接程序（本程序）；
if（！gl.getProgramParameter（this.program，gl.LINK_STATUS））
警报（gl.getProgramInfoLog（this.program））；



mapboxgl.accessToken='pk.eyj1ijoiymvuzgvybglkemuilcjhijoi2pud3c0mnn1mddratn4cxbradr3mhdyacj9.OsQLWGIWOutuIXCHgT8coQ'；
var map=（window.map=new mapboxgl.map）({
容器：“映射”，
缩放：3，
中间：[7.5,58]，
风格：'mapbox://styles/mapbox/light-v10',
antialias:true//使用MSAA抗锯齿创建gl上下文，以便自定义图层抗锯齿
}));
//创建自定义样式层以实现WebGL内容
var highlightLayer={
id:'突出显示'，
键入：“自定义”，
//将图层添加到地图时调用的方法
// https://docs.mapbox.com/mapbox-gl-js/api/#styleimageinterface#onadd
onAdd：功能（地图、总图）{
//为顶点着色器创建GLSL源
垂直信源=
`
均匀mat4u_矩阵；
属性向量2 a_pos；
void main（）{
gl_位置=u_矩阵*vec4（a_位置，0.0，1）；
}`;
//为片段着色器创建GLSL源
var碎片源=
`
精密中泵浮子；
均匀浮动u_时间；
void main（）{
gl_FragColor=vec4（1.0,0.0,1.0,1.0）；
}`;
//创建顶点着色器
var vertexShader=gl.createShader（gl.VERTEX\u着色器）；
gl.shaderSource（vertexShader，vertexSource）；
gl.compileShader（顶点着色器）；
if（！gl.getShaderParameter（vertexShader，gl.COMPILE_状态））
警报（gl.getShaderInfoLog（vertexShader））；
//创建片段着色器
var fragmentShader=gl.createShader（gl.FRAGMENT\u着色器）；
gl.shaderSource（fragmentShader，fragmentSource）；
gl.compileShader（碎片着色器）；
if（！gl.getShaderParameter（fragmentShader，gl.COMPILE_状态））
警报（gl.getShaderInfoLog（fragmentShader））；
//将两个着色器链接到WebGL程序中
this.program=gl.createProgram（）；
gl.attachShader（this.program，vertexShader）；
gl.attachShader（this.program，fragmentShader）；
总账链接程序（本程序）；
if（！gl.getProgramParameter（this.program，gl.LINK_STATUS））
警报（gl.getProgramInfoLog（this.program））；
this.aPos=gl.getAttribLocation（this.program'a_pos'）；
//定义要在自定义样式层中渲染的三角形的顶点
var赫尔辛基=mapboxgl.MercatorCoordinate.fromLngLat({
液化天然气：25.004，
纬度：60.239
});
var berlin=mapboxgl.MercatorCoordinate.fromLngLat({
液化天然气：13.403，
拉丁美洲：52.562
});
var kyiv=mapboxgl.MercatorCoordinate.fromLngLat({
液化天然气：30.498，
拉丁美洲：50.541
});
//创建并初始化WebGLBuffer以存储顶点和颜色数据
this.buffer=gl.createBuffer（）；
gl.bindBuffer（gl.ARRAY\u BUFFER，this.BUFFER）；
缓冲数据(
gl.ARRAY\u缓冲区，
新浮点数组([
赫尔辛基，
赫尔辛基，
柏林x,，
柏林，
基辅x，
基辅
]),
gl.STATIC\u-DRAW
);
},
//方法在每个动画帧上激发
// https://docs.mapbox.com/mapbox-gl-js/api/#map.event:render
渲染：函数（总账、矩阵）{
总账使用程序（本程序）；
gl.uniformMatrix4fv(
gl.getUniformLocation（此程序为“u_矩阵”），
假,，
矩阵
);
gl.bindBuffer（gl.ARRAY\u BUFFER，this.BUFFER）；
gl.EnableVertexAttributeArray（this.aPos）；
gl.VertexAttribute指针（this.aPos，2，gl.FLOAT，false，0，0）；
总账启用（总账混合）；
gl.blendFunc（gl.SRC_ALPHA，gl.1减去gl.SRC_ALPHA）；
总图.绘图阵列（总图.三角带，0,3）；
}
};
//添加自定义样式
var fragmentSource =`
    uniform float u_time;
    void main() {
        gl_FragColor = vec4(sin(1.0*u_time),0.0,1.0,1);
    }`