1.浏览器上的网页3D—WebGL和Three.js
2.体渲染原理及WebGL实现Volume Rendering
3.[技术随笔]🛠🛠从源码安装Pytorch3D详细记录及学习资料
4.Three.js知识梳理一：Three.js概述和基础知识
5.3d稀疏卷积——spconv源码剖析（五）

浏览器上的3D—WebGL和Three.js

       WebGL是什么

       WebGL，全称为Web Graphics Library，渲渲染是染源一种3D绘图协议。它允许将JavaScript和OpenGL ES 2.0结合，码网通过增加一个JavaScript绑定，页d源码WebGL可以在HTML5 Canvas中提供硬件加速的网页c编加密文件源码3D渲染。这使得Web开发人员能够利用系统显卡在浏览器中更流畅地展示3D场景和模型，渲渲染创造复杂的染源导航和数据可视化，且无需开发专用的码网渲染插件，适用于创建具有复杂3D结构的页d源码网站页面或3D网页游戏。

       WebGL的网页工作原理

       WebGL主要通过点、线、渲渲染三角形进行基本绘图，染源复杂图形则通过三维软件导出顶点坐标，码网通常存储在显存中以加速GPU读取。页d源码顶点坐标通过顶点着色器由OpenGL ES编写，JavaScript定义并传递给GPU生成三角形。顶点着色器处理顶点坐标转换为屏幕坐标，包括应用投影矩阵将三维坐标转换为屏幕坐标。片元着色器负责给模型上色，计算模型的颜色、质地、灯光等，生成像素，完成整个渲染过程。jquery 消消乐源码

       WebGL完整工作流程

       WebGL工作流程分为准备数据、生成顶点着色器、图元装配、生成片元着色器和光栅化五个阶段。准备数据阶段提供顶点坐标、索引、UV坐标、法线等数据；生成顶点着色器阶段由JavaScript定义顶点着色器程序；图元装配阶段GPU根据顶点数量运行顶点着色器程序，生成最终坐标；生成片元着色器阶段处理模型颜色、质地、光照等；光栅化阶段通过片元着色器确定每个像素颜色，最终完成渲染。

       three.js是什么

       three.js是一个基于WebGL的库，封装了3D渲染需求中的重要工具和渲染循环。它简化了WebGL的接口，降低了学习成本，使开发者能够更加轻松地创建3D应用。three.js处理WebGL的大部分细节，提供了人类可读的3D API，使开发人员能够更加专注于创意和设计。

       推荐资料

       了解three.js的更多信息，可以参考以下资源：

       three.js - Javascript 3D library（官方网站）

       three.js / documentation（官方文档）

       Three.js 中文文档（内容可能不全或过时，仅可作为参考，请以官方英文文档为准）

       three.js / examples（官方示例）

       github.com/mrdoob/three...

       专栏：THREE.JS源码注释 - CSDN博客（十分详细的asp随机出题源码源码解读）

       官方双语/合集线性代数的本质（基础知识，关于矩阵）

       参考文章

       深入理解WebGL&Three.js工作原理 - cnwander - 博客园

       three.js 现学现卖

体渲染原理及WebGL实现Volume Rendering

       体渲染（Volume Rendering）作为NeRF神经场辐射AI模型的基础，与传统渲染方法不同，它采用体积光线投射（Volume Ray Casting）等特殊方法来显示3D图形。

       本文将介绍体渲染的原理，并使用Three.js实现一个简单的体渲染器，源代码可在Github下载。推荐使用NSDT编辑器快速搭建可编程3D场景。

       1、体渲染基础

       体渲染是一种基于图像的方法，通过沿3D体积投射光线，将3D标量场渲染为2D图像。屏幕上的每个像素都是光线穿过立方体并按一定间隔从体素获取强度样本的结果。

       如何投射光线呢？一个简单的方法是使用大小为(1,1,1)的3D网格立方体，并在两个不同的渲染通道中渲染正面和背面（启用和禁用背面剔除）。

       对于屏幕中生成的每个立方体片段，我们可以创建一条从立方体正面开始并在背面结束的射线。有了光线的起点和终点，我们就可以开始对体素进行采样，以生成最终的片段颜色。

       2、准备原始文件

       原始文件通常非常简单，仅包含体素强度，没有标头或元数据，并且通常每个体素具有按X、限时抢购软件源码Y和Z顺序排列的8位（或位）强度值。

       由于WebGL目前不支持存储或采样3D纹理，因此我们必须以2D纹理可以使用的方式存储它。我们可以存储一个png图像文件，其中所有Z切片一个挨着一个，形成2D切片的马赛克。

       一旦png文件作为2D纹理加载到内存中，我们就可以使用自定义SampleAs3DTexture函数对其进行采样，就好像它是3D纹理一样。

       3、第一个渲染通道

       在第二步中，我们打算生成用作光线终点的片段。因此，对于第一个渲染通道，我们不是绘制背面颜色，而是将片段的世界空间位置存储在渲染纹理中，作为RGB片段颜色内的x、y、z坐标值。

       4、第二个渲染通道

       该渲染通道是实际执行体积光线投射的通道，它首先绘制立方体的正面，其中正面的每个点都将是光线起点。

       顶点着色器创建两个输出：投影坐标（片段的几何图形源码2D屏幕坐标）和世界空间坐标。世界空间坐标将用作光线起点，而投影坐标将用于对存储立方体背面位置的纹理进行采样。

       4.1 获取光线结束位置

       基于上一步的位置，我们对纹理进行采样，得到背面片段的世界空间位置。

       4.2 设置射线

       有了前面和后面的位置，我们现在可以创建一条从frontPos开始并在backPos结束的射线。

       4.3 光线行进

       一旦设置了射线，我们就开始从起始位置行进射线并将射线当前位置向方向推进。在每个步骤中，我们都会对纹理进行采样以搜索体素强度。

       最后，片段着色器返回所遍历的体素值的合成结果。

