WebGL雾化与半透明效果

于 2024-09-25 23:00:05 发布
阅读量697 收藏 17
点赞数 21
分类专栏： WebGL 文章标签： webgl
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/gghhb12/article/details/142534964
版权

一、雾化

WEBGL中的雾化是一种视觉效果，可以模拟远处物体出现“雾气”或“烟雾”等效果，使场景更加真实。雾化可以让场景中的物体看起来模糊或透明，从而创建出一种深度感和距离感，增强场景的立体感。

WEBGL中的雾化通常使用线性或指数函数来计算出物体的深度，然后根据深度来进行颜色和透明度的调整，从而实现雾化效果。调整透明度的方式有多种，例如将物体的alpha值进行平滑过渡，或者使用特定的shader程序来自定义透明度的计算方式。

在实际的WEBGL应用中，雾化可以被用于增强场景的真实感，同时也可以用于创建特定的氛围和视觉风格。

雾化的实现流程

雾化实现是通过某点和视点之间的距离，距离越远雾化程度越⾼。这种雾化也称为线性雾化。某一点的雾化程度也成为雾化因⼦，WebGL中实现雾化的一般流程如下：

  1. 创建shader：在WebGL中，我们使用着色器(shader)来描述如何绘制一个物体，因此，我们需要创建雾化的shader。在shader中，我们需要定义雾化程度的变量，以及计算每个像素颜色时需要使用的公式等。
  2. 定义雾化区域：定义哪些区域需要雾化。对于这一步，我们可以依据相机的距离，将远离相机的物体进行雾化处理，或者根据场景中物体的坐标确定需要雾化的区域。
  3. 计算雾化程度：计算每个像素的雾化程度，这个程度可以用雾化公式进行计算，可以使用线性雾化公式或者指数雾化公式等。
  4. 应用雾化：将计算得到的雾化程度，应用到相应的像素上，最终实现雾化效果。

实现雾化效果时，需要考虑场景中物体的深度，而且雾化程度也可能会随着距离的远近而变化，因此，需要综合考虑这些因素，调整雾化效果。
在这里插入图片描述

雾化因子计算：雾化因子 = （终点 - 当前点） / （终点 - 起点）
物体颜色计算：颜色 = 物体颜色 * 雾化因子 + 雾化颜色 * （ 1 - 雾化因子）

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>雾化</title>
  <script src="../../lib/index.js"></script>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    canvas{
      margin: 50px auto 0;
      display: block;
      background: yellow;
    }
  </style>
</head>
<body>
<canvas id="canvas" width="400" height="400">
  此浏览器不支持canvas
