webgl学习笔记一-绘图单点

写在前面

  •   WebGl（全称：Web Graphics Library ： web图形库） 是基于OpenGL ES 2.0的3D绘图协议。

  •   WebGL完美地解决了现有的Web交互式三维动画的两个问题：第一，它通过HTML脚本本身实现Web交互式三维动画的制作，无需任何浏览器插件支持;第二，它利用底层的图形硬件加速功能进行的图形渲染，是通过统一的、标准的、跨平台的OpenGL接口实现的。

绘图一个点的步骤

  • 创建HTML5 canvas
<canvas id="canvas" width="200px" height="200px"></canvas>
  • 获取画布canvas的Id
var canvas = document.getElementById('canvas');
  • 获取画布webgl的上下文
var gl = canvas.getContext('webgl');

  • 编写存储着色器程序

    • 顶点着色器 ：指定了点的位置和尺寸
            //顶点着色器程序
        var VSHADER_SOURCE =
            "void main() {" +
            //设置坐标
            "gl_Position = vec4(0.0, 0.0, 0.0, 1.0); " +
            //设置尺寸
            "gl_PointSize = 10.0; " +
            "} ";
    • 片元着色器 ：指定了点的颜色
            //片元着色器程序
    var FSHADER_SOURCE =
        "void main() {" +
        //设置颜色
        "gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);" +
        "}";

  • 编译着色器。三步曲

    • 创建Shader（着色器）对象
    Object createShader (enum type)

type 两种选择 ：
gl.VERTEX_SHADER创建顶点着色器 ，  gl.FRAGMENT_SHADER 创建片段着色器。
    • 将前面的着色器程序绑定到Shader对象上
    shaderSource(Object shader, string source)
shader ：着色器对象
source ：着色器程序
    • 编译程序
    compileShader(Object shader)

  • 合并程序：将顶点着色器和片元着色器合并，并链接到程序中。四步走

    • 创建一个程序对象
    createProgram();
    • 附件着色器
    attachShader(Object program, Object shader);
    • 链接着色器
    linkProgram(shaderProgram);
    • 使用程序
    useProgram(shaderProgram);

  • 绘图

gl.drawArrays(gl.POINTS, 0, 1);

附上代码

html


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<canvas id="canvas" width="200px" height="200px"></canvas>



</body>
</html>

javascript


<script>

    window.onload = function () {

        //顶点着色器程序
        var VSHADER_SOURCE =
            "void main() {" +
            //设置坐标
            "gl_Position = vec4(0.0, 0.0, 0.0, 1.0); " +
            //设置尺寸
            "gl_PointSize = 10.0; " +
            "} ";

        //片元着色器程序
        var FSHADER_SOURCE =
            "void main() {" +
            //设置颜色
            "gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);" +
            "}";
        //获取canvas元素
        var canvas = document.getElementById('canvas');
        //获取绘制webgl绘图上下文
        var gl = canvas.getContext('webgl');
        if (!gl) {
            console.log("Failed");
            return;
        }
        //编译着色器
//        （1）创建Shader（着色器）对象
//        （2）将着色器程序附加到Shader上
//        （3）编译程序
        var vertShader = gl.createShader(gl.VERTEX_SHADER);
        gl.shaderSource(vertShader, VSHADER_SOURCE);
        gl.compileShader(vertShader);

        var fragShader = gl.createShader(gl.FRAGMENT_SHADER);
        gl.shaderSource(fragShader, FSHADER_SOURCE);
        gl.compileShader(fragShader);
        //合并程序
//        （1）创建一个程序对象
//        （2）附加着色器
//        （3）链接着色器
//        （4）使用程序
        var shaderProgram = gl.createProgram();
        gl.attachShader(shaderProgram, vertShader);
        gl.attachShader(shaderProgram, fragShader);
        gl.linkProgram(shaderProgram);
        gl.useProgram(shaderProgram);

        //绘制一个点
        gl.drawArrays(gl.POINTS, 0, 1);
    }

</script>

参考文献

写在最后

  新博客

posted @   坚守一辈子的幸福  阅读(515)  评论(0)  编辑  收藏  举报
编辑推荐：
· AI与.NET技术实操系列：基于图像分类模型对图像进行分类
· go语言实现终端里的倒计时
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语，封装的思维：从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热？
阅读排行：
· 分享一个免费、快速、无限量使用的满血 DeepSeek R1 模型，支持深度思考和联网搜索！
· 25岁的心里话
· 基于 Docker 搭建 FRP 内网穿透开源项目（很简单哒）
· 闲置电脑爆改个人服务器（超详细） #公网映射 #Vmware虚拟网络编辑器
· ollama系列01：轻松3步本地部署deepseek，普通电脑可用
历史上的今天：
2014-08-31 String的点点滴滴
点击右上角即可分享
微信分享提示