Hello Point——WebGL

最新推荐文章于 2025-08-12 22:36:33 发布

转载最新推荐文章于 2025-08-12 22:36:33 发布 · 129 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/idealer3d/p/3513838.html

文章标签：

#javascript #ViewUI

本文详细介绍了如何使用WebGL在canvas元素中绘制一个点，包括创建webgl上下文、设置颜色、编写顶点着色器和片段着色器，以及最终绘制点的过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>画一个点</title>
    </head>
    <body onload="main()">
        <canvas id="webgl" width="200" height="200">
        </canvas>
    </body>
    <script type="text/javascript" src="webgl01.js">
    </script>
</html>

function main(){
    var canvas = document.getElementById('webgl');//获得canvas元素
    
    var param = ['webgl', 'experimental-webgl', 'webkit-3d', 'moz-webgl'];
    
    var gl;
    for (var i = 0; i < param.length; i++) {
        gl = canvas.getContext(param[i]);//创建webgl context（得到画图区域）
        
        if (gl) {
            break;
        }
    }
    
    if (!gl) {
        console.log('浏览器不支持WEBGL!');
    }
    
    gl.clearColor(0.0, 0.0, 0.0, 1.0);//指定颜色
    
    gl.clear(gl.COLOR_BUFFER_BIT);//使用指定的颜色清空画图区域
    
    //编写vertex shader，vertex shader指定特性（位置、大小、颜色等）
    //gl_Position指定了点的位置，在三维空间，有XYZ三个轴的坐标，最后一个是透明度，0-1,1代表完全不透明，0则是完全透明
    //vec4，是表示一个有四个参数的向量，在WebGL中均采用此类名称，vec表示vector类别，4表示接收四个参数
    //每一个参数必须是float类型的，即要加小数点，WebGL采用严格类型，不能使用整型参数
    //gl_PointSize 定义点的大小，同样是float类型
    var vShaderSource = 'void main(){ \n' +
    '    gl_Position = vec4(0.0, 0.0, 0.0, 1.0); \n' +
    '    gl_PointSize = 10.0; \n' +
    '} \n';
    
    //编写frament shader，可以理解成对每个像素进行处理
    //gl_FragColor接收vec4类型的参数，即RGBA，RGB为三原色，最后代表透明度
    var fShaderSource = 'void main(){ \n' +
    '    gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0); \n' +
    '} \n';
    
    //其实这一段非常像C，编写源代码，编译，链接...
    var vShader = gl.createShader(gl.VERTEX_SHADER);//创建shader
    gl.shaderSource(vShader, vShaderSource);//把shader source关联到shader上
    gl.compileShader(vShader);//编译shader
    var vCompiled = gl.getShaderParameter(vShader, gl.COMPILE_STATUS);
    
    var fShader = gl.createShader(gl.FRAGMENT_SHADER);
    gl.shaderSource(fShader, fShaderSource);
    gl.compileShader(fShader);
    var fCompiled = gl.getShaderParameter(fShader, gl.COMPILE_STATUS);
    
    var program = gl.createProgram();
    gl.attachShader(program, vShader);//将编译完的vertex shader和fragment shader关联到创建的program上
    gl.attachShader(program, fShader);
    
    gl.linkProgram(program);//链接program
    var linked = gl.getProgramParameter(program, gl.LINK_STATUS);
    
    gl.useProgram(program);
    
    gl.drawArrays(gl.POINTS, 0, 1);//第一个参数POINTS表示画点，第二个参数根据前面指定的gl_Position，从第0个元素开始，因为每个点需要三个坐标，即（0.0, 0.0, 0.0），第三个参数表示画一个
}