</canvas>
</body>
</html>
<script>

  const ctx = document.getElementById('canvas')

  const gl = ctx.getContext('webgl')

  // 创建着色器源码
  const VERTEX_SHADER_SOURCE = `
    attribute vec4 aPosition;
    attribute vec4 aNormal;
    varying vec4 vColor;

    varying float vDist;

    uniform mat4 mat;
    void main() {
      // 定义点光源的颜色
      vec3 uPointLightColor = vec3(1.0,1.0,0.0);

      // 点光源的位置
      vec3 uPointLightPosition = vec3(-5.2,5.6,5.0);

      // 环境光
      vec3 uAmbientLightColor = vec3(0.2,0.2,0.2);

      // 物体表面的颜色
      vec4 aColor = vec4(1.0,0.0,0.0,1.0);

      // 顶点的世界坐标
      vec4 vertexPosition = mat * aPosition;

      // 点光源的方向
      vec3 lightDirection = normalize(uPointLightPosition - vec3(vertexPosition));

      // 环境反射
      vec3 ambient = uAmbientLightColor * vec3(aColor);

      // 计算入射角 光线方向和法线方向的点积
      float dotDeg = dot(lightDirection, vec3(aNormal));

      // 漫反射光的颜色
      vec3 diffuseColor = uPointLightColor * vec3(aColor) * dotDeg;

      gl_Position = vertexPosition;
      vColor = vec4(ambient + diffuseColor, aColor.a);
      vDist = gl_Position.w;
    }
  `; // 顶点着色器

  const FRAGMENT_SHADER_SOURCE = `
    precision lowp float;
    varying vec4 vColor;
    varying float vDist;

    // 雾化颜色
    uniform vec3 uFogColor;
    // 起点到终点的距离 第一个参数是起点   第二个是终点
    uniform vec2 uFogDist;

    void main() {
      // 计算雾化因子
      float fogFactor = (uFogDist.y - vDist) / (uFogDist.y - uFogDist.x);

      // 看到的颜色是什么 物体颜色*雾化因子+雾化颜色*（1-雾化因子）
      // mix 线性混合计算  mix(x,y,a) => { x * (1-a) + y * a }
      vec3 color = mix(uFogColor, vec3(vColor), fogFactor);
      gl_FragColor = vec4(color, vColor.a);
    }
  `; // 片元着色器

  const program = initShader(gl, VERTEX_SHADER_SOURCE, FRAGMENT_SHADER_SOURCE)

  const aPosition = gl.getAttribLocation(program, 'aPosition');
  const aNormal = gl.getAttribLocation(program, 'aNormal');
  const mat = gl.getUniformLocation(program, 'mat');

  const vertices = new Float32Array([
    // 0123
    1, 1, 1,
    -1, 1, 1,
    -1,-1, 1,
    1,-1, 1,
    // 0345
    1, 1, 1,
    1,-1, 1,
    1,-1,-1,
    1, 1,-1,
    // 0156
    1, 1, 1,
    1, 1, -1,
    -1, 1,-1,
    -1, 1,1,
    // 1267
    -1, 1, 1,
    -1,1, -1,
    -1, -1,-1,
    -1,-1,1,
    // 2347
    -1,-1, 1,
    1,-1, 1,
    1,-1,-1,
    -1,-1,-1,
    // 4567
    1,-1,-1,
    1, 1,-1,
    -1, 1,-1,
    -1,-1,-1,
  ])

  const buffer = gl.createBuffer();
  gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
  gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);
  gl.vertexAttribPointer(aPosition, 3, gl.FLOAT, false, 0, 0);
  gl.enableVertexAttribArray(aPosition)

  // 法向量
  const normals = new Float32Array([
    0.0,0.0,1.0,0.0,0.0,1.0,0.0,0.0,1.0,0.0,0.0,1.0,
    0.0,0.0,-1.0,0.0,0.0,-1.0,0.0,0.0,-1.0,0.0,0.0,-1.0,
    -1.0,0.0,0.0,-1.0,0.0,0.0,-1.0,0.0,0.0,-1.0,0.0,0.0,
    1.0,0.0,0.0,1.0,0.0,0.0,1.0,0.0,0.0,1.0,0.0,0.0,
    0.0,1.0,0.0,0.0,1.0,0.0,0.0,1.0,0.0,0.0,1.0,0.0,
    0.0,-1.0,0.0,0.0,-1.0,0.0,0.0,-1.0,0.0,0.0,-1.0,0.0,
  ])
  const normalBuffer = gl.createBuffer();
  gl.bindBuffer(gl.ARRAY_BUFFER, normalBuffer);
  gl.bufferData(gl.ARRAY_BUFFER, normals, gl.STATIC_DRAW);
  gl.vertexAttribPointer(aNormal, 3, gl.FLOAT, false, 0, 0);
  gl.enableVertexAttribArray(aNormal)

  const indeces = new Uint8Array([
    0,1,2,0,2,3,
    4,5,6,4,6,7,
    8,9,10,8,10,11,
    12,13,14,12,14,15,
    16,17,18,16,18,19,
    20,21,22,20,22,23,
  ])
  const indexBuffer = gl.createBuffer();
  gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, indexBuffer);
  gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, indeces, gl.STATIC_DRAW);

  const start = 0;
  const end = 200;
  const fogColor = new Float32Array([0.0,0.0,0.0]);
  const fogDist = new Float32Array([start, end]);

  const uFogColor = gl.getUniformLocation(program, 'uFogColor');
  const uFogDist = gl.getUniformLocation(program, 'uFogDist');

  gl.uniform3fv(uFogColor, fogColor);

  const vm = getViewMatrix(3,3,5,0.0,0.0,0.0,0.0,0.6,0.0);
  const perspective = getPerspectiveMatrix(30, ctx.width / ctx.height, 100, 1);
  gl.enable(gl.DEPTH_TEST);
  gl.uniformMatrix4fv(mat, false, mixMatrix(perspective, vm));


  function draw() {
    fogDist[1] -= 1;
    if (fogDist[1] < start) {
      fogDist[1] = end;
    }
    gl.uniform2fv(uFogDist, fogDist);

    gl.clearColor(0.0,0.0,0.0,1.0);
    gl.clear(gl.COLOR_BUFFER_BIT);

    gl.enable(gl.DEPTH_TEST);
    gl.drawElements(gl.TRIANGLES, indeces.length, gl.UNSIGNED_BYTE, 0);

    requestAnimationFrame(draw)
  }

  draw();
