webgl怎么画一个三角形

最新推荐文章于 2024-07-30 18:00:16 发布

宁长风

最新推荐文章于 2024-07-30 18:00:16 发布

阅读量212

点赞数

分类专栏： webgl 文章标签： webgl

本文链接：https://blog.csdn.net/weixin_43663775/article/details/123655015

版权

webgl 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

<canvas id="canvas"></canvas>

<script id="vertexShader" type="x-shader/x-vertex">
attribute vec4 v_position;
void main(){
    gl_Position = v_position;
    gl_PointSize = 30.0;
}
</script>
<script id="fragmentShader" type="x-shader/x-fragment">
void main(){
    gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
}
</script>


<script>
let canvas = document.getElementById('canvas'),
    gl = canvas.getContext('webgl'),
    coordinate = new Float32Array([0.25,0,0, -0.25,0,0, 0,0.5,0]),
    vertexSource = document.getElementById('vertexShader').innerText,
    fragmentSource = document.getElementById('fragmentShader').innerText,
    program = initShader(gl, vertexSource, fragmentSource),
    v_position = gl.getAttribLocation(program, 'v_position'),
    buffer = gl.createBuffer();
    gl.bindBuffer(gl.ARRAY_BUFFER, buffer),
    gl.bufferData(gl.ARRAY_BUFFER, coordinate, gl.STATIC_DRAW),
    gl.vertexAttribPointer(v_position, 3, gl.FLOAT, false, 0, 0),
    gl.enableVertexAttribArray(v_position);
    gl.drawArrays(gl.TRIANGLES, 0, 3);
//声明初始化着色器函数
function initShader(gl,vertexShaderSource,fragmentShaderSource){
    var vertexShader = gl.createShader(gl.VERTEX_SHADER);
    var fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
    gl.shaderSource(vertexShader,vertexShaderSource);
    gl.shaderSource(fragmentShader,fragmentShaderSource);
    gl.compileShader(vertexShader);
    gl.compileShader(fragmentShader);
    var program = gl.createProgram();
    gl.attachShader(program,vertexShader);
    gl.attachShader(program,fragmentShader);
    gl.linkProgram(program);
    gl.useProgram(program);
    return program;
}

</script>

有用收藏点赞哟