首先在js中应用浏览器拓展，详见地址https://developer.mozilla.org/zh-CN/docs/Web/API/WebGLRenderingContext/getExtension
//webgl
gl.getExtension(name);//threejs
renderer.context.getExtension('OES_standard_derivatives');之后
在着色器中通过预处理指令引入拓展，片元和顶点若都要使用都需要引用，或者一个使用，另外提个通过varying传入也可以。
#extension GL_OES_standard_derivatives : enable最终应用偏导做运算
vec3 dx = dFdx(v_position);
vec3 dy = dFdy(v_position);Webgl目前最高版本是2.0，与之对应的是shader glsl es，目前该着色器更新到3.2版本。你只需要在shader最开始声明其版本就可以应用。具体可以在下面唯一指定官网查看：
https://www.google.com.hk/
在WebGL中，图片的宽度和高度必须是2的幂次方（如2、4、8、16、32、64等）。如果加载的图片不是2的幂次方，则WebGL会自动将其转换为最接近的2的幂次方大小，但会影响渲染效果和性能。如果你加载的图片不是2的幂次方，有以下几种解决方案：
调整图片大小：可以使用图片编辑软件（如Photoshop等）将图片的宽度和高度调整为2的幂次方大小，然后再加载到WebGL中。
2.使用纹理重复（Texture Repeat）或纹理裁减来设置。对于水平和垂直方向上的重复，需要使用gl.TEXTURE_WRAP_S和gl.TEXTURE_WRAP_T参数分别指定。可以使用以下常量来指定重复或截取：
gl.REPEAT：重复纹理
gl.CLAMP_TO_EDGE：裁剪到纹理的边缘
var texture = gl.createTexture();
var image = new Image();
image.onload = function() {
gl.bindTexture(gl.TEXTURE_2D, texture);
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, image);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.REPEAT);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.REPEAT);
}
image.src = 'my-image.png';在上面的示例代码中，我们使用gl.TEXTURE_2D来指定纹理类型，并且在加载图像后，设置纹理的Wrapping属性为gl.REPEAT。如果要将纹理裁剪到边缘，只需将gl.REPEAT更改为gl.CLAMP_TO_EDGE即可。具体API应用我建议你可以参考下面连接：
https://developer.mozilla.org/zh-CN/docs/Web/API/WebGLRenderingContext/texParameter
大概介绍下思路哈，希望对你有帮助。
当使用WebGL绘制2D图形时，可以使用gl.drawArrays或gl.drawElements方法来绘制基本的形状，如三角形、矩形等。要在一个图形的基础上绘制另一个新的图形，需要重新绘制一个新的图形并将其添加到原有的图形中。
以下是一个简单的示例，演示如何在WebGL中绘制一个三角形并在其内部绘制三个小圆。
1、需要创建一个包含三角形顶点信息的缓冲区，可以使用gl.createBuffer方法来创建缓冲区，使用gl.bindBuffer方法将缓冲区绑定到ARRAY_BUFFER上，并使用gl.bufferData方法将顶点数据传输到缓冲区中。然后，可以使用gl.vertexAttribPointer方法指定缓冲区中每个顶点的坐标和颜色信息。最后，使用gl.drawArrays方法绘制三角形。
2、需要创建三个包含小圆顶点信息的缓冲区，使用类似的方法将顶点数据传输到缓冲区中，并使用gl.vertexAttribPointer方法指定每个顶点的坐标和颜色信息。最后，使用gl.drawArrays方法分别绘制每个小圆。
注意：
1、在绘制完三角形后不要clearColor，因为调用了该API后，三角形就会被清除了，这也是大家最开始写这个案例常常犯的错。
2、在每次绘制之前都需要重新指定顶点属性和缓冲区数据，当然你也可以用一个，然后经过平移或者旋转变换得到另外新的小圆。
不请自来，希望对你有所帮助：
微信浏览器的WebGL支持情况在过去几年里有了很大的改善，现在绝大多数支持WebGL的桌面浏览器，微信浏览器也都可以正常运行WebGL程序。然而，具体的兼容性仍然取决于微信浏览器所运行的设备和操作系统，以及WebGL程序本身的要求。
微信浏览器所运行的设备和操作系统对WebGL的支持程度也各不相同。一般来说，较新版本的设备和操作系统支持的WebGL版本更高，而较老的设备和操作系统则可能无法支持最新的WebGL版本。此外，一些低端设备可能会出现性能问题，导致WebGL程序无法正常运行。
WebGL程序本身的要求也会影响其在微信浏览器中的兼容性。一些高级特性可能需要更高版本的WebGL才能支持。如果您的WebGL程序依赖这些特性，可能无法在一些较老的微信浏览器上运行。
为了确保您的WebGL程序在微信浏览器中正常运行，建议您遵循以下最佳实践：
使用WebGL 1.0标准，避免使用WebGL 2.0的高级特性；
针对低端设备进行性能优化，避免使用大量的顶点和纹理；
在程序中检测WebGL的支持情况，并给出友好的提示信息；
在微信浏览器中测试和调试您的WebGL程序，尽可能多地测试不同的设备和操作系统。
不请自来，大概有下面几个步骤，希望对你有所帮助：
1、需要在着色器里面定义
uniform float u_time2、在webgl里面获取到u_time变量
let utime= gl.getUniformLocation(gl.program,'u_time');3、将js里面的时间赋值给time
gl.uniform1f(utime, time);4、实时更新time
setTimeout();或者requestAnimationFrame去实施获取time即可
不请自来。一般有两种方案，给你提供个思路：
一、在WebGL中进行碰撞检测需要使用射线投射和包围盒检测等算法。可以将3D模型转换为包围盒或其他几何形状，然后使用射线来检测物体之间的碰撞。
二、可以使用基于物理的引擎（如Cannon.js和Physi.js）来模拟物体之间的物理运动和碰撞。
第一种方法一般我们是自行编写计算包围盒算法。计算包围盒的一种简单方法是遍历所有要渲染的对象并计算它们的边界框。边界框是一个矩形或立方体，它完全包含对象并且是最小的。对于每个对象，您可以计算它的边界框如下：
1.遍历对象的所有顶点，并将每个顶点的坐标存储在一个数组中。
2.初始化包围盒的最小和最大值，将它们设置为第一个顶点的坐标。
3.遍历剩余的顶点，并更新包围盒的最小和最大值，使其包含所有顶点。
4.使用最小和最大值来计算包围盒的中心和大小。
下面是我从网上的一个类包围盒计算方法，希望对你有启发：
function computeBoundingBox(vertices) {
var min = [vertices[0], vertices[1], vertices[2]];
var max = [vertices[0], vertices[1], vertices[2]];
for (var i = 3; i < vertices.length; i += 3) {
var x = vertices[i];
var y = vertices[i+1];
var z = vertices[i+2];
if (x < min[0]) {
min[0] = x;
}
if (y < min[1]) {
min[1] = y;
}
if (z < min[2]) {
min[2] = z;
}
if (x > max[0]) {
max[0] = x;
}
if (y > max[1]) {
max[1] = y;
}
if (z > max[2]) {
max[2] = z;
}
}
var center = [ (min[0] + max[0]) / 2,
(min[1] + max[1]) / 2,
(min[2] + max[2]) / 2
];
var size = [ max[0] - min[0],
max[1] - min[1],
max[2] - min[2]
];
return { min: min, max: max, center: center, size: size };
}
泻药。目前确实大屏展示的项目很多，两种技术方案居多，一种是游戏引擎（UE居多），其次是WebGL相关（ThreeJS为代表的其他框架）。其实不管游戏引擎还是WebGL核心还是图形学基础理论，只不过在其基础上又进行封装成框架。之前在直播时候给大家讲过，WebGL学习往往更容易获得收获感和成就感，并且基于WebGL的API也能够更加深刻理解图形学的美丽，除此之外，Web端的三维发展绝对是未来的主线，希望大家先部署自己的战略制高点，先发致人。接下来推荐几种学习路线：
方案一：
1、以框架学习为起点。这里还是建议ThreeJS，因为该框架结构较为清晰，成熟度也很高，社区很活跃，并且解决方案，我们俗称的轮子很多，所以就此而言你想学习三维只是ThreeJS确实是一个很好的试金石。当你可以对ThreeJS的基础API有了一定认识，至少看过一遍，并且实战过之后，你就可以进行下一个阶段的学习了。B站的课程很多关于ThreeJS学习，因为本身这块内容和传统前端没有太大区别，只需要对API熟悉你就可以掌握该知识。
2、学习WebGL。这时候你需要学习WebGL基础、中级、和高级。我推荐《Webgl编程指南》虽然该书也有一定缺点，但是市面上很多书都是靠这本书来翻版的，所以你懂得。
3、阅读ThreeJS源码。吃碎源码一直是所有程序员害怕的，也是极具挑战的内容。如果你想再深耕WebGL端三维开发，或者你想独自打造引擎，threejs源码很香。
4、学习图形学理论。我推荐《虎书》和《games》系列。课程和书籍是相辅相成的。
5、学习着色器或者尝试OpenGL或者direct3D。
当然中间还有数学学习的东西，我建议采取查漏补缺的方法，以上内容的学习不需要很高深的数学，基本都是大学数学内容，当然也有少许的重难点问题。难点问题是需要积累，当然我以后会帮你搞明白。
方案一就这些吧，方案二后面我再追加，希望对你有帮助。
问 Webgl或者Threejs如何在应用拓展性shader？