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

ArcGIS JSAPI 高级教程 - ArcGIS Maps SDK for JavaScript - 原生代码实现动态扩散效果

ArcGIS JSAPI 高级教程 - ArcGIS Maps SDK for JavaScript - 原生代码实现动态扩散效果

    • 核心代码
    • 完整代码:
    • 在线示例

在这里插入图片描述

ArcGIS Maps SDK for JavaScript 从 4.29 开始增加 RenderNode 类,可以添加数据以及操作 FBO(ManagedFBO)

通过操作 FBO,可以通过后处理实现很多效果,官方提供了几个示例,感兴趣可以看看。

本文介绍一下通过 FBO,实现动态扩散效果效果。

本文包括核心代码、完整代码以及在线示例。


核心代码

介绍一下原理:首先通过深度值和 uv,获取世界坐标,定义中心点,

将世界坐标投影到中心点的平面上,并根据点到平面的距离与指定半径的关系决定是否应用混合效果,

混合因子依据距离与半径的差值计算,实现平滑过渡,实现扩散效果。

并且控制混合效果的半径由 u_radius 变量决定,混合颜色由 test_color 变量定义。

#version 300 esprecision mediump float;
out mediump vec4 fragColor;in vec2 uv;// 页面颜色纹理
uniform sampler2D colorTex;
// 深度纹理
uniform sampler2D depthTex;// 相机视图矩阵
uniform mat4 u_viewMatrix;
// 相机投影矩阵
uniform mat4 u_projectionMatrix;
// 相机逆投影矩阵
uniform mat4 u_inverseProjectionMatrix;// 相机远近截面
uniform vec2 nearFar;// 动态颜色
uniform vec4 test_color;
// 扫描半径
uniform float u_radius;// 定义光线和观察者的世界位置
uniform vec3[2] u_lightWorldPosition;// 线性化深度
float linearizeDepth(float depth) {float depthNdc = depth * 2.0 - 1.0;return (2.0 * nearFar[0] * nearFar[1]) / (depthNdc * (nearFar[1] - nearFar[0]) - (nearFar[1] + nearFar[0]));
}// 获取深度值
float linearDepth(vec2 uv) {ivec2 iuv = ivec2(uv * vec2(textureSize(depthTex, 0)));return texelFetch(depthTex, iuv, 0).r;
}// 深度值获取坐标
vec4 getPositionByDepth(vec2 uv) {// 获取深度值float depth = linearDepth(uv);// 将深度值转换为视图空间中的Z值float viewZ = linearizeDepth(depth);// 计算裁剪空间中的W值float clipW = u_projectionMatrix[2][3] * viewZ + u_projectionMatrix[3][3];// 将纹理坐标和深度值转换为NDC坐标vec3 ndcPosition = vec3(uv, depth) * 2.0 - 1.0;// 将NDC坐标转换为裁剪坐标vec4 clipPosition = vec4(ndcPosition, 1.0) * clipW;// 将裁剪坐标变换回视图坐标vec4 viewPos = u_inverseProjectionMatrix * clipPosition;// 进行透视除法,将视图坐标转换为齐次坐标viewPos /= viewPos.w;// 返回视图空间中的位置return viewPos;
}// 将一个点投影到一个平面上。
vec3 pointProjectOnPlane(in vec3 planeNormal, in vec3 planeOrigin, in vec3 point) {// 计算从平面原点到点的向量vec3 v01 = point - planeOrigin;// 计算该向量与平面法线的点积float d = dot(planeNormal, v01);// 将点投影到平面上return (point - planeNormal * d);
}void main() {// 从颜色纹理中获取当前像素的颜色vec4 color = texture(colorTex, uv);// 将获取的颜色设置为片段颜色fragColor = color;// 转换坐标 start ========================================================================// 计算第一个光源位置在视图空间中的位置vec4 center0 = u_viewMatrix * vec4(u_lightWorldPosition[0], 1.0);center0 /= center0.w;// 计算第二个光源位置在视图空间中的位置vec4 center500 = u_viewMatrix * vec4(u_lightWorldPosition[1], 1.0);center500 /= center500.w;// 计算两个光源之间的法线,用于后续的投影计算vec3 circleNormal = normalize(center500.xyz - center0.xyz);// 转换坐标 end ========================================================================// 获取当前像素在视图空间中的位置vec4 viewPos = getPositionByDepth(uv);// 将视图空间中的点投影到一个平面上// 这个平面由扫描平面法线和扫描中心定义vec3 prjOnPlane = pointProjectOnPlane(circleNormal,center0.xyz,viewPos.xyz);// 计算投影点到扫描中心的距离float dis = length(prjOnPlane.xyz - center0.xyz);// 如果距离小于指定的半径,应用混合效果if (dis < u_radius) {// 计算混合因子float f = 1.0 - abs(u_radius - dis) / u_radius;f = pow(f, 4.0);// 根据混合因子混合当前颜色和测试颜色fragColor.rgb = mix(color.rgb, test_color.rgb/255.0, f);}
}