[技术随笔]🛠🛠从源码安装Pytorch3D详细记录及学习资料

       在启动安装Pytorch3D之前，首要任务是选择合适的pytorch基础镜像。我选择了包含CUDA组件和驱动的pytorch 1.9的devel版本，以确保满足Pytorch3D对于pytorch和cuda版本的要求。我使用的是python 3.7、pytorch 1.9和cuda.2，前提是你已经在宿主机上配置好了显卡驱动和nvidia-docker，以便在容器内映射宿主机的显卡信息。

       在安装前，确保nvcc编译器、CUDA工具箱和驱动正常运行，并且安装了git、vim、sudo和curl等基础工具。

       下一步是配置CUB工具。按照Pytorch3D的安装文档，为了支持CUDA，需要先配置CUB，并设置CUB_HOME环境变量。由于选择的镜像包含CUDA，编译过程中会自动包含cuda。为保险起见，可以指定FORCE_CUDA环境变量为1。

       从源码编译Pytorch3D时，避免了使用conda可能遇到的依赖冲突问题。在确认前两步没有问题后，编译过程通常顺利。安装完成后，检查日志和pytorch3d的版本信息。

       为了验证Pytorch3D的正常运行，从ARkit中导出BS系数，尝试使用它渲染一个简单的白模，并利用GPU。观察到显卡被充分利用，表明设置正确，可以进行后续操作。

       在完成安装并验证Pytorch3D的功能后，可以参考收集的资料来探索其更高级的用法。以下是几个示例：

       从Pytorch3D文档中获取的教程和代码示例。

       开源社区的讨论和问题解答，特别是与Pytorch3D相关的话题。

       个人经验分享和案例研究，可以在GitHub、Stack Overflow等平台找到。

       通过这些资源，您可以深入学习Pytorch3D的功能和应用，进一步拓展其在计算机图形学、三维重建和深度学习等领域的应用。

Three.js知识梳理一：Three.js概述和基础知识

       Three.js是一个基于JavaScript的开源3D图形库，利用WebGL技术在网页上渲染3D图形。它提供多种高级功能，如几何体、纹理、光照、阴影等，让开发者快速创建复杂逼真的3D场景。Three.js具有跨平台和跨浏览器兼容性，无需插件，现代浏览器即可观看3D内容。

       Three.js始于年，由mrdoob创建。WebGL兴起时，开发者对于应用充满好奇和期待，mrdoob希望提供一个简单易用的工具，于是Three.js应运而生。经过多年发展和社区贡献，它成为流行3D图形库之一，拥有丰富功能和庞大用户群体。

       Three.js应用广泛，涉及领域包括互动式可视化、游戏开发、虚拟现实、增强现实、在线教育、影视动画、建筑可视化、艺术装置与展览等。

       基础知识包括场景、相机、渲染器、几何体、材质和光源概念。场景代表3D空间，包含所有要渲染的物体。相机定义观察点，决定渲染部分。渲染器将场景和相机信息渲染到屏幕。几何体定义3D物体形状，材质决定外观，网格结合几何体和材质。光源提供光照，增加明暗、阴影效果。

       深入探索Three.js的高级功能和性能优化技巧。建议资源和学习方向包括套精选项目源码，关注公众号「码农园区」，回复源码获取全套源码下载链接。

3d稀疏卷积——spconv源码剖析（五）

       介绍在构建的Rulebook指导下执行特定的稀疏卷积计算，关注于类SparseConvolution，其代码位于spconv/conv.py。

       Fsp.indice_subm_conv和Fsp.indice_conv经过spconv/functional.py中的SubMConvFunction和SparseConvFunction对象转换，最终会调用spconv/ops.py模块中的indice_conv等函数。

       专注于子流线卷积接口：indice_subm_conv，其代码位于spconv/functional.py。

       通过Python接口调用底层C++函数可能不够直观，因此使用torch.autograd.Function封装算子底层调用，该类表示PyTorch中的可导函数，具备前向推理和反向传播实现时，即可作为普通PyTorch函数使用。

       值得注意的是，Function类在模型部署中具有优势，若定义了symbolic静态方法，此Function在执行torch.onnx.export()时，可依据symbolic定义规则转换为ONNX算子。

       apply方法是torch.autograd.Function的一部分，此方法负责在前向推理或反向传播时的调度工作。通过将indice_subm_conv = SubMConvFunction.apply简化为indice_subm_conv接口，简化了算子使用，屏蔽了SubMConvFunction的具体实现。

       SubMConvFunction的前向传播方法forward调用spconv/ops.py的indice_conv函数。在src/spconv/all.cc文件中，通过PyTorch提供的OP Register对底层C++API进行注册。

       通过torch.ops.load_library加载.so文件，使用torch.ops.spconv.indice_conv调用src/spconv/spconv_ops.cc文件中的indiceConv函数。

       深入探索src/spconv/spconv_ops.cc文件中的indiceConv函数。

       代写部分代码内容...