大概介绍下思路哈，希望对你有帮助。
当使用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、在每次绘制之前都需要重新指定顶点属性和缓冲区数据，当然你也可以用一个，然后经过平移或者旋转变换得到另外新的小圆。
shader
WebGL
cesium
threeJS
gis
vue3
招聘
glsl
地图数据
vite
城市gis
VUE
模型
绘制点
UE5
自定义着色器
vue3-ts-cesium-map-show
cesium贴图材质
TvT
点击事件
useTresContext
实现热力图
求助
三维图表
html
css
webGPU
学习线路
GeoJson
dwg模型加载
初级课程鼠标绘点
drawElements纹理
图形学基础
图层
建模
blender
vscode
vec3
fastadmin导入插件
three
MacOS
升级Cesium版本
着色器
_model._sourcePrograms为空
3D格点数据
算法
mapv
glmatrix
mat4.orthp
资源
手机
浏览
