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

08.webgl_buffergeometry_attributes_none ，three官方示例+编辑器+AI快速学习

article 2025/12/31 20:27:14

本实例主要讲解内容

这个Three.js示例展示了无属性几何体渲染技术，通过WebGL 2的gl_VertexID特性和伪随机数生成算法，在着色器中动态计算顶点位置和颜色，而不需要在CPU端预先定义几何体数据。

核心技术包括：

  • WebGL 2的顶点ID特性
  • 着色器中的伪随机数生成
  • 无属性几何体渲染
  • 纯GPU端的几何体生成

在这里插入图片描述

完整代码注释

<!DOCTYPE html>
<html lang="en"><head><title>three.js WebGL 2 - buffergeometry - attributes - none</title><meta charset="utf-8"><meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"><link type="text/css" rel="stylesheet" href="main.css"></head><body><div id="info"><a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> WebGL 2 - buffergeometry - attributes - none</div><!-- 顶点着色器 --><script id="vertexShader" type="x-shader/x-vertex">uniform mat4 modelViewMatrix;uniform mat4 projectionMatrix;uniform float seed; // 随机数种子// IEEE 754浮点数常量const uint ieeeMantissa = 0x007FFFFFu;const uint ieeeOne = 0x3F800000u;// 哈希函数 - 生成伪随机无符号整数uint hash(uint x) {x += ( x << 10u );x ^= ( x >>  6u );x += ( x <<  3u );x ^= ( x >> 11u );x += ( x << 15u );return x;}// 二维哈希函数uint hash(uvec2 v) { return hash( v.x ^ hash(v.y) ); }// 生成0-1之间的伪随机浮点数float hashNoise(vec2 xy) {uint m = hash(floatBitsToUint(xy));m &= ieeeMantissa;m |= ieeeOne;return uintBitsToFloat( m ) - 1.0;}// 生成指定范围内的伪随机浮点数float pseudoRandom(float lower, float delta, in vec2 xy) {return lower + delta*hashNoise(xy);}// 生成指定范围内的伪随机三维向量vec3 pseudoRandomVec3(float lower, float upper, int index) {float delta = upper - lower;float x = pseudoRandom(lower, delta, vec2(index, 0));float y = pseudoRandom(lower, delta, vec2(index, 1));float z = pseudoRandom(lower, delta, vec2(index, 2));return vec3(x, y, z);}out vec3 vColor; // 输出到片段着色器的颜色void main()	{// 计算顶点位置// 使用 gl_VertexID 作为索引生成伪随机位置// 每个三角形的三个顶点共享相同的基础位置，添加微小偏移形成三角形const float scale = 1.0/64.0;vec3 position = pseudoRandomVec3(-1.0, +1.0, gl_VertexID/3) + scale * pseudoRandomVec3(-1.0, +1.0, gl_VertexID);// 计算顶点颜色vec3 color = pseudoRandomVec3(0.25, 1.0, gl_VertexID/3);// 设置顶点位置和颜色gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0 );vColor = color;}</script><!-- 片段着色器 --><script id="fragmentShader" type="x-shader/x-fragment">precision mediump float;in vec3 vColor; // 从顶点着色器传入的颜色out vec4 fColor; // 最终输出颜色void main()	{fColor = vec4(vColor, 1); // 使用传入的颜色作为片段颜色}</script><script type="importmap">{"imports": {"three": "../build/three.module.js","three/addons/": "./jsm/"}}</script><script type="module">import * as THREE from 'three';let camera, scene, renderer, mesh;init();function init() {// 初始化相机camera = new THREE.PerspectiveCamera( 27, window.innerWidth / window.innerHeight, 1, 3500 );camera.position.z = 4;// 初始化场景scene = new THREE.Scene();scene.background = new THREE.Color( 0x050505 );scene.fog = new THREE.Fog( 0x050505, 2000, 3500 );// 创建几何体// 注意：这里没有设置任何顶点属性，所有数据都在着色器中生成const triangleCount = 10000;const vertexCountPerTriangle = 3;const vertexCount = triangleCount * vertexCountPerTriangle;const geometry = new THREE.BufferGeometry();geometry.setDrawRange( 0, vertexCount ); // 仅设置绘制范围// 创建材质const material = new THREE.RawShaderMaterial( {uniforms: {seed: { value: 42 }, // 设置随机数种子},vertexShader: document.getElementById( 'vertexShader' ).textContent,fragmentShader: document.getElementById( 'fragmentShader' ).textContent,side: THREE.DoubleSide, // 双面渲染glslVersion: THREE.GLSL3 // 使用GLSL 3.0} );// 创建网格mesh = new THREE.Mesh( geometry, material );mesh.frustumCulled = false; // 禁用视锥体剔除scene.add( mesh );// 初始化渲染器renderer = new THREE.WebGLRenderer( { antialias: true } );renderer.setPixelRatio( window.devicePixelRatio );renderer.setSize( window.innerWidth, window.innerHeight );renderer.setAnimationLoop( animate );document.body.appendChild( renderer.domElement );}// 动画循环function animate( time ) {// 旋转网格mesh.rotation.x = time / 1000.0 * 0.25;mesh.rotation.y = time / 1000.0 * 0.50;renderer.render( scene, camera );}</script></body>
</html>