</script>

请添加图片描述

二、半透明

半透明物体是指在光线透过时，可以看到模糊的影像，但不完全透明的物体。这种物体通常具有一定的透明性，但不完全透明，仍然存在某种程度上的不透明性。

半透明物体的意义在于它可以在不影响视线的情况下，让光线穿过物体，使得我们能够观察到物体背后或者内部的部分。这种特性在许多应用中都非常有用，比如建筑物中的玻璃窗、医疗设备中的透明塑料、以及电子设备中的显示屏。此外，半透明物体还具有一定的艺术效果，可以让物体呈现出半透明的质感和神秘感，增强视觉体验。

半透明的实现流程

  1. 在片元着色器中定义透明度属性，并使用gl_FragColor来设置颜色和透明度值。
  2. 使用gl.enable(gl.BLEND)启用混合模式，这样可以将透明物体正确地混合到场景中。
  3. 使用gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA)设置混合函数，指定源颜色因子和目标颜色因子，以便正确地混合透明物体。
  4. 在渲染透明物体时，确保先渲染不透明的物体，再渲染半透明的物体。这样可以避免混合时受到前面物体的影响而导致不正确的结果。

gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA)：源因子和目标因子是可以通过gl.blendFunc函数来进行设置的，gl.blendFunc有两个参数，前者表示源因子，后者表示目标因子。这两个参数可以是多种值，下面介绍比较常用的几种。
gl.ZERO：表示使用0.0作为因子，实际上相当于不使用这种颜色参与混合运算。
gl.ONE：表示使用1.0作为因子，实际上相当于完全的使用了这种颜色参与混合运算。
gl.SRC_ALPHA：表示使用源颜色的alpha值来作为因子。
gl.DST_ALPHA：表示使用目标颜色的alpha值来作为因子。
gl.ONE_MINUS_SRC_ALPHA：表示用1.0减去源颜色的alpha值来作为因子。
gl.ONE_MINUS_DST_ALPHA：表示用1.0减去目标颜色的alpha值来作为因子。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>半透明</title>
  <script src="../../lib/index.js"></script>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    canvas{
      margin: 50px auto 0;
      display: block;
      background: yellow;
    }
  </style>
</head>
<body>
<canvas id="canvas" width="400" height="400">
  此浏览器不支持canvas
