用webgl绘制基础三角形需三步：准备float32array顶点坐标（如[-0.5,-0.5,0.5,-0.5,0.0,0.5]），编写顶点着色器（设置gl_position）和片段着色器（设定gl_fragcolor），创建缓冲区并绑定到attribute变量后调用gl.drawarrays(gl.triangles,0,3)渲染。
用 WebGL 绘制一个基础三角形，核心是把三个顶点坐标传给 GPU，并让着色器按规则画出来。整个过程不涉及复杂数学或三维变换，重点在数据准备、着色器编写和缓冲区绑定这三步。
准备顶点坐标并转成类型化数组
三角形由三个点构成，每个点用二维或三维坐标表示。WebGL 要求数据必须是 Float32Array，不能用普通数组——因为 GPU 只认连续、定长的二进制浮点数据。
- 例如绘制一个居中朝上的等腰三角形：
const vertices = new Float32Array([ -0.5, -0.5, 0.5, -0.5, 0.0, 0.5 ])- 这里每两个数是一组
(x, y)，共三组，对应左下、右下、顶部三个顶点 - 如果要用三维坐标（比如
vec3输入），就写成[-0.5, -0.5, 0.0, 0.5, -0.5, 0.0, 0.0, 0.5, 0.0]
写两个着色器：顶点 + 片段
WebGL 必须配对使用顶点着色器（处理位置）和片段着色器（处理颜色），两者缺一不可。
Java JDK 25
下载
Java JDK 25 来自 OpenJDK 官方归档，版本为 JDK 25，本条下载地址已指向官方 Windows x64 zip 安装包直链，适合调试旧项目或兼容旧版 Java 运行环境。
- 顶点着色器：接收顶点属性，输出最终屏幕位置
-
attribute vec2 a_position;—— 声明输入变量，对应你传入的二维坐标 -
void main() { gl_Position = vec4(a_position, 0.0, 1.0); }—— 补齐 z=0、w=1，形成标准四维齐次坐标 - 片段着色器：决定每个像素的颜色
-
void main() { gl_FragColor = vec4(1.0, 0.5, 0.0, 1.0); }—— 输出橙色（RGBA）
创建缓冲区并绑定到 attribute 变量
这是 WebGL 区别于普通 Canvas 的关键：数据不是逐个传，而是一整块上传到显存，再“连线”到着色器变量。
- 创建缓冲区：
const buffer = gl.createBuffer() - 绑定并填数据：
gl.bindBuffer(gl.ARRAY_BUFFER, buffer); gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW) - 把缓冲区“连”到着色器里的
a_position：gl.vertexAttribPointer(a_positionLoc, 2, gl.FLOAT, false, 0, 0) - 启用这个连线：
gl.enableVertexAttribArray(a_positionLoc) - 其中
a_positionLoc是通过gl.getAttribLocation(program, 'a_position')获取的变量地址
最后调用 drawArrays 渲染
所有前置工作做完，真正画出来的就一句话：
gl.drawArrays(gl.TRIANGLES, 0, 3)-
gl.TRIANGLES表示按每三个点组成一个三角形 -
0是起始索引，3是顶点总数 - 记得提前设置清屏色并清屏：
gl.clearColor(0, 0, 0, 1); gl.clear(gl.COLOR_BUFFER_BIT)
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