无属性几何体渲染技术解析

WebGL 2的顶点ID特性

WebGL 2引入了gl_VertexID内置变量，它表示当前正在处理的顶点索引：

  1. 无需顶点属性：传统渲染需要在BufferGeometry中定义顶点位置、颜色等属性，而使用gl_VertexID可以完全在着色器中生成这些数据
  2. 高效并行计算：每个顶点的计算是并行进行的，充分利用GPU的计算能力
  3. 动态几何体：可以根据需要动态生成不同的几何体，无需在CPU端预先生成和上传数据

在本示例中，我们通过gl_VertexID计算每个顶点的位置和颜色，实现了完全在GPU端生成几何体的效果。

着色器中的伪随机数生成

为了在着色器中生成看似随机的顶点位置和颜色，我们使用了伪随机数生成算法：

  1. 哈希函数：通过位运算实现的哈希函数，将输入值映射为看似随机的输出值
  2. 浮点数转换：将生成的无符号整数转换为0-1之间的浮点数
  3. 确定性随机：相同的输入会生成相同的输出，这对于渲染一致性非常重要

在本示例中，我们使用顶点ID和随机种子作为输入，生成确定性的随机顶点位置和颜色。这意味着每次渲染相同的场景时，结果都是一样的，但看起来是随机的。

无属性几何体的优势与应用场景

这种渲染技术具有以下优势：

  1. 减少内存占用：无需在CPU和GPU之间传输大量顶点数据
  2. 提高渲染效率：减少了数据传输和BufferGeometry的创建开销
  3. 动态生成复杂几何体：适合生成粒子系统、程序化地形、流体模拟等

适用场景包括：

  1. 粒子系统：每个粒子的位置和属性可以在着色器中动态生成
  2. 程序化内容：如程序化地形、建筑等
  3. 大数据可视化：当数据量非常大时，可以避免内存问题
  4. 实时生成效果：如爆炸碎片、烟雾等效果
性能考虑与限制

使用无属性几何体渲染时需要注意：

  1. 着色器复杂度：复杂的计算会增加GPU负担，可能导致性能下降
  2. 随机数质量：简单的哈希函数生成的随机数质量有限，不适合需要高质量随机数的场景
  3. 调试困难：着色器中的计算难以调试，需要仔细设计算法
  4. 兼容性：仅支持WebGL 2的浏览器才能使用

这种技术在特定场景下非常强大，但并不适合所有情况。在实际应用中，需要根据具体需求权衡其优缺点。

相关文章：

08.webgl_buffergeometry_attributes_none ，three官方示例+编辑器+AI快速学习

本实例主要讲解内容 这个Three.js示例展示了无属性几何体渲染技术&#xff0c;通过WebGL 2的gl_VertexID特性和伪随机数生成算法&#xff0c;在着色器中动态计算顶点位置和颜色&#xff0c;而不需要在CPU端预先定义几何体数据。 核心技术包括&#xff1a; WebGL 2的顶点ID特…...

编程日记 2025/12/27 18:07:50

26考研 | 王道 | 计算机组成原理 | 一、计算机系统概述

26考研 | 王道 | 计算机组成原理 | 一、计算机系统概述 文章目录 26考研 | 王道 | 计算机组成原理 | 一、计算机系统概述1.1 计算机的发展1.2 计算机硬件和软件1.2.1 计算机硬件的基本组成1.2.2 各个硬件的工作原理1.2.3 计算机软件1.2.4 计算机系统的层次结构1.2.5 计算机系统…...

