当前位置：首页 > news >正文

WebGPU入门初识

news 来源：原创 2025/5/14 17:13:06

什么是 WebGPU？

WebGPU 是一种现代图形 API，旨在取代 WebGL，提供更高性能和更灵活的 GPU 加速能力。它基于 Vulkan、Metal 和 Direct3D 12，为 Web 开发者带来了类似于原生图形 API 的性能和控制力。

与 WebGL 不同，WebGPU 提供了对计算着色器和低级 GPU 操作的直接支持，使开发者能够充分利用 GPU的潜力来处理图形渲染和并行计算任务。

WebGPU 基本概念详解

在 WebGPU 开发中，理解其核心概念至关重要。以下是 WebGPU 的基本概念及相应的实例代码，帮助初学者直观理解。

1. GPU 适配器（GPUAdapter）和设备（GPUDevice）

概念：

GPUAdapter：表示浏览器访问到的可用 GPU，类似于桥梁，连接 Web 应用与底层硬件。
GPUDevice：表示具体的 GPU 设备，用于执行渲染或计算任务。

示例：

const adapter = await navigator.gpu.requestAdapter(); // 获取适配器
const device = await adapter.requestDevice();        // 请求设备
console.log("Adapter:", adapter);
console.log("Device:", device);

2. 管线（Pipeline）

概念：

渲染管线（Render Pipeline）：定义顶点着色器和片元着色器的工作流程。
计算管线（Compute Pipeline）：专用于非图形任务的 GPU 计算。

渲染管线示例：

