webgl绘制功能

cjh1126a

已于 2023-11-07 14:47:47 修改

阅读量256

点赞数 2

文章标签：前端 javascript webgl

于 2023-11-07 14:42:34 首次发布

本文链接：https://blog.youkuaiyun.com/cjh1126a/article/details/134265928

版权

使用webgl绘制五角星

核心代码：

let vertexShaderString = `
attribute vec4 a_position;
void main(){
    gl_Position = a_position;
}
`
let fragmentShaderString = `
void main(){
    gl_FragColor = vec4(0.0,0.0,1.0,1.0);
}
`
function draw(){
let webglDiv = document.querySelector("#webglCanvas");
let webgl = webglDiv.getContext("webgl");
webgl.viewport(0, 0, webglDiv.width, webglDiv.height);
let vsshader = webgl.createShader(webgl.VERTEX_SHADER);
let fsshader = webgl.createShader(webgl.FRAGMENT_SHADER);

webgl.shaderSource(vsshader, vertexShaderString);
webgl.shaderSource(fsshader, fragmentShaderString);

webgl.compileShader(vsshader);
webgl.compileShader(fsshader);
let program = webgl.createProgram();
webgl.attachShader(program, vsshader);
webgl.attachShader(program, fsshader)

webgl.linkProgram(program);
webgl.useProgram(program);

webgl.program = program;
let arr = [0,0.54,
    0.1,0.2,
    0.46,0.2,
    0.18,-0.02,
    0.28,-0.37,
    0,-0.15,
    -0.28,-0.37,
    -0.18,-0.02,
    -0.46,0.2,
    -0.1,0.2
]

let aPosition = webgl.getAttribLocation(webgl.program,"a_position");
let pointPosition = new Float32Array(arr);
let lineBuffer = webgl.createBuffer();
webgl.bindBuffer(webgl.ARRAY_BUFFER,lineBuffer);
webgl.bufferData(webgl.ARRAY_BUFFER,pointPosition,webgl.STATIC_DRAW);
webgl.enableVertexAttribArray(aPosition);
webgl.vertexAttribPointer(aPosition,2,webgl.FLOAT,false,2*4,0);
webgl.clearColor(0, 0, 0, 1.0);
webgl.clear(webgl.COLOR_BUFFER_BIT);
webgl.drawArrays(webgl.LINE_LOOP,0,10);
}