编程日记 2025/12/27 23:06:41

转换算子介绍

### 转换算子的定义与用法 #### 定义 转换算子&#xff08;Transformation Operators&#xff09;是指用于处理分布式数据集的操作符&#xff0c;在大数据框架中广泛使用&#xff0c;例如Apache Flink和Apache Spark。这些操作符允许开发者对数据集执行各种变换操作&#xff0…...

编程日记 2025/10/25 19:04:53

Android学习总结之Glide自定义三级缓存（实战篇）

一、为什么需要三级缓存 内存缓存&#xff08;Memory Cache&#xff09; 内存缓存旨在快速显示刚浏览过的图片&#xff0c;例如在滑动列表时来回切换的图片。在 Glide 中&#xff0c;内存缓存使用 LruCache 算法&#xff08;最近最少使用&#xff09;&#xff0c;能自动清理长…...

编程日记 2025/11/3 5:48:58

单片机开发软件

目录 纯编码 vscode Ardunio Keil 1. 集成化开发环境&#xff08;IDE&#xff09; 2. 多架构芯片支持 3. 高效的代码生成与优化 4. 强大的调试与仿真功能 5. 丰富的库函数与生态系统 6. 教育与企业级适用性 典型应用场景 半编码半图形化 STM32CUBEIED 1. 图形化配置…...

编程日记 2025/12/6 8:09:42

LeetCode100.2 字母异位词分组

观察题目&#xff0c;需要把strs中的元素按照字母进行归类&#xff0c;一个朴素的思路是&#xff1a;遍历strs&#xff0c;对每个元素排序后插入哈希表中&#xff0c;随后再遍历一遍表将其转化为vector<vector<string>>。 class Solution { public:vector<vect…...

编程日记 2025/12/27 9:18:18

深入了解 Stable Diffusion：AI 图像生成的奥秘

一、引言 AI 艺术与图像生成技术的兴起改变了我们创造和体验视觉内容的方式。在过去几年里&#xff0c;深度学习模型已经能够创造出令人惊叹的艺术作品&#xff0c;这些作品不仅模仿了人类艺术家的风格&#xff0c;甚至还能创造出前所未有的新风格。在这个领域&#xff0c;Sta…...

编程日记 2025/12/22 7:06:56

Python爬虫实战：研究ajax异步渲染加密

一、引言 在当今数字化时代，数据已成为推动各行业发展的核心驱动力。网络爬虫作为一种高效的数据采集工具，能够从互联网上自动获取大量有价值的信息。然而，随着 Web 技术的不断发展，越来越多的网站采用了 AJAX（Asynchronous JavaScript and XML）异步渲染技术来提升用户体…...

编程日记 2025/7/7 20:14:42

大语言模型训练的两个阶段

先说结论&#xff1a;第一阶段在云平台训练至收敛 第二阶段本地GPU微调 一、阶段划分的核心逻辑 阶段目标资源特点典型耗时占比成本敏感度预训练获取通用表征能力需要大规模分布式计算70-90%高&#xff08;追求每美元算力&#xff09;微调适配特定任务需要领域数据安全/低延迟…...

编程日记 2025/12/22 12:24:42

显示的图标跟UI界面对应不上。

图片跟UI界面不符合。 要找到对应dp的值。UI的dp要跟代码里的xml文件里的dp要对应起来。 蓝湖里设置一个宽度给对应上。然后把对应的值填入xml. 一个屏幕上的图片到底是用topmarin来设置&#xff0c;还是用bottommarin来设置。 因为第一节&#xff0c;5&#xff0c;7 车厢的…...

编程日记 2025/12/27 4:15:19

OJ判题系统第6期之判题逻辑开发——设计思路、实现步骤、代码实现（策略模式）

在看这期之前&#xff0c;建议先看前五期&#xff1a; Java 原生实现代码沙箱&#xff08;OJ判题系统第1期&#xff09;——设计思路、实现步骤、代码实现-CSDN博客 Java 原生实现代码沙箱之Java 程序安全控制&#xff08;OJ判题系统第2期&#xff09;——设计思路、实现步骤…...

编程日记 2025/12/9 17:14:26

css中的 vertical-align与line-height作用详解

一、vertical-align 详解 作用对象&#xff1a;行内元素&#xff08;inline/inline-block&#xff09;或表格单元格内容核心功能&#xff1a;控制元素在行框内的垂直对齐方式常用取值&#xff1a; baseline&#xff08;默认&#xff09;&#xff1a;基线与父元素基线对齐top&a…...