</canvas>
</body>
</html>
<script>

  const ctx = document.getElementById('canvas')

  const gl = ctx.getContext('webgl')

  // 创建着色器源码
  const VERTEX_SHADER_SOURCE = `
    attribute vec4 aPosition;
    attribute vec4 aNormal;
    varying vec4 vColor;

    uniform mat4 mat;
    void main() {
      // 定义点光源的颜色
      vec3 uPointLightColor = vec3(1.0,1.0,0.0);

      // 点光源的位置
      vec3 uPointLightPosition = vec3(-5.0,6.0,10.0);

      // 环境光
      vec3 uAmbientLightColor = vec3(0.2,0.2,0.2);

      // 物体表面的颜色
      vec4 aColor = vec4(1.0,0.0,0.0,1.0);

      // 顶点的世界坐标
      vec4 vertexPosition = mat * aPosition;

      // 点光源的方向
      vec3 lightDirection = normalize(uPointLightPosition - vec3(vertexPosition));

      // 环境反射
      vec3 ambient = uAmbientLightColor * vec3(aColor);

      // 计算入射角 光线方向和法线方向的点积
      float dotDeg = dot(lightDirection, vec3(aNormal));

      // 漫反射光的颜色
      vec3 diffuseColor = uPointLightColor * vec3(aColor) * dotDeg;

      gl_Position = vertexPosition;
      vColor = vec4(ambient + diffuseColor, 0.5);
    }
  `; // 顶点着色器

  const FRAGMENT_SHADER_SOURCE = `
    precision lowp float;
    varying vec4 vColor;

    void main() {
      gl_FragColor = vColor;
    }
  `; // 片元着色器

  const program = initShader(gl, VERTEX_SHADER_SOURCE, FRAGMENT_SHADER_SOURCE)

  const aPosition = gl.getAttribLocation(program, 'aPosition');
  const aNormal = gl.getAttribLocation(program, 'aNormal');
  const mat = gl.getUniformLocation(program, 'mat');

  const vertices = new Float32Array([
    // 0123
    1, 1, 1,
    -1, 1, 1,
    -1,-1, 1,
    1,-1, 1,
    // 0345
    1, 1, 1,
    1,-1, 1,
    1,-1,-1,
    1, 1,-1,
    // 0156
    1, 1, 1,
    1, 1, -1,
    -1, 1,-1,
    -1, 1,1,
    // 1267
    -1, 1, 1,
    -1,1, -1,
    -1, -1,-1,
    -1,-1,1,
    // 2347
    -1,-1, 1,
    1,-1, 1,
    1,-1,-1,
    -1,-1,-1,
    // 4567
    1,-1,-1,
    1, 1,-1,
    -1, 1,-1,
    -1,-1,-1,
  ])

  const buffer = gl.createBuffer();
  gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
  gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);
  gl.vertexAttribPointer(aPosition, 3, gl.FLOAT, false, 0, 0);
  gl.enableVertexAttribArray(aPosition)

  // 法向量
  const normals = new Float32Array([
    0.0,0.0,1.0,0.0,0.0,1.0,0.0,0.0,1.0,0.0,0.0,1.0,
    0.0,0.0,-1.0,0.0,0.0,-1.0,0.0,0.0,-1.0,0.0,0.0,-1.0,
    -1.0,0.0,0.0,-1.0,0.0,0.0,-1.0,0.0,0.0,-1.0,0.0,0.0,
    1.0,0.0,0.0,1.0,0.0,0.0,1.0,0.0,0.0,1.0,0.0,0.0,
    0.0,1.0,0.0,0.0,1.0,0.0,0.0,1.0,0.0,0.0,1.0,0.0,
    0.0,-1.0,0.0,0.0,-1.0,0.0,0.0,-1.0,0.0,0.0,-1.0,0.0,
  ])
  const normalBuffer = gl.createBuffer();
  gl.bindBuffer(gl.ARRAY_BUFFER, normalBuffer);
  gl.bufferData(gl.ARRAY_BUFFER, normals, gl.STATIC_DRAW);
  gl.vertexAttribPointer(aNormal, 3, gl.FLOAT, false, 0, 0);
  gl.enableVertexAttribArray(aNormal)

  const indeces = new Uint8Array([
    0,1,2,0,2,3,
    4,5,6,4,6,7,
    8,9,10,8,10,11,
    12,13,14,12,14,15,
    16,17,18,16,18,19,
    20,21,22,20,22,23,
  ])
  const indexBuffer = gl.createBuffer();
  gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, indexBuffer);
  gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, indeces, gl.STATIC_DRAW);

  gl.enable(gl.BLEND);

  gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);

  const vm = getViewMatrix(3,3,5,0.0,0.0,0.0,0.0,0.6,0.0);
  const perspective = getPerspectiveMatrix(30, ctx.width / ctx.height, 100, 1);

  gl.uniformMatrix4fv(mat, false, mixMatrix(perspective, vm));
  gl.drawElements(gl.TRIANGLES, indeces.length, gl.UNSIGNED_BYTE, 0);

</script>

请添加图片描述

