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 - 原生代码实现动态扩散效果 核心代码完整代码：在线示例 ArcGIS Maps SDK for JavaScript 从 4.29 开始增加 RenderNode 类，可以添加数据以及操作 FBO（ManagedFBO）&#…...
Java 设计模式-代理模式
目录 概述 一. 什么是代理模式 1. 举例说明 二. 代理模式作用 1. 保护代理 2. 增强功能 3. 代理交互 4. 远程代理： 三. 代理模式3个角色 四. 静态代理 1. 代码示例： 五. JDK动态代理 1. 代码示例： 六. CGLIB 动态代理 1.代码示…...
CTF靶场之BUUCTF介绍
最后开始关注CTF，我们先了解一下什么CTF:CTF（Capture The Flag）中文一般译作夺旗赛，在网络安全领域中指的是网络安全技术人员之间进行技术竞技的一种比赛形式,最后以夺取FLAG为成功。 从网上找了一个免费的靶场——BUUCTF…...
学会分析问题，画出分析图，解释问题过程，找出规律 ；整数数组分为左右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] 上正交的多项式，可以用来逼近函数。我们可以将一个函数表示为勒让德多项式的线性组合。以下是如何推导勒让德多项式展开系数 a n a_n an 的详细过程。 1. 勒让德展开的基本…...
Redis实战宝典：从主从模式、哨兵模式、集群模式一步步理解Redis集群
目录标题 Redis 集群的三种模式主从复制主从复制概念主从复制原理主从复制优缺点 哨兵集群哨兵概念哨兵功能下线判断主库选举故障转移哨兵模式优缺点 Cluser 集群Redis 集群的数据分片 Redis 集群的三种模式 在生产环境中，我们使用 Redis 通常采用集群模式…...
828华为云征文｜华为云Flexus X搭建借贷管理系统、二次开发借贷小程序 前端源码uniapp
在华为云828 B2B企业节的盛宴中，Flexus X实例以其卓越的算力性能和灵活的资源配置脱颖而出。对于追求极致性能、渴望在借贷管理、电商交易等场景中脱颖而出的您来说，Flexus X无疑是最佳拍档。搭载创新加速引擎，让您的自建MySQL、Redis、Nginx…...
网站安全需求分析与安全保护工程
网站安全威胁与需求分析 网站安全概念 网站：是基于B/S技术架构的综合信息服务平台，主要提供网页信息及业务后台对外接口服务。 网站安全性： 机密性：网站信息及相关数据不被授权查看或泄露完整性：网站信息及数据不能…...
后谷歌时代
每周跟踪AI热点新闻动向和震撼发展 想要探索生成式人工智能的前沿进展吗？订阅我们的简报，深入解析最新的技术突破、实际应用案例和未来的趋势。与全球数同行一同，从行业内部的深度分析和实用指南中受益。不要错过这个机会，成为AI领…...
【CMake编译报错小复盘】CMAKE_CUDA_ARCHITECTURES，CMake version，GCC version问题
今天在写大模型量化推理框架时遇到了一些编译上的错误，简单复盘一下问题和解决方案： 问题1：CMAKE_CUDA_ARCHITECTURES 报错信息： CMake Error: CMAKE_CUDA_ARCHITECTURES must be non-empty if set cmake和cuda相关的报错通常都…...
PMP--一、二、三模--分类--14.敏捷--技巧--DoDDoR
文章目录 技巧DoD&DoR 二模14.敏捷--术语表--完成的定义DoD--Definition of Done--是指一个项目什么时候可以被认为是“完成”的标准，它可以包括各种质量和功能的具体要求。--它是团队需要满足的所有标准的核对单，只有可交付成果满足该核对单才能视为…...
【大数据】如何读取多个Excel文件并计算列数据的最大求和值
导语： 在数据分析和处理中，我们经常需要从多个Excel文件中提取数据并进行计算。本文将带您通过一个实用的Python教程，学习如何读取D盘目录下特定文件夹内的多个Excel文件，并计算特定列数据的最大求和值。 文章目录 一、准备工作二…...
【运维项目经历|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;// 将彩色图像…...
【生命不息，动出奇迹！】多系统萎缩患者必看
亲爱的朋友们，当我们面对生活的挑战，尤其是像多系统萎缩（MSA）这样的复杂疾病时，保持乐观与积极，寻找适合自己的锻炼方式显得尤为重要！💪 MSA虽然会影响身体的多个系统，包…...
Verilog FPGA 仿真 控制任务
在Verilog仿真中，我们可以使用一些控制语句和系统任务来管理仿真过程。这些语句和任务可以帮助我们控制仿真的进行并输出必要的信息。 1. $stop：这是一个系统任务，用于停止运行仿真。在ModelSim中，可以继续仿真。 2. $stop(n)&…...
在Vision Pro上实现五子棋、益智休闲游戏：一个可二次开发的框架
苹果Vision Pro平台的推出，空间计算技术迎来了新的发展机遇。在这一背景下，物流游戏（Logistics Game）作为一个为Vision Pro平台量身打造的空间计算战略游戏，不仅展示了空间计算的魅力，也为开发者提供了一个可参考的框架。本文将介绍物流游戏的核心玩法，并总结其开发过程…...
使用 `Vitesse Uni App` 创建微信小程序并配置 uview-plus 和 alovajs
使用 Vitesse Uni App 创建微信小程序 Vitesse Uni App：https://vitesse-docs.netlify.app/ UI：https://uview-plus.jiangruyi.com/components/intro.html 编辑器：VScode 安装 Volar（Vue Offices）插件 创建项目 pnpm …...
C#迭代器和接口IEnumerable，IEnumerator
一.迭代器 学过C的都知道，迭代器是STL中的一个类，用来遍历容器。 vector<int>::iterator iter; for (iter v1.begin(); iter ! v1.end(); iter) C#中迭代器也是用来遍历集合，本质上是一个类/接口(IEnumerator)，可以解决…...
通信工程学习：什么是IP-CAN（IP连接接入网）
IP-CAN：IP连接接入网 IP-CAN（IP连接接入网）是一个通过IP实现用户设备（UE）与IP多媒体子系统（IMS）实体之间连通的网络实体和接口的集合。以下是对IP-CAN的详细解释： 一、定义与概述 1…...
[2025CVPR]DeepVideo-R1：基于难度感知回归GRPO的视频强化微调框架详解
突破视频大语言模型推理瓶颈，在多个视频基准上实现SOTA性能 一、核心问题与创新亮点 1.1 GRPO在视频任务中的两大挑战 安全措施依赖问题 GRPO使用min和clip函数限制策略更新幅度，导致： 梯度抑制：当新旧策略差异过大时梯度消失收敛困难：策略无法充分优化# 传统GRPO的梯…...
Appium+python自动化（十六）- ADB命令
简介 Android 调试桥(adb)是多种用途的工具，该工具可以帮助你你管理设备或模拟器 的状态。 adb ( Android Debug Bridge)是一个通用命令行工具，其允许您与模拟器实例或连接的 Android 设备进行通信。它可为各种设备操作提供便利，如安装和调试…...
day52 ResNet18 CBAM
在深度学习的旅程中，我们不断探索如何提升模型的性能。今天，我将分享我在 ResNet18 模型中插入 CBAM（Convolutional Block Attention Module）模块，并采用分阶段微调策略的实践过程。通过这个过程，我不仅提升…...
.Net框架，除了EF还有很多很多......
文章目录 1. 引言2. Dapper2.1 概述与设计原理2.2 核心功能与代码示例基本查询多映射查询存储过程调用 2.3 性能优化原理2.4 适用场景 3. NHibernate3.1 概述与架构设计3.2 映射配置示例Fluent映射XML映射 3.3 查询示例HQL查询Criteria APILINQ提供程序 3.4 高级特性3.5 适用场…...
智慧工地云平台源码，基于微服务架构+Java+Spring Cloud +UniApp +MySql
智慧工地管理云平台系统，智慧工地全套源码，java版智慧工地源码，支持PC端、大屏端、移动端。 智慧工地聚焦建筑行业的市场需求，提供“平台网络终端”的整体解决方案，提供劳务管理、视频管理、智能监测、绿色施工、安全管…...
Cesium1.95中高性能加载1500个点
一、基本方式： 图标使用.png比.svg性能要好 <template><div id"cesiumContainer"></div><div class"toolbar"><button id"resetButton">重新生成点</button><span id"countDisplay&qu…...
visual studio 2022更改主题为深色
visual studio 2022更改主题为深色 点击visual studio 上方的 工具-> 选项 在选项窗口中，选择 环境 -> 常规 ，将其中的颜色主题改成深色 点击确定，更改完成...
关于nvm与node.js
1 安装nvm 安装过程中手动修改 nvm的安装路径， 以及修改 通过nvm安装node后正在使用的node的存放目录【这句话可能难以理解，但接着往下看你就了然了】 2 修改nvm中settings.txt文件配置 nvm安装成功后，通常在该文件中会出现以下配置&…...
Frozen-Flask ：将 Flask 应用“冻结”为静态文件
Frozen-Flask 是一个用于将 Flask 应用“冻结”为静态文件的 Python 扩展。它的核心用途是：将一个 Flask Web 应用生成成纯静态 HTML 文件，从而可以部署到静态网站托管服务上，如 GitHub Pages、Netlify 或任何支持静态文件的网站服务器。 &am…...
Linux 中如何提取压缩文件 ？
Linux 是一种流行的开源操作系统，它提供了许多工具来管理、压缩和解压缩文件。压缩文件有助于节省存储空间，使数据传输更快。本指南将向您展示如何在 Linux 中提取不同类型的压缩文件。 1. Unpacking ZIP Files ZIP 文件是非常常见的，要在 …...