编程日记 2025/11/11 22:56:03

vue数据可视化开发echarts等组件、插件的使用及建议-浅看一下就行

在 Vue 项目中使用 ECharts 进行数据可视化开发时&#xff0c;可以结合 Vue 的响应式特性和 ECharts 的强大功能&#xff0c;实现动态、交互式的图表展示。 一、ECharts 基础使用 1. 安装 ECharts npm install echarts2. 在 Vue 组件中使用 ECharts <template><div…...

编程日记 2025/11/13 18:04:52

高并发内存池（三）：TLS无锁访问以及Central Cache结构设计

目录 前言&#xff1a; 一&#xff0c;thread cache线程局部存储的实现 问题引入 概念说明 基本使用 thread cache TLS的实现 二&#xff0c;Central Cache整体的结构框架 大致结构 span结构 span结构的实现 三&#xff0c;Central Cache大致结构的实现 单例模式 thr…...

编程日记 2025/12/31 3:05:40

在Taro中开发一个跨端Svg组件，同时支持小程序、H5、React Native

Taro系列中一直没有跨端的绘图工具&#xff0c;小程序端支持canvas但是不支持svg&#xff0c;RN端有 react-native-svg 支持svg&#xff0c;但是没有很好原生的canvas插件&#xff0c;社区的canvas都是基于WebView实现的&#xff0c;或者skia&#xff0c;这个插件的书写方式和c…...

编程日记 2025/12/27 20:11:52

【办公类-100-01】20250515手机导出教学照片，自动上传csdn+最大化、最小化Vs界面

背景说明&#xff1a; 每次把教学照片上传csdn&#xff0c;都需要打开相册&#xff0c;一张张截图&#xff0c;然后ctrlV黏贴到CSDN内&#xff0c;我觉得太烦了。 改进思路&#xff1a; 是否可以先把所有照片都上传到csdn&#xff0c;然后再一张张的截图&#xff08;去掉幼儿…...

编程日记 2025/12/27 20:08:02

SIP协议栈--osip源码梳理

文章目录 osiposip主体结构体code main函数 状态机转化结构体code状态转换 sip事务结构体code osip_dialog结构体code 创建并发送200 OK响应 osip_message结构体code osip_eventcode 打印接收到的SIP消息 osip OSIP&#xff08;Open Source Implementation of SIP&#xff09;…...

编程日记 2025/11/9 23:06:28

Python零基础入门到高手8.4节: 元组与列表的区别

目录 8.4.1 不可变数据类型 8.4.2 可变数据类型 8.4.3 元组与列表的区别 8.4.4 今天彩票没中奖 8.4.1 不可变数据类型 不可变数据类型是指不可以对该数据类型进行原地修改&#xff0c;即只读的数据类型。迄今为止学过的不可变数据类型有字符串&#xff0c;元组。 在使用[]…...

编程日记 2025/12/27 15:09:58

深度学习入门：深度学习（完结）

目录 1、加深网络1.1 向更深的网络出发1.2 进一步提高识别精度1.3 加深层的动机 2、深度学习的小历史2.1 ImageNet2.2 VGG2.3 GoogleNet2.4 ResNet 3、深度学习的高速化3.1 需要努力解决的问题3.2 基于GPU的高速化3.3 分布式学习3.4 运算精度的位数缩减 4、深度学习的应用案例4…...

编程日记 2025/12/27 20:30:06

OpenCV CUDA模块中矩阵操作------矩阵元素求和

操作系统&#xff1a;ubuntu22.04 OpenCV版本&#xff1a;OpenCV4.9 IDE:Visual Studio Code 编程语言&#xff1a;C11 算法描述 在OpenCV的CUDA模块中&#xff0c;矩阵元素求和类函数主要用于计算矩阵元素的总和、绝对值之和以及平方和。这些操作对于图像处理中的特征提取、…...

编程日记 2025/12/25 9:00:12

使用Scrapeless Scraping Browser的自动化和网页抓取最佳实践

引言&#xff1a;人工智能时代浏览器自动化和数据收集的新范式 随着生成性人工智能、人工智能代理和数据密集型应用程序的快速崛起&#xff0c;浏览器正在从传统的“用户互动工具”演变为智能系统的“数据执行引擎”。在这一新范式中&#xff0c;许多任务不再依赖单一的API端点…...