const pipeline = device.createRenderPipeline({vertex: {module: shaderModule,entryPoint: "vertex_main",},fragment: {module: shaderModule,entryPoint: "fragment_main",targets: [{ format: "bgra8unorm" }],},primitive: {topology: "triangle-list", // 图元类型},
});
console.log("Pipeline Created:", pipeline);

3. 着色器（Shader）

概念：

着色器是运行在 GPU 上的程序，用于处理图形数据。WebGPU 使用 WGSL 编写。
常见的着色器类型：
- 顶点着色器：处理每个顶点的位置。
- 片元着色器：计算像素的颜色。

示例：

const shaderCode = `@vertexfn vertex_main(@location(0) position: vec4<f32>) -> @builtin(position) vec4<f32> {return position; // 顶点位置传递给片元着色器}@fragmentfn fragment_main() -> @location(0) vec4<f32> {return vec4(1.0, 0.0, 0.0, 1.0); // 输出红色}
`;
const shaderModule = device.createShaderModule({ code: shaderCode });
console.log("Shader Module Created:", shaderModule);

4. 命令编码器（Command Encoder）

概念：

用于生成命令缓冲区，将渲染或计算任务发送到 GPU 执行。

示例：

const commandEncoder = device.createCommandEncoder();
const passEncoder = commandEncoder.beginRenderPass({colorAttachments: [{view: context.getCurrentTexture().createView(),loadOp: "clear", // 清除屏幕clearValue: { r: 0.1, g: 0.2, b: 0.3, a: 1.0 }, // 背景色storeOp: "store",}],
});passEncoder.setPipeline(pipeline);
passEncoder.draw(3, 1, 0, 0); // 绘制三角形
passEncoder.end();
device.queue.submit([commandEncoder.finish()]);

5. 缓冲区（Buffer）

概念：

GPU 缓冲区存储顶点数据、索引数据、常量等。
数据以二进制格式存储，传递给着色器。

示例：

const vertices = new Float32Array([0.0,  0.5, // 顶点 1-0.5, -0.5, // 顶点 20.5, -0.5, // 顶点 3
]);const vertexBuffer = device.createBuffer({size: vertices.byteLength,usage: GPUBufferUsage.VERTEX | GPUBufferUsage.COPY_DST,
});
device.queue.writeBuffer(vertexBuffer, 0, vertices);
console.log("Vertex Buffer Created:", vertexBuffer);

6. 纹理（Texture）

概念：

纹理用于存储图像或多维数据，常用于渲染图片或生成复杂效果。

示例：

const texture = device.createTexture({size: [256, 256, 1],format: "rgba8unorm",usage: GPUTextureUsage.RENDER_ATTACHMENT | GPUTextureUsage.TEXTURE_BINDING,
});
console.log("Texture Created:", texture);

WebGPU 基本示例

以下是一个简单的 WebGPU 应用示例，绘制一个彩色的三角形。

HTML 模板

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>WebGPU 三角形</title>
</head>
<body><canvas id="gpuCanvas"></canvas><script src="app.js"></script>
</body>
</html>

JavaScript 实现（`app.js`）

(async () => {// 初始化 GPUconst adapter = await navigator.gpu.requestAdapter();const device = await adapter.requestDevice();const canvas = document.getElementById("gpuCanvas");const context = canvas.getContext("webgpu");context.configure({device: device,format: "bgra8unorm",});// 顶点数据const vertices = new Float32Array([0.0,  0.5, 1.0, 0.0, 0.0, // 顶点 1：红色-0.5, -0.5, 0.0, 1.0, 0.0, // 顶点 2：绿色0.5, -0.5, 0.0, 0.0, 1.0, // 顶点 3：蓝色]);const vertexBuffer = device.createBuffer({size: vertices.byteLength,usage: GPUBufferUsage.VERTEX | GPUBufferUsage.COPY_DST,});device.queue.writeBuffer(vertexBuffer, 0, vertices);// 着色器代码const shaderCode = `@vertexfn vertex_main(@location(0) position: vec2<f32>, @location(1) color: vec3<f32>) -> @builtin(position) vec4<f32> {return vec4(position, 0.0, 1.0);}@fragmentfn fragment_main(@location(1) color: vec3<f32>) -> @location(0) vec4<f32> {return vec4(color, 1.0);}`;const shaderModule = device.createShaderModule({ code: shaderCode });// 渲染管线const pipeline = device.createRenderPipeline({vertex: {module: shaderModule,entryPoint: "vertex_main",buffers: [{arrayStride: 5 * 4, // 每个顶点占 5 个 floatattributes: [{ shaderLocation: 0, offset: 0, format: "float32x2" }, // 位置{ shaderLocation: 1, offset: 2 * 4, format: "float32x3" }, // 颜色],},],},fragment: {module: shaderModule,entryPoint: "fragment_main",targets: [{ format: "bgra8unorm" }],},primitive: { topology: "triangle-list" },});// 渲染const commandEncoder = device.createCommandEncoder();const passEncoder = commandEncoder.beginRenderPass({colorAttachments: [{view: context.getCurrentTexture().createView(),loadOp: "clear",clearValue: { r: 0.1, g: 0.1, b: 0.1, a: 1.0 },storeOp: "store",}],});passEncoder.setPipeline(pipeline);passEncoder.setVertexBuffer(0, vertexBuffer);passEncoder.draw(3, 1, 0, 0); // 绘制三角形passEncoder.end();device.queue.submit([commandEncoder.finish()]);
})();

代码解析

GPU 初始化：
- navigator.gpu.requestAdapter() 请求 GPU 适配器。
- adapter.requestDevice() 获取 GPU 设备。
Canvas 配置：
使用 getPreferredCanvasFormat() 确保兼容性。
顶点数据：
- 包含位置和颜色信息。
- 使用 Float32Array 存储。
着色器编写：
- 顶点着色器处理每个顶点的位置。
- 片元着色器确定像素的颜色。
渲染管线：
定义顶点缓冲区格式和着色器入口。
渲染流程：
- 配置 RenderPass。
- 通过命令编码器将绘图命令提交到 GPU。

输出结果

运行代码后，您将在 Canvas 中看到一个红、绿、蓝三色的三角形。这是 WebGPU 基础应用的一个完整流程。

进一步学习方向

深入了解 WGSL：
学习 WebGPU 的着色器语言，优化渲染效果。
纹理处理：
实现纹理映射，加载外部图片。
计算着色器：
探索 WebGPU 的非图形计算能力。
性能优化：
掌握高效的资源管理和渲染技术。

欢迎各位随时交流~

WebGPU入门初识

什么是 WebGPU？ WebGPU 是一种现代图形 API，旨在取代 WebGL，提供更高性能和更灵活的 GPU 加速能力。它基于 Vulkan、Metal 和 Direct3D 12，为 Web 开发者带来了类似于原生图形 API 的性能和控制力。与 WebGL 不同，Web…...

编程日记 2025/5/14 17:13:06

Go语言基础语法

文章目录 Go语言基础语法一、引言二、基础语法1、变量声明与作用域1.1、全局变量1.2、局部变量1.3、块作用域 2、基本数据类型3、控制流程3.1、条件语句3.2、循环语句 4、函数5、并发编程三、使用示例四、并发编程示例五、变量作用域详解六、总结 Go语言基础语法一、引言 G…...

编程日记 2025/5/15 1:05:33

易基因： BS+ChIP-seq揭示DNA甲基化调控非编码RNA(VIM-AS1)抑制肿瘤侵袭性｜Exp Mol Med

大家好，这里是专注表观组学十余年，领跑多组学科研服务的易基因。肝细胞癌（hepatocellular carcinoma，HCC）早期复发仍然是一个具有挑战性的领域，其中涉及的机制尚未完全被理解。尽管微血管侵犯&#xff08…...

编程日记 2025/5/15 8:03:16

layui动态拼接生成下拉框验证必填项失效问题

利用 jQuery 动态拼接下拉框时，lay-verify"required" 失效了，有以下几种原因。 1. <form></form>标签加入 layui 类，class"layui-form" 。提交按钮上加自动提交，lay-submit ""; 。需…...

编程日记 2025/5/13 21:16:24

Speckly：基于Speckle文档的RAG智能问答机器人

前言 Speckly 是一个基于检索增强生成 (RAG) 技术的智能问答机器人，它能像一位经验丰富的工程师，理解你的问题，并从 Speckle 文档中精准地找到答案。更厉害的是，它甚至可以帮你生成代码片段！🚀 本文将详…...

编程日记 2025/5/15 14:33:45

NodeRed使用心得，实现增删改查等

使用场景介绍在VUE中使用nodeRed实现对节点的增删改查等功能，且储存成功之后下点击时启动对应流程安装与配置 1.安装NodeRed npm install -g --unsafe-perm node-red 安装完成后，你可以通过运行以下命令来启动Node-RED node-red-start2. 配置文件 N…...

编程日记 2025/5/15 14:36:17

万物皆有解法（序）

万物皆有解法（序） 《万物有解》一：解的存在解：可做解释解答，此文引申为原因。可做解除、解围，此文引申为解法、方法。先有事物存于世-what，再有原因为何存-why，再有解法如何除去…...

编程日记 2025/5/4 15:15:02

OpenCV相机标定与3D重建(37)计算两幅图像之间单应性矩阵（Homography Matrix）的函数findHomography()的使用

操作系统：ubuntu22.04 OpenCV版本：OpenCV4.9 IDE:Visual Studio Code 编程语言：C11 算法描述找到两个平面之间的透视变换。 cv::findHomography 是 OpenCV 库中用于计算两幅图像之间单应性矩阵（Homography Matrix）的…...

编程日记 2025/5/15 14:40:17

从虚拟到现实：AI与AR/VR技术如何改变体验经济？

引言：体验经济的崛起在当今消费环境中，产品与服务早已不再是市场竞争的唯一焦点，能够提供深刻感知和独特体验的品牌，往往更能赢得消费者的青睐。这种转变标志着体验经济的崛起。体验经济不仅仅是简单的买卖行为，而是通…...

编程日记 2025/5/15 0:12:35

Linux系统之stat命令的基本使用

Linux系统之stat命令的基本使用一、stat命令介绍二、stat命令帮助2.1 查询帮助信息2.2 stat命令的帮助解释三、stat命令的基本使用3.1 查询文件信息3.2 查看文件系统状态3.3 使用格式化输出3.4 以简洁形式打印信息四、注意事项一、stat命令介绍 stat 命令用于显示文件或文…...

编程日记 2025/5/10 2:03:50

c++ 命名空间

目录目录目录 namespace的定义代码演示先使用全局域，再使用namespace定义出的域命名空间中可以定义变量/函数/类型等命名空间可以嵌套 namespace的使用指定命名空间访问 using将命名空间中某个成员展开展开命名空间中全部成员在c中，由…...

编程日记 2025/5/15 14:39:41

【实验记录】动手实现一个简单的神经网络实验（一）

最近上了“神经网络与深度学习”这门课，有一个自己动手实现调整神经网络模型的实验感觉还挺有记录意义，可以帮我巩固之前学习到的理论知识，所以就打算记录一下。实验大概是使用LeNet（卷积神经网络）对MINIST数据集做图…...

编程日记 2025/5/14 20:38:56

【2024年最新】BilibiliB站视频动态评论爬虫

废话不多说，直接先放git仓库：GitHub - linyuye/Bilibili_crawler: bilibili爬虫，基于selenium获取oid与cookie，request获取api内容〇：概念简述 oid：视频/动态的uuid，b站对于发布内容的通用唯…...

编程日记 2025/5/15 2:22:29

清空DNS 缓存

如果遇到修改了host文件，但是IP和域名的映射有问题的情况，可以尝试刷新DNS缓存。 ipconfig/flushdns win建加R建，然后输入cmd，然后回车然后回车，或者点击确定按钮。出现如下所示标识清空DNS 缓存成功。...

编程日记 2025/5/3 9:04:43

东土智能交通服务器助力北京市车路云一体化建设

背景及意义北京高级别自动驾驶示范区自2020年启动建设，至今已经发展建设到3.0阶段，通州区作为3.0阶段扩建的重点区域之一，扩区建设范围共计约175平方公里，涉及18个属地街镇，涵盖580个路口。作为北京市车路云一体化…...

编程日记 2025/5/15 12:47:44

HarmonyOS NEXT 实战之元服务：静态案例效果---妙语集语

背景： 前几篇学习了元服务，后面几期就让我们开发简单的元服务吧，里面丰富的内容大家自己加，本期案例仅供参考先上本期效果图 ，里面图片自行替换效果图1完整代码案例如下： import { authentication } …...

编程日记 2025/5/10 15:44:15

1.联系人案例 # 导入的模块 from input_util import * import re import csv# 定义一个变量保存文件读取的信息 users {}# 封装读取文件的函数 def reader_file(path_name: str ./python基础/2024-11-15python基础项目/data/a.csv) -> None:try:with open(path_name, enco…...

编程日记 2025/5/14 13:50:47

mysql返回N/A

在写统计图的接口，sql查询一直无数据，给的默认值也没有实现： SELECTifnull( unit.num, 0 ) riskUnitCount,ifnull( EVENT.num, 0 ) riskEventCount,ifnull( measure.num, 0 ) riskMeasureCount FROMtb_companyLEFT JOIN (SELECTrisk.qyid,co…...

编程日记 2025/5/14 11:36:10

C++---------迭代策略与迭代器

一、迭代策略与迭代器迭代器的概念迭代器是一种对象，它提供了一种统一的方式来访问容器（如数组、向量、列表等）中的元素，而不暴露容器的内部结构。迭代器的行为类似于指针，可以用于遍历容器中的元素、修改元素以及…...

编程日记 2025/5/14 1:56:31

深入解析 Oracle 的聚合函数 ROLLUP

目录深入解析 Oracle 的聚合函数 ROLLUP一、ROLLUP 函数概述二、ROLLUP 函数语法三、ROLLUP 实例详解（一）基础分组聚合（二）引入 ROLLUP 函数（三）ROLLUP 与 NULL 值（四）多列复杂分组…...

编程日记 2025/5/14 21:15:35

kipotix4靶机实战

信息收集 1.判断靶机ip 原理：开靶机之前nmap扫一次网段，再开靶机之后扫一次，查看多出来的ip就是靶机ip ip192.168.98.1742.判断端口服务，系统版本 a.确定端口 b.-p指定端口进一步收集 c.信息筛选 1.端口：22,80,139,…...

编程日记 2025/5/12 18:00:18

Java中处理if-else的几种高级方法

前言在我看来多写几个if-else没啥大不了的，但是就是看起来没啥逼格，领导嫌弃。我根据开发的经历写几个不同的替代方法一、枚举法替代我先前写了一篇文章，可以去看看。通过枚举替换if-else语句的解决方案_枚举代替if else c语言-CSDN博…...

编程日记 2025/5/14 23:25:41

LaTeX 是一种基于标记的排版系统，广泛用于创建高质量的文档，特别是在需要复杂数学公式、表格、文献引用等的场景中

LaTeX 是一种基于标记的排版系统，广泛用于创建高质量的文档，特别是在需要复杂数学公式、表格、文献引用等的场景中。以下是关于 LaTeX 的详细解释： 1. LaTeX 的基本概念本质：LaTeX 是基于 TeX 的排版系统，提供了更高…...

编程日记 2025/5/14 17:27:17

Go入门篇：（一）golang的安装和编辑工具安装

一、前言最近我有幸接触到Go语言，深入了解后，发现go语言确实有很多让人惊叹的地方。作为一个有着多年Java编程经验的程序员，我深深地被它所吸引，并且决定记录下我的学习之路，以便与大家分享我的经验和感悟。与Java不同，Go语言的语法和运行效率都非常高，特别是对于并…...

编程日记 2025/5/14 10:57:25

【10】Selenium+Python UI自动化测试邮件发送测试报告（某积载系统实例-04）

测试报告需要发送给相关人员，但每次都要在report目录下去复制太麻烦，可以使用邮件模块自动将生成的报告发送给相关人员 1、新增utils文件夹，用于存放工具文件在utils下新增sendmail.py文件代码 sendmail.py import smtplib from email.…...

编程日记 2025/5/12 0:10:18

Playwright爬虫xpath获取技巧

示例一 <button class"MuiButtonBase-root MuiButton-root MuiLoadingButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeLarge MuiButton-containedSizeLarge MuiButton-colorPrimary MuiButton-fullWidth MuiButton-root MuiLoadingButton…...

编程日记 2025/5/12 21:21:44

运算符 - 算术、关系、逻辑运算符

引言在编程中，运算符是用于执行特定操作的符号。C 提供了多种类型的运算符，包括算术运算符、关系运算符和逻辑运算符等。理解这些运算符及其用法对于编写高效且无误的代码至关重要。本文将详细介绍 C 中的这三种基本运算符，并通过实例帮助读…...

编程日记 2025/5/13 23:48:04

中关村科金外呼机器人智能沟通破解营销难题

当今，传统的营销方式在效率、成本控制、客户管理等方面逐渐显现出局限性，难以满足现代企业的需求。如何提升营销效率、降低运营成本、有效管理客户会员，成为企业的难题。中关村科金外呼机器人通过智能化沟通技术，为企业提供了一站…...

编程日记 2025/5/13 17:47:22

css绘制圆并绘制圆的半径

<div class"item1"></div>.item1 {position: relative;width: 420px;height: 420px;border-radius: 50%; /* 圆形 */color: white; /* 文本颜色 */background-color: rgba(154, 227, 36, 0.4); } .item1::before {content: "";position: absol…...

编程日记 2025/5/12 4:36:28

实现类似gpt 打字效果

1. css的动画（animation) css中实现动画有两种方式：transition过渡动画、 animation自定义动画。具体的可以看MDN链接：https://developer.mozilla.org/zh-CN/docs/Web/CSS/animation 使用keyframes自定义关键帧动画并未其命名使用自定义动…...

编程日记 2025/5/14 13:49:38

【乐企文件生成工程】根据特定要素动态选择需要生成的发票板式文件实现

乐企版式文件生成工程，涉及到多个票种，不乏特殊票种的生成，如果每个特殊票种都单独写逻辑，那整个代码写起来体量就不得了，如何实现代码逻辑的同时也更优雅的实现代码扩展性呢，您接着往下看。使用设计模式工厂模式 1、定义接口InvoiceFileService public interface Inv…...

编程日记 2025/5/11 21:10:02

near-synonym反义词生成(2)：Prompt +Bert-MLM(FT)

near-synonym之反义词生成方法二 near-synonym, 中文反义词/近义词/同义词(antonym/synonym)工具包. 方法一为(neg_antonym): Word2vec -> ANN -> NLI -> Length 方法二为(mlm_antonym): Prompt Bert-MLM(FT) Beam-Search 项目地址 github: https://github.com/yon…...

编程日记 2025/5/14 5:53:38

dockfile 配置 /etc/apt/source.list.d/debian.list 清华镜像

docker:3.12.7 镜像使用的是 debian 系统，比 ubuntu 更轻量。debian 系统内，apt 镜像源列表位于 /etc/apt/source.list.d/debian.list（作为对比，ubuntu 的镜像列表位于 /etc/apt/source.list，二者语法相同）…...

编程日记 2025/5/13 23:10:26

DAY38|动态规划Part06|LeetCode:322. 零钱兑换、279.完全平方数、139.单词拆分

目录 LeetCode:322. 零钱兑换基本思路 C代码 LeetCode:279.完全平方数 C代码 LeetCode:139.单词拆分基本思路 C代码 LeetCode:322. 零钱兑换力扣题目链接文字讲解：LeetCode:322. 零钱兑换视频讲解：动态规划之完全背包，装满背包最…...

编程日记 2025/5/10 1:37:55

Spring事务回滚

Transactional注解 Transactional作用：就是在当前这个方法执行开始之前来开启事务，方法执行完毕之后提交事务。如果在这个方法执行的过程当中出现了异常，就会进行事务的回滚操作。 Transactional注解：我们一般会在业务层当中来控制…...

编程日记 2025/5/7 15:08:36

【目标跟踪】checkpoint文件到底是什么?

说实话，我一直决定计算机视觉是个很玄的东西，里面的很多东西都是看了概念之后云里雾里，今天就把我复现代码时遇到的不懂得讲一讲——checkpoint文件是个啥？ checkpoint文件顾名思义就是一个模型检查点文件，用于保存训练…...

编程日记 2025/5/10 8:03:54

hiprint结合vue2项目实现静默打印详细使用步骤

代码地址是：vue-plugin-hiprint: hiprint for Vue2/Vue3 ⚡打印、打印设计、可视化设计器、报表设计、元素编辑、可视化打印编辑本地安装包地址：electron-hiprint 发行版 - Gitee.com 1、先安装hipint安装包在本地 2、项目运行npm（socket.…...

编程日记 2025/5/13 2:01:58

apt和apt-get软件包管理工具-debian

apt 和 apt-get 是在基于Debian的Linux发行版（如Ubuntu）中使用的两个软件包管理工具，它们都属于APT（Advanced Package Tool）的前端工具，用于管理软件包的安装、更新、升级和删除。以下是它们的特性和一些比…...

编程日记 2025/5/13 10:14:44

小程序租赁系统开发的优势与实践探索

内容概要小程序租赁系统开发正在引起广泛关注，特别是在数字化快速发展的今天。很多企业开始意识到，小程序不仅能为他们带来更多的客户，还能极大地提高管理效率。借助小程序，用户在租赁时可以更加方便地浏览和选择产品&#xff0…...

编程日记 2025/4/11 0:52:16

sheng的学习笔记-AI-模型评估-留出法、交叉验证法、自助法

Ai目录：sheng的学习笔记-AI目录-CSDN博客评估方法： 数据集可以分为训练集，交叉验证集，测试集。训练集相当于自己做作业，验证集相当于考试测试一下自己的实力，测试集就是真刀真枪的干（当你…...

编程日记 2025/5/14 0:07:58

【Unity3D】ECS入门学习（六）状态组件 ISystemStateComponentData

当需要获知组件是否被销毁时，ECS是没有回调告知的，因此可以将组件继承于ISystemStateComponentData接口，这样即使组件的实体被销毁了，该组件本身是不会消失的，所以可以通过在组件实体销毁后，去设置状态组件…...

编程日记 2025/5/10 4:03:39

DVWA靶场第三关 CSRF

CSRF的中文叫：”跨站请求攻击“，它是通过仿照某一个特殊的网页（重置密码）来进行诱惑性攻击。难度（low级） 审计代码： <?phpif( isset( $_GET[ Change ] ) ) {// Get input$pass_new $_GE…...

编程日记 2025/5/12 18:29:54

工作流审批功能的一些概念

1. 引言在当今数字化时代，企业与组织的运营效率在很大程度上依赖于高效、精准的工作流审批系统。随着业务日益复杂且多样化，审批流程变得愈加细致和灵活。一个完善的工作流审批系统不仅能确保任务在组织内部有序流转、协调各方资源，还能实现…...

编程日记 2025/5/10 16:02:00

深度学习与图像处理（国产深度学习框架——飞桨官方指定教材）

计算机视觉从小白到大师之路《深度学习与图像处理（PaddlePaddle版）》这一本就够了 1.引言随着人工智能技术的飞速发展，各行各业对深度学习、图像处理相关领域的人才需求日益迫切。本书旨在通过系统的理论讲解与丰富的实战案例&#xff0…...

编程日记 2025/5/11 21:11:25

音视频入门知识（二）、图像篇

⭐二、图像篇视频基本要素：宽、高、帧率、编码方式、码率、分辨率其中码率的计算：码率(kbps)＝文件大小(KB)＊8／时间(秒)，即码率和视频文件大小成正比 YUV和RGB可相互转换 ★YUV（原始数据&am…...

编程日记 2025/5/9 23:31:03

计算机网络——期末复习（3）4-6章考试重点

第四章根据IPv4第1个十进制数值判断，127以下为A类，128~191为B类，192~223为C类不能分配给主机或路由器接口的：A类网络号0和127，主机号全为0或全为1私有地址（Private IP Address）是指一类专门保…...

编程日记 2025/5/12 5:08:59

openfeign自动将Boolean默认为false

最近发现项目服务间，通过openfeign调用API时，为null的Boolean类型，接收端反系列化后变为false了，经查发现是通用组件中做了处理，特记录下。主要是设置了这个 SerializerFeature.WriteNullBooleanAsFalse Bean Cond…...

编程日记 2025/5/9 23:30:08

如何实现底部导航栏

文章目录 1 概念介绍2 使用方法3 示例代码我们在上一章回中介绍了TextField Widget,本章回中将介绍BottomNavigationBar Widget。闲话休提，让我们一起Talk Flutter吧。 1 概念介绍我们在本章回中将介绍一个新的Widget:BottomNavigationBar，它就是我们经常在App中看到了底部…...

编程日记 2025/5/12 10:26:16

【深度学习基础|pip安装】pip 安装深度学习库常见错误及解决方案，附案例。

【深度学习基础|pip安装】pip 安装深度学习库常见错误及解决方案，附案例。【深度学习基础|pip安装】pip 安装深度学习库常见错误及解决方案，附案例。文章目录【深度学习基础|pip安装】pip 安装深度学习库常见错误及解决方案，附案例。1. 错…...

编程日记 2025/5/12 18:00:25

org.apache.zookeeper.server.quorum.QuorumPeerMain

QuorumPeerMain源代码 package org.apache.zookeeper.server.quorum;import java.io.IOException; import javax.management.JMException; import javax.security.sasl.SaslException; import org.apache.yetus.audience.InterfaceAudience; import org.apache.zookeeper.audi…...

编程日记 2025/5/13 18:29:06