完整代码:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="utf-8"/><meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/><title>Custom RenderNode - 扩散扫描效果 | Sample | ArcGIS Maps SDK for JavaScript 4.29</title><script type="text/javascript" src="https://openlayers.vip/examples/resources/dat_gui/dat.gui.js"></script><link rel="stylesheet" type="text/css" href="https://openlayers.vip/examples/resources/dat_gui/dat.gui.css"/><link rel="stylesheet" href="https://openlayers.vip/arcgis_api/4.30/esri/themes/light/main.css"/><script src="https://openlayers.vip/arcgis_api/4.30/init.js"></script><script src="https://openlayers.vip/examples/resources/renderCommon.js"></script><script type="module" src="https://openlayers.vip/arcgis_api/calcite-components/2.8.1/calcite.esm.js"></script><link rel="stylesheet" type="text/css" href="https://openlayers.vip/arcgis_api/calcite-components/2.8.1/calcite.css" /><style>html,body,#viewDiv {padding: 0;margin: 0;height: 100%;width: 100%;}</style>
</head>
<body>
<script>require(["esri/Map", "esri/views/SceneView", "esri/views/3d/webgl/RenderNode","esri/Graphic", "esri/views/3d/webgl","esri/geometry/SpatialReference","esri/widgets/Home","esri/layers/IntegratedMesh3DTilesLayer",], function (Map,SceneView,RenderNode,Graphic,webgl,SpatialReference,Home,IntegratedMesh3DTilesLayer,) {// 地面点const point = {type: "point", // autocasts as new Point()x: 114.17494271319552,y: 22.29474643685136,z: 1,viewH: 3000,};// 空中点const pointSky = {type: "point", // autocasts as new Point()x: 114.17494271319552,y: 22.29474643685136,z: 500};const {map, view} = initMap({Map, SceneView, Home},undefined,point);const layer = new IntegratedMesh3DTilesLayer({url: "http://openlayers.vip/cesium/3dtile/xianggang_1.1/tileset.json",title: "Utrecht Integrated Mesh 3D Tiles"});view.map.add(layer);const markerSymbol = {type: "simple-marker", // autocasts as new SimpleMarkerSymbol()color: [226, 119, 40],outline: {// autocasts as new SimpleLineSymbol()color: [255, 255, 255],width: 2}};// 创建点对象const pointGraphic = new Graphic({geometry: point,symbol: markerSymbol});view.graphics.add(pointGraphic);// 平铺点数据const points = [point.x, point.y, point.z,pointSky.x, pointSky.y, pointSky.z,];view.when(() => {// 世界坐标const localOriginRender = webgl.toRenderCoordinates(view,points,0,SpatialReference.WGS84,new Float32Array(points.length),0,(points.length) / 3,);// Derive a new subclass from RenderNode called LuminanceRenderNodeconst LuminanceRenderNode = RenderNode.createSubclass({constructor: function (param) {param = {...param}// consumes and produces define the location of the the render node in the render pipelinethis.consumes = {required: ["composite-color"]};this.produces = "composite-color";// 半径this.test_float = 500;// 持续时间this.test_brightness = 2000;// 颜色this.test_color = [0, 255, 255, 0.1];// 记录时间this._time = (new Date()).getTime();this.point = param.point;},// Ensure resources are cleaned up when render node is removeddestroy() {this.shaderProgram && this.gl?.deleteProgram(this.shaderProgram);this.positionBuffer && this.gl?.deleteBuffer(this.positionBuffer);this.vao && this.gl?.deleteVertexArray(this.vao);},properties: {// Define getter and setter for class member enabledenabled: {get: function () {return this.produces != null;},set: function (value) {// Setting produces to null disables the render nodethis.produces = value ? "composite-color" : null;this.requestRender();}}},render(inputs) {// We need color texture from the composite render targetconst input = inputs.find(({name}) => name === "composite-color");const color = input.getTexture();// Acquire the composite framebuffer object, and bind framebuffer as current targetconst output = this.acquireOutputFramebuffer();const gl = this.gl;const depth = input.getTexture(gl.DEPTH_STENCIL_ATTACHMENT);// Clear newly acquired framebuffergl.clearColor(0, 0, 0, 0);gl.colorMask(true, true, true, true);gl.clear(gl.COLOR_BUFFER_BIT);// 激活透明activeOpacity(gl);// Prepare custom shaders and geometry for screenspace renderingthis.ensureShader(gl);this.ensureScreenSpacePass(gl);// Bind custom programgl.useProgram(this.shaderProgram);// Use composite-color render target to be modified in the shader// 绑定颜色纹理gl.activeTexture(gl.TEXTURE0);gl.bindTexture(gl.TEXTURE_2D, color.glName);gl.uniform1i(this.textureUniformLocation, 0);// 绑定深度纹理gl.activeTexture(gl.TEXTURE2);gl.bindTexture(gl.TEXTURE_2D, depth.glName);gl.uniform1i(this.depthTextureUniformLocation, 2);gl.uniform2fv(this.nearFarUniformLocation, [this.camera.near, this.camera.far]);gl.uniform1f(this.scanRadiusUniformLocation,this.test_float * (((new Date()).getTime() - this._time) % this.test_brightness) / this.test_brightness);gl.uniform4fv(this.textureUniformTestColor, this.test_color);gl.uniform3fv(this.textureUniformLightWorldPosition, this.point);// 激活相机矩阵activeMatrix(this);// Issue the render call for a screen space render passgl.bindVertexArray(this.vao);gl.drawArrays(gl.TRIANGLES, 0, 3);// use depth from input on output framebufferoutput.attachDepth(input.getAttachment(gl.DEPTH_STENCIL_ATTACHMENT));this.requestRender();return output;},shaderProgram: null,textureUniformLocation: null,depthTextureUniformLocation: null,positionLocation: null,vao: null,positionBuffer: null,// Setup screen space filling triangleensureScreenSpacePass(gl) {if (this.vao) {return;}this.vao = gl.createVertexArray();gl.bindVertexArray(this.vao);this.positionBuffer = gl.createBuffer();gl.bindBuffer(gl.ARRAY_BUFFER, this.positionBuffer);const vertices = new Float32Array([-1.0, -1.0, 3.0, -1.0, -1.0, 3.0]);gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);gl.vertexAttribPointer(this.positionLocation, 2, gl.FLOAT, false, 0, 0);gl.enableVertexAttribArray(this.positionLocation);gl.bindVertexArray(null);},// Setup custom shader programsensureShader(gl) {if (this.shaderProgram != null) {return;}// The vertex shader programconst vshader = `#version 300 esin vec2 position;out vec2 uv;void main() {uv = position * 0.5 + vec2(0.5);gl_Position = vec4(position, 0.0, 1.0);}`;// The fragment shader program applying a greyscsale conversionconst fshader = `#version 300 esprecision mediump float;out mediump vec4 fragColor;in vec2 uv;// 页面颜色纹理uniform sampler2D colorTex;// 深度纹理uniform sampler2D depthTex;// 相机视图矩阵uniform mat4 u_viewMatrix;// 相机投影矩阵uniform mat4 u_projectionMatrix;// 相机逆投影矩阵uniform mat4 u_inverseProjectionMatrix;// 相机远近截面uniform vec2 nearFar;// 动态颜色uniform vec4 test_color;// 扫描半径uniform float u_radius;// 定义光线和观察者的世界位置uniform vec3[2] u_lightWorldPosition;// 线性化深度float linearizeDepth(float depth) {float depthNdc = depth * 2.0 - 1.0;return (2.0 * nearFar[0] * nearFar[1]) / (depthNdc * (nearFar[1] - nearFar[0]) - (nearFar[1] + nearFar[0]));}// 获取深度值float linearDepth(vec2 uv) {ivec2 iuv = ivec2(uv * vec2(textureSize(depthTex, 0)));return texelFetch(depthTex, iuv, 0).r;}// 深度值获取坐标vec4 getPositionByDepth(vec2 uv) {// 获取深度值float depth = linearDepth(uv);// 将深度值转换为视图空间中的Z值float viewZ = linearizeDepth(depth);// 计算裁剪空间中的W值float clipW = u_projectionMatrix[2][3] * viewZ + u_projectionMatrix[3][3];// 将纹理坐标和深度值转换为NDC坐标vec3 ndcPosition = vec3(uv, depth) * 2.0 - 1.0;// 将NDC坐标转换为裁剪坐标vec4 clipPosition = vec4(ndcPosition, 1.0) * clipW;// 将裁剪坐标变换回视图坐标vec4 viewPos = u_inverseProjectionMatrix * clipPosition;// 进行透视除法,将视图坐标转换为齐次坐标viewPos /= viewPos.w;// 返回视图空间中的位置return viewPos;}// 将一个点投影到一个平面上。vec3 pointProjectOnPlane(in vec3 planeNormal, in vec3 planeOrigin, in vec3 point) {// 计算从平面原点到点的向量vec3 v01 = point - planeOrigin;// 计算该向量与平面法线的点积float d = dot(planeNormal, v01);// 将点投影到平面上return (point - planeNormal * d);}void main() {// 从颜色纹理中获取当前像素的颜色vec4 color = texture(colorTex, uv);// 将获取的颜色设置为片段颜色fragColor = color;// 转换坐标 start ========================================================================// 计算第一个光源位置在视图空间中的位置vec4 center0 = u_viewMatrix * vec4(u_lightWorldPosition[0], 1.0);center0 /= center0.w;// 计算第二个光源位置在视图空间中的位置vec4 center500 = u_viewMatrix * vec4(u_lightWorldPosition[1], 1.0);center500 /= center500.w;// 计算两个光源之间的法线,用于后续的投影计算vec3 circleNormal = normalize(center500.xyz - center0.xyz);// 转换坐标 end ========================================================================// 获取当前像素在视图空间中的位置vec4 viewPos = getPositionByDepth(uv);// 将视图空间中的点投影到一个平面上// 这个平面由扫描平面法线和扫描中心定义vec3 prjOnPlane = pointProjectOnPlane(circleNormal,center0.xyz,viewPos.xyz);// 计算投影点到扫描中心的距离float dis = length(prjOnPlane.xyz - center0.xyz);// 如果距离小于指定的半径,应用混合效果if (dis < u_radius) {// 计算混合因子float f = 1.0 - abs(u_radius - dis) / u_radius;f = pow(f, 4.0);// 根据混合因子混合当前颜色和测试颜色fragColor.rgb = mix(color.rgb, test_color.rgb/255.0, f);}}`;this.shaderProgram = initWebgl2Shaders(gl, vshader, fshader);this.nearFarUniformLocation = gl.getUniformLocation(this.shaderProgram, "nearFar");this.textureUniformLocation = gl.getUniformLocation(this.shaderProgram, "colorTex");this.depthTextureUniformLocation = gl.getUniformLocation(this.shaderProgram, "depthTex");this.textureUniformTestColor = gl.getUniformLocation(this.shaderProgram, "test_color");this.textureUniformLightWorldPosition =gl.getUniformLocation(this.shaderProgram, "u_lightWorldPosition");this.scanRadiusUniformLocation = gl.getUniformLocation(this.shaderProgram, 'u_radius');this.positionLocation = gl.getAttribLocation(this.shaderProgram, "position");}});// Initializes the new custom render node and connects to SceneViewconst luminanceRenderNode = new LuminanceRenderNode({view, point:localOriginRender});var gui = new dat.GUI();gui.add(luminanceRenderNode, 'test_float', 0, 1000).name('扫描半径');gui.add(luminanceRenderNode, 'test_brightness', 0, 4000).name('持续时间');var colorController = gui.addColor(luminanceRenderNode, 'test_color').name('颜色');// Toggle button to enable/disable the custom render nodeconst renderNodeToggle = document.getElementById("renderNodeToggle");renderNodeToggle.addEventListener("calciteSwitchChange", () => {luminanceRenderNode.enabled = !luminanceRenderNode.enabled;});});});
</script>
<calcite-block open heading="Toggle Render Node" id="renderNodeUI"><calcite-label layout="inline">Color<calcite-switch id="renderNodeToggle" checked></calcite-switch>Grayscale</calcite-label>
</calcite-block>
<div id="viewDiv"></div>
</body>
</html>

在这里插入图片描述


在线示例

ArcGIS Maps SDK for JavaScript 在线示例:原生代码实现动态扩散效果

相关文章:

ArcGIS JSAPI 高级教程 - ArcGIS Maps SDK for JavaScript - 原生代码实现动态扩散效果

ArcGIS JSAPI 高级教程 - ArcGIS Maps SDK for JavaScript - 原生代码实现动态扩散效果 核心代码完整代码&#xff1a;在线示例 ArcGIS Maps SDK for JavaScript 从 4.29 开始增加 RenderNode 类&#xff0c;可以添加数据以及操作 FBO&#xff08;ManagedFBO&#xff09;&#…...

Java 设计模式-代理模式

目录 概述 一. 什么是代理模式 1. 举例说明 二. 代理模式作用 1. 保护代理 2. 增强功能 3. 代理交互 4. 远程代理&#xff1a; 三. 代理模式3个角色 四. 静态代理 1. 代码示例&#xff1a; 五. JDK动态代理 1. 代码示例&#xff1a; 六. CGLIB 动态代理 1.代码示…...

CTF靶场之BUUCTF介绍

最后开始关注CTF&#xff0c;我们先了解一下什么CTF:CTF&#xff08;Capture The Flag&#xff09;中文一般译作夺旗赛&#xff0c;在网络安全领域中指的是网络安全技术人员之间进行技术竞技的一种比赛形式,最后以夺取FLAG为成功。 从网上找了一个免费的靶场——BUUCTF&#xf…...

学会分析问题,画出分析图,解释问题过程,找出规律 ;整数数组分为左右2个部分,左边位奇数右边偶数

// 整数数组左边是奇数右边是偶数.cpp : Defines the entry point for the console application. //#include "stdafx.h" #include<stdio.h> void swap(int& a,int& b) {int tempa;ab;btemp; } int main(int argc, char* argv[]) {int a[7]{1,2,3,4,5,…...

数学基础 -- 线性代数正交多项式之勒让德多项式展开推导

勒让德多项式展开的详细过程 勒让德多项式是一类在区间 [ − 1 , 1 ] [-1, 1] [−1,1] 上正交的多项式&#xff0c;可以用来逼近函数。我们可以将一个函数表示为勒让德多项式的线性组合。以下是如何推导勒让德多项式展开系数 a n a_n an​ 的详细过程。 1. 勒让德展开的基本…...

Redis实战宝典:从主从模式、哨兵模式、集群模式一步步理解Redis集群

目录标题 Redis 集群的三种模式主从复制主从复制概念主从复制原理主从复制优缺点 哨兵集群哨兵概念哨兵功能下线判断主库选举故障转移哨兵模式优缺点 Cluser 集群Redis 集群的数据分片 Redis 集群的三种模式 在生产环境中&#xff0c;我们使用 Redis 通常采用集群模式&#xf…...

828华为云征文|华为云Flexus X搭建借贷管理系统、二次开发借贷小程序 前端源码uniapp

在华为云828 B2B企业节的盛宴中&#xff0c;Flexus X实例以其卓越的算力性能和灵活的资源配置脱颖而出。对于追求极致性能、渴望在借贷管理、电商交易等场景中脱颖而出的您来说&#xff0c;Flexus X无疑是最佳拍档。搭载创新加速引擎&#xff0c;让您的自建MySQL、Redis、Nginx…...

网站安全需求分析与安全保护工程

网站安全威胁与需求分析 网站安全概念 网站&#xff1a;是基于B/S技术架构的综合信息服务平台&#xff0c;主要提供网页信息及业务后台对外接口服务。 网站安全性&#xff1a; 机密性&#xff1a;网站信息及相关数据不被授权查看或泄露完整性&#xff1a;网站信息及数据不能…...

后谷歌时代

每周跟踪AI热点新闻动向和震撼发展 想要探索生成式人工智能的前沿进展吗&#xff1f;订阅我们的简报&#xff0c;深入解析最新的技术突破、实际应用案例和未来的趋势。与全球数同行一同&#xff0c;从行业内部的深度分析和实用指南中受益。不要错过这个机会&#xff0c;成为AI领…...

【CMake编译报错小复盘】CMAKE_CUDA_ARCHITECTURES,CMake version,GCC version问题

今天在写大模型量化推理框架时遇到了一些编译上的错误&#xff0c;简单复盘一下问题和解决方案&#xff1a; 问题1&#xff1a;CMAKE_CUDA_ARCHITECTURES 报错信息&#xff1a; CMake Error: CMAKE_CUDA_ARCHITECTURES must be non-empty if set cmake和cuda相关的报错通常都…...

PMP--一、二、三模--分类--14.敏捷--技巧--DoDDoR

文章目录 技巧DoD&DoR 二模14.敏捷--术语表--完成的定义DoD--Definition of Done--是指一个项目什么时候可以被认为是“完成”的标准&#xff0c;它可以包括各种质量和功能的具体要求。--它是团队需要满足的所有标准的核对单&#xff0c;只有可交付成果满足该核对单才能视为…...

【大数据】如何读取多个Excel文件并计算列数据的最大求和值

导语&#xff1a; 在数据分析和处理中&#xff0c;我们经常需要从多个Excel文件中提取数据并进行计算。本文将带您通过一个实用的Python教程&#xff0c;学习如何读取D盘目录下特定文件夹内的多个Excel文件&#xff0c;并计算特定列数据的最大求和值。 文章目录 一、准备工作二…...

【运维项目经历|043】上云项目-服务从物理机迁移到AWS云服务器

🍁博主简介: 🏅云计算领域优质创作者 🏅2022年CSDN新星计划python赛道第一名 🏅2022年CSDN原力计划优质作者 🏅阿里云ACE认证高级工程师 ​ 🏅阿里云开发者社区专家博主 💊交流社区:CSDN云计算交流社区欢迎您的加入! 文章目录 项目名称项目背景项目目标项目成…...

【OpenCV】灰度化和二值化处理图像

文章目录 1. 图像灰度化处理对比2. 代码示例3. 二值化处理 1. 图像灰度化处理对比 2. 代码示例 #include <opencv2/opencv.hpp> using namespace cv;int main() {Mat currentImage imread("path_to_image.jpg"); // 读取彩色图像Mat grayImage;// 将彩色图像…...

【生命不息,动出奇迹!】多系统萎缩患者必看

亲爱的朋友们&#xff0c;当我们面对生活的挑战&#xff0c;尤其是像多系统萎缩&#xff08;MSA&#xff09;这样的复杂疾病时&#xff0c;保持乐观与积极&#xff0c;寻找适合自己的锻炼方式显得尤为重要&#xff01;&#x1f4aa; MSA虽然会影响身体的多个系统&#xff0c;包…...

Verilog FPGA 仿真 控制任务

在Verilog仿真中&#xff0c;我们可以使用一些控制语句和系统任务来管理仿真过程。这些语句和任务可以帮助我们控制仿真的进行并输出必要的信息。 1. $stop&#xff1a;这是一个系统任务&#xff0c;用于停止运行仿真。在ModelSim中&#xff0c;可以继续仿真。 2. $stop(n)&…...

在Vision Pro上实现五子棋、益智休闲游戏:一个可二次开发的框架

苹果Vision Pro平台的推出,空间计算技术迎来了新的发展机遇。在这一背景下,物流游戏(Logistics Game)作为一个为Vision Pro平台量身打造的空间计算战略游戏,不仅展示了空间计算的魅力,也为开发者提供了一个可参考的框架。本文将介绍物流游戏的核心玩法,并总结其开发过程…...

使用 `Vitesse Uni App` 创建微信小程序并配置 uview-plus 和 alovajs

使用 Vitesse Uni App 创建微信小程序 Vitesse Uni App&#xff1a;https://vitesse-docs.netlify.app/ UI&#xff1a;https://uview-plus.jiangruyi.com/components/intro.html 编辑器&#xff1a;VScode 安装 Volar&#xff08;Vue Offices&#xff09;插件 创建项目 pnpm …...

C#迭代器和接口IEnumerable,IEnumerator

一.迭代器 学过C的都知道&#xff0c;迭代器是STL中的一个类&#xff0c;用来遍历容器。 vector<int>::iterator iter; for (iter v1.begin(); iter ! v1.end(); iter) C#中迭代器也是用来遍历集合&#xff0c;本质上是一个类/接口(IEnumerator)&#xff0c;可以解决…...

通信工程学习:什么是IP-CAN(IP连接接入网)

IP-CAN&#xff1a;IP连接接入网 IP-CAN&#xff08;IP连接接入网&#xff09;是一个通过IP实现用户设备&#xff08;UE&#xff09;与IP多媒体子系统&#xff08;IMS&#xff09;实体之间连通的网络实体和接口的集合。以下是对IP-CAN的详细解释&#xff1a; 一、定义与概述 1…...

使用 MongoDB 构建 AI:Patronus 如何自动进行大语言模型评估来增强对生成式 AI 的信心

大语言模型可能不可靠&#xff0c;这几乎算不上头条新闻。对于某些用例&#xff0c;这可能会带来不便。而对于其他行业&#xff0c;尤其是受监管行业&#xff0c;后果则要严重得多。于是&#xff0c;业内首个大语言模型自动评估平台 Patronus AI 应运而生。 Patronus AI 由 Met…...

openpose1.7.0编译 cuda12.2 cudnn 8.9.7.29 python3.7

参考链接&#xff1a; openpose(windows11)安装及常见问题及解决方案_openpose windows-CSDN博客 openpose笔记--Win11编译安装OpenPose(Python API)_openpose安装-CSDN博客 https://zhuanlan.zhihu.com/p/383661308 遇到问题&#xff1a; 1、cmake时&#xff0c;手动设置…...

【华为OD流程】性格测试选项+注意事项

可上 欧弟OJ系统 练习华子OD、大厂真题 绿色聊天软件戳 od1441了解算法冲刺训练(备注【CSDN】否则不通过) 文章目录 相关推荐阅读性格测试形式性格测试题型性格测试原则性格测试一致性性格测试选项举例最合适的性格适中的性格不适合的性格答题方法分享特别注意华为OD算法/大厂…...

《生物学教学》

《生物学教学》杂志是由国家教育部主管、华东师范大学主办&#xff0c;向国内外正式发行的全国教育类核心期刊。主要栏目有&#xff1a;生物科学综述、课程标准与教材、当代教育论坛、国外教育动态、教师教育、教育教学研究、教学设计案例、信息技术、考试与评价、实验教学、探…...

C++ 标准库的典型内容

目录 C 标准库的典型内容1. std::declval定义使用方法常见用途注意事项 2. std::true_type 和 std::false_type定义使用方法常见用途注意事项 3. std::void_t定义使用方法常见用途注意事项 4. std::conditional定义使用方法常见用途注意事项 5. std::function定义使用方法常见用…...

【C++初阶】:C++入门,引用概念及其性质

文章目录 一、引用的概念二、引用的语法规则1、引用特性2、常引用 二、引用的使用场景1. 引用做参数2. 引用做返回值 三、引用和指针的区别 一、引用的概念 首先明确一下&#xff0c;引用不是定义一个新的变量&#xff0c;而是给已经存在的变量起一个别名&#xff0c;变量和他…...

Linux 中的 crontab 命令介绍以及使用

文章目录 Linux Crontab 完全指南什么是 Crontab&#xff1f;Crontab 文件的基本格式特殊符号解释&#xff1a; 如何使用 Crontab查看当前用户的 Crontab编辑 Crontab删除 Crontab Crontab 示例每天晚上 12 点备份数据库每个工作日的早上 9 点发送日报每隔 15 分钟清理临时文件…...

单片机组成原理

大纲 C语言指针如何与硬件对应 底层疑问的源头 我已造好轮子&#xff0c;等你来理解 外设电路大概是什么结构 解决底层开发中关于配置、寄存器) 外设电路的疑问 从此可以快速上手新的单片机、新的外设芯片 对外设芯片的内部结构有本质理解&#xff0c;看手册不再是问题 固件库…...

《机器学习》—— SVD奇异值分解方法对图像进行压缩

文章目录 一、SVD奇异值分解简单介绍二、代码实现—SVD奇异值分解方法对图像进行压缩 一、SVD奇异值分解简单介绍 SVD&#xff08;奇异值分解&#xff09;是一种在信号处理、统计学、线性代数、机器学习等多个领域广泛应用的矩阵分解方法。它将任何 mn 矩阵 A 分解为三个特定矩…...

英文文本预处理——文本清理

文本清理定义 文本清理是英文文本预处理的重要步骤,旨在提高数据质量和一致性。以下是文本清理的具体内容: 去除标点符号 (Removing Punctuation): 删除文本中的标点符号,如句号、逗号、问号等。这一步骤有助于减少文本噪音,使得文本分析更加专注于有意义的词汇内容。 去…...