编程日记 2025/12/27 15:10:36

java数组题（5）

&#xff08;1&#xff09;&#xff1a; 思路&#xff1a; 1.首先要对数组nums排序&#xff0c;这样两数之间的差距最小。 2.题目要求我们通过最多 k 次递增操作&#xff0c;使数组中某个元素的频数&#xff08;出现次数&#xff09;最大化。经过上面的排序&#xff0c;最大数…...

编程日记 2025/12/27 19:15:47

使用Thrust库实现异步操作与回调函数

文章目录 使用Thrust库实现异步操作与回调函数基本异步操作插入回调函数更复杂的回调示例注意事项 使用Thrust库实现异步操作与回调函数 在Thrust库中&#xff0c;你可以通过CUDA流(stream)来实现异步操作&#xff0c;并在适当的位置插入回调函数。以下是如何实现的详细说明&a…...

编程日记 2025/12/22 7:10:19

物联网无线传感方向专业词汇解释

涡旋电磁波(VEMW)&#xff1a;一种具有轨道角动量的电磁波&#xff0c;其特性在于能够在传播过程中携带额外的相位信息&#xff0c;从而增加通信系统的容量和灵活性。波前&#xff1a;波动传播过程中&#xff0c;同一时刻振动相位相同的所有点构成的几何曲面&#xff0c;代表波…...

编程日记 2025/12/31 15:02:06

Maven 插件参数注入与Mojo开发详解

&#x1f9d1; 博主简介&#xff1a;CSDN博客专家&#xff0c;历代文学网&#xff08;PC端可以访问&#xff1a;https://literature.sinhy.com/#/?__c1000&#xff0c;移动端可微信小程序搜索“历代文学”&#xff09;总架构师&#xff0c;15年工作经验&#xff0c;精通Java编…...

编程日记 2025/12/30 18:07:58

C++中void*知识详解和注意事项

一、void* 是什么&#xff1f; 在 C/C 中&#xff0c;void* 表示一个通用指针类型&#xff08;generic pointer&#xff09;&#xff0c;可以指向任意类型的对象&#xff0c;但 不能直接解引用或进行算术运算&#xff0c;必须先进行类型转换。 void* ptr; // 可以指向任意类型…...

编程日记 2025/12/7 9:25:17

2024年全国青少年信息素养大赛——算法创意实践挑战赛复赛真题(小学组)——玫瑰花地的面积

2024年全国青少年信息素养大赛——算法创意实践挑战赛复赛真题(小学组)——玫瑰花地的面积 上面试卷可点下方&#xff0c;支持在线编程&#xff0c;在线测评&#xff5e; 2024年全国信息素养大赛 算法创意实践挑战赛复赛(小学组)_c_少儿编程题库学习中心-嗨信奥 5月17号 全国青…...

编程日记 2025/12/26 21:37:47

【补充笔记】修复“NameError: name ‘ZhNormalizer‘ is not defined”的直接方法

#工作记录 一、问题描述 在运行CosyVoice_For_Windows项目时&#xff0c;出现以下报错&#xff1a; File "F:\PythonProjects\CosyVoice_For_Windows\cosyvoice\cli\frontend.py", line 74, in __init__ self.zh_tn_model ZhNormalizer(remove_erhuaFalse, fu…...

编程日记 2025/12/30 8:06:10

预训练模型实战手册：用BERT/GPT-2微调实现10倍效率提升，Hugging Face生态下的迁移学习全链路实践

更多AI大模型应用开发学习内容&#xff0c;尽在聚客AI学院。 一. 预训练模型&#xff08;PTM&#xff09;核心概念 1.1 什么是预训练模型&#xff1f; 预训练模型&#xff08;Pre-trained Model, PTM&#xff09;是在大规模通用数据上预先训练的模型&#xff0c;通过自监督学…...

编程日记 2025/12/27 21:10:27

并发笔记-给数据上锁（二）

文章目录 核心挑战 (The CRUX)29.1 并发计数器 (Concurrent Counters)1. 简单非并发计数器 (Figure 29.1)2. 同步计数器&#xff08;单锁版本 - Coarse-Grained Lock, Figure 29.2&#xff09;3. 可伸缩计数&#xff1a;近似/懒惰计数器 (Approximate/Sloppy Counter, Figure 2…...

编程日记 2025/12/25 15:13:21