码上生花
关注
专栏目录
WebGL实现透明物体（α混合）
dabaooooq的博客
09-27 361
颜色中的α分量（即RGBA中的A）控制着颜色的透明度。如果一个物体颜色的α分量值为0.5，该物体就是半透明的，透过它可以看到该物体背后的其他物体。如果一个物体颜色的α分量值为0，那么它就是完全透明的，我们将完全看不到它。在本文的示例程序中，随着α分量的降低，整个绘图区域会逐渐成为白色，因为在默认情况下，α混合不仅影响绘制的物体，也会影响背景色，最后你看到的白色实际上是＜canvas＞后空白的网页。
【愚公系列】2023年08月 WEBGL专题-3D特效-半透明
时光隧道
08-08 1万+
半透明物体是指在光线透过时，可以看到模糊的影像，但不完全透明的物体。这种物体通常具有一定的透明性，但不完全透明，仍然存在某种程度上的不透明性。半透明物体的意义在于它可以在不影响视线的情况下，让光线穿过物体，使得我们能够观察到物体背后或者内部的部分。这种特性在许多应用中都非常有用，比如建筑物中的玻璃窗、医疗设备中的透明塑料、以及电子设备中的显示屏。此外，半透明物体还具有一定的艺术效果，可以让物体呈现出半透明的质感和神秘感，增强视觉体验。在WebGL中创建半透明物体需要遵循以下步骤：在片元着色器中定义透明度属性
WebGL入门(三十八)-绘制透明三维物体，通过α混合绘制透明三角形
点燃火柴的博客
04-26 871
通过α混合绘制透明三角形1. demo效果2. 知识要点2.1 α混合2.2 α混合实现2.3 指定混合 gl.blendFunc()3. demo代码 1. demo效果 如上图，绘制了前、中、后三个三角形，通过α混合实现了透明效果 2. 知识要点 2.1 α混合 RGBA模式中A称为颜色的α分量，控制着颜色的透明度，取值范围是0~1,0代表完全透明，完全看不到图形，1代表完全不透明，取0到1之间的值，代表一定的透明度，可以透过本身看到后面的物体，取值越小透明度越大，透过本身看后面的物体越清楚 使用颜色
49 WebGL绘制透明的图形
现在学习也不晚
06-19 5515
案例查看地址：点击这里颜色中的 α 分量，（即RGBA中的A，alpha）控制着颜色的透明度。如果一个物体的颜色的α分量值为0.5，该物体为半透明，透过它可以看到该物体背后的其他物体。如果物体颜色的α分量值为0，那么它就是完全透明的，我们将完全看不到它。在这一节的示例程序中，随着α分量的降低，整个绘图区域会逐渐成为白色，以为在默认的情况下，α混合不仅影响绘制的物体，也会影响背景色，最后你看到的白色...
WebGL透明度与α融合
u014291990的博客
11-25 1497
WebGL透明度与α融合 WebGL教程(电子书) 本文是WebGL电子书的1.15节内容 半透明三角形叠加.html源码效果如下如图所示。 渲染管线之融合 GPU的渲染管线有各种功能单元，比如前面讲到的深度测试侧单元，通过执行gl.enable(gl.DEPTH_TEST)语句可以开启GPU渲染管线的深度测试单元， 同样更改WebGL API gl.enable()的参数也可以指定开启其它的...
WebGL编程指南
04-09
半透明的三维物体（BlendedCube.js） 371 透明与不透明物体共存 372 切换着色器 373 如何实现切换着色器 374 示例程序（ProgramObject.js） 375 渲染到纹理 379 帧缓冲区对象和渲染缓冲区对象 380 如何实现...
WebGL编程指南压缩包
05-15
半透明的三维物体（BlendedCube.js） 371 透明与不透明物体共存 372 切换着色器 373 如何实现切换着色器 374 示例程序（ProgramObject.js） 375 渲染到纹理 379 帧缓冲区对象和渲染缓冲区对象 380 如何实现...
webgl编程指南及源码2/2
05-08
半透明的三维物体（BlendedCube.js） 371 透明与不透明物体共存 372 切换着色器 373 如何实现切换着色器 374 示例程序（ProgramObject.js） 375 渲染到纹理 379 帧缓冲区对象和渲染缓冲区对象 380 如何实现...
webgl编程指南及源码1/2
05-08
半透明的三维物体（BlendedCube.js） 371 透明与不透明物体共存 372 切换着色器 373 如何实现切换着色器 374 示例程序（ProgramObject.js） 375 渲染到纹理 379 帧缓冲区对象和渲染缓冲区对象 380 如何实现...
shader03-逐渐透明和颜色渐变
谷子的博客
02-13 2816
需要电子档书籍或者源码可以Q群：828202939   希望可以和大家一起学习、一起进步！！ 如有错别字或有理解不到位的地方，可以留言或者加微信15250969798，博主会及时修改！！！！！ 下面分享一个图形逐渐消失和颜色渐变的案例！ 主要讲fragmentShader对顶点的颜色的rgba控制！ 录屏： ...
webGL总结
naooomi的专栏
12-06 2万+
WebGL学习汇报 一、WebGL简介 WebGL 和3D图形规范OpenGL、OpenCL一样来自Khronos Group，而且免费开放。它是一种3D绘图标准，是针对万维网的即时三维绘图API，这种绘图技术标准允许把JavaScript和OPenGL ES 2.0结合在一起，为HTML5 Canvas提供硬件3D加速渲染，这样Web开发人员就可以借助系统显卡在浏览器里更流畅地展示3D场景和
shader编程-着色器中颜色基础（WebGL-Shader开发基础06）
点燃火柴的博客
11-23 5132
shader编程-着色器中颜色基础1. 屏幕颜色2. 颜色根据屏幕坐标变化3. 形状颜色处理4. 借助A通道处理形状颜色 1. 屏幕颜色 在之前的文章中我们用一个三维向量表示颜色 vec3 line_color = vec3(1.0,1.0,0.0); vec3 color = vec3(0.6); 用三维向量表示颜色因为正好它的三个分量可以代表RGBA格式的颜色中的Red（红色）Green（绿色）Blue（蓝色）分量， 我们在最后通常会有一句 gl_FragColor = vec4(color, 1.0
OpenGL 设置半透明
一千万
01-01 1万+
Gl.glEnable((int)EnableCap.Blend); // 启用混合模式   Gl.glBlendFunc((int)BlendingFactorSrc.SrcAlpha, (int)BlendingFactorDest.DstAlpha); // 设置半透明 关闭透明时，可直接禁用混合模式：   Gl.glDisable((int)EnableCap.Blend);
WebGL着色器内置变量gl_PointSize、gl_Position、gl_FragColor、gl_FragCoord、gl_PointCoord
热门推荐
u014291990的博客
11-17 2万+
WebGL着色器内置变量 本文是WebGL教程(电子书)的2.7节内容 着色器语言在GPU的着色器单元执行，javascript语言、C语言在CPU上执行，任何一种语言的语法规则，整体设计都和它执行的硬件有一定的关系，GPU和CPU执行程序的硬件单元既有相同点，也有不同点。这里谈到GPU和CPU不是为了讲解硬件，而是为了提醒大家，学习着色器语言有些语法可以参考javascript、C等执行在CPU...
解密！抖音百万粉丝博主三维地图视频都用到了什么GIS数据和技术
Mapmost的博客
08-12 1532
（1）影像数据影像数据，通常指的是通过各种遥感技术，如卫星、无人机或地面传感器等设备捕捉到的图像信息。这类数据涵盖了从可见光到红外、微波等多个电磁波谱段，能够用于多样的应用领域：1）地图制图与地理信息系统 (GIS)：高分辨率卫星影像常用于更新地形图、制作数字高程模型(DEM)，以及土地覆盖和土地利用分类。2）农业监测：通过分析不同波段的影像数据，可以评估作物生长状况、病虫害预警及灌溉需求，助力精准农业。3）城市规划与管理：监测城市扩张、土地变化、交通流量及环境质量，为城市可持续发展提供数据支持。
python摄影交流平台代码
最新发布
09-26
python摄影交流平台代码python摄影交流平台代码python摄影交流平台代码python摄影交流平台代码python摄影交流平台代码python摄影交流平台代码python摄影交流平台代码
线上辅导班系统-线上辅导班系统-线上辅导班系统-线上辅导班系统-线上辅导班系统-线上辅导班系统-线上辅导班系统-线上辅导班系统
09-26
线上辅导班系统-线上辅导班系统-线上辅导班系统-线上辅导班系统-线上辅导班系统-线上辅导班系统-线上辅导班系统-线上辅导班系统-线上辅导班系统-线上辅导班系统-线上辅导班系统-线上辅导班系统 1、资源说明：线上辅导班系统源码，本资源内项目代码都经过测试运行成功，功能ok的情况下才上传的。 2、适用人群：计算机相关专业(如计算计、信息安全、大数据、人工智能、通信、物联网、自动化、电子信息等)在校学生、专业老师或者企业员工等学习者，作为参考资料，进行参考学习使用。 3、资源用途：本资源具有较高的学习借鉴价值，可以作为“参考资料”，注意不是“定制需求”，代码只能作为学习参考，不能完全复制照搬。需要有一定的基础，能够看懂代码，能够自行调试代码，能够自行添加功能修改代码。 4. 最新计算机软件毕业设计选题大全(文章底部有博主联系方式): https://blog.csdn.net/2301_79206800/article/details/135931154 技术栈、环境、工具、软件： ① 系统环境:Windows ② 开发语言：Java ③ 框架：SpringBoot ④ 架构:B/S、M
Java-ssm-jsp基于微信小程序的校园二手物品交易系统实现源码(源代码+说明文档)
09-26
首页：首页可以看到所有类别的二手物品。 全部：可以看到不同类别，比如电子产品、服装等商品信息 发布：可以发布自己的二手物品 我的：个人中心中主要是针对自己的信息资料进行查询管理，主要内容那肯定就会有对于个人资料的修改操作还有我们管理人员经常把修改密码和我的收藏放在一起的功能操作了。 项目关键技术 开发工具：IDEA 、Eclipse 编程语言: Java 数据库: MySQL5.7+ 后端技术：ssm 前端技术：jsp 关键技术：jsp、spring、ssm、MYSQL、MAVEN 数据库工具：Navicat、SQLyog
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

码上生花

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值