标签： ray

发布于

CSS `Ray Tracing` (`WebGPU`) 结果用于 CSS `filter` 或 `backdrop-filter`

咳咳，大家好！今天咱们来聊点儿刺激的，把CSS玩出新高度！主题就是：CSS Ray Tracing (WebGPU) 结果用于 CSS filter 或 backdrop-filter。 这玩意儿听起来高大上，其实说白了，就是把光线追踪这种3D渲染技术，搬到网页上来，然后用它生成的结果，给CSS的filter或者backdrop-filter当燃料，让你的网页元素变得更炫酷。 一、啥是光线追踪(Ray Tracing)？ 先别急着晕，咱们简单科普一下。光线追踪，顾名思义，就是模拟光线的传播路径。想象一下，你眼睛看到一个东西，是因为光线从光源出发，经过各种反射、折射，最后进入你的眼睛。光线追踪就是反过来，从你的“眼睛”（也就是屏幕上的像素）出发，向场景中发射光线，追踪这些光线与场景中物体的碰撞，计算出每个像素应该是什么颜色。 优点： 真实感强，可以模拟复杂的光影效果，比如反射、折射、阴影等。 缺点： 计算量巨大，非常吃硬件资源。 二、WebGPU：光线追踪的助推器 光线追踪这么耗资源，以前在网页上基本没戏。但是，WebGPU的出现，让这一切成为了可能。 WebGPU是下一代的Web图形A …

继续阅读“CSS `Ray Tracing` (`WebGPU`) 结果用于 CSS `filter` 或 `backdrop-filter`”

发布于

JS `WebGPU` `Ray Tracing` `Denoising Algorithms` (`NLM`, `SVGF`)

各位观众老爷，晚上好！今天咱们来聊聊WebGPU和Ray Tracing的那些事儿，顺便再扒一扒降噪算法（NLM和SVGF）的底裤。准备好了吗？系好安全带，发车啦！ WebGPU：新时代的图形引擎 首先，WebGPU是什么？简单来说，它是下一代的Web图形API，旨在取代WebGL。WebGL虽然功不可没，但它毕竟是基于OpenGL ES，受限于OpenGL的历史包袱，效率和功能上都有些捉襟见肘。WebGPU的目标是提供更低的开销、更现代的GPU功能，以及更强大的并行计算能力。 想象一下，WebGL就像一辆老旧的自行车，虽然也能骑，但速度慢，维护麻烦。而WebGPU则是一辆配备了涡轮增压发动机的跑车，性能强大，而且更省油！ WebGPU的核心概念包括： Devices (设备)：代表一个GPU。 Queues (队列)：用于提交命令。 Buffers (缓冲区)：用于存储数据，比如顶点数据、纹理数据。 Textures (纹理)：用于存储图像数据。 Samplers (采样器)：用于控制纹理的采样方式。 Shaders (着色器)：用WGSL（WebGPU Shading Langua …

继续阅读“JS `WebGPU` `Ray Tracing` `Denoising Algorithms` (`NLM`, `SVGF`)”

发布于

JS `WebGPU` `Ray Tracing` (`BVH` 结构) 实现与性能调优

各位观众老爷们，欢迎来到今天的 WebGPU Ray Tracing 性能调优脱口秀（误）。今天咱们聊聊怎么用 WebGPU 搞定光线追踪，还必须得是带 BVH 加速的那种，最后再顺手调调性能。保证各位听完之后，以后面试再也不怕被问到 WebGPU 光追了！ 一、WebGPU 光追：Hello, World! 之后该干啥？ 首先，咱们得明确一点：WebGPU 本身并没有内置的光线追踪 API。所以，咱们得自己手动实现。这听起来吓人，但其实也就那么回事。核心思路就是： 光线生成 (Ray Generation)： 从摄像机发出光线，穿过屏幕上的每个像素。 场景相交测试 (Scene Intersection)： 检查光线是否与场景中的物体相交。 着色 (Shading)： 如果光线相交，根据材质属性和光照计算像素颜色。 最简单的光线追踪，那就是遍历场景中的每个三角形，看看光线是不是跟它相交。这效率嘛，懂得都懂，简直慢到姥姥家了。所以，我们需要 BVH (Bounding Volume Hierarchy) 这种神器来加速相交测试。 二、BVH：光追加速的秘密武器 BVH，简单来说，就是把 …

继续阅读“JS `WebGPU` `Ray Tracing` (`BVH` 结构) 实现与性能调优”

发布于

JS `WebGPU` `Ray Tracing` (光线追踪) 的实现与性能挑战

各位靓仔靓女，晚上好！我是今晚的主讲人，很高兴能和大家一起聊聊 WebGPU 中的 Ray Tracing（光线追踪）。 今天咱们的主题是 “JS WebGPU Ray Tracing：实现与性能挑战”。 听到这个题目，是不是感觉有点 high-tech？ 别怕，咱们今天就把这玩意儿给它掰开了揉碎了，用最接地气的方式，让大家都能听明白，甚至能上手撸两行代码。 开场白：为啥要搞 WebGPU Ray Tracing？ 首先，咱们得明白一个问题：为啥要在 WebGPU 里面搞 Ray Tracing？ 答案很简单：因为它炫酷啊！ 开玩笑的，当然是因为它能带来更逼真的渲染效果。 传统的 rasterization (光栅化) 技术，虽然速度快，但模拟光照效果时，总是会遇到各种各样的问题，比如阴影不真实、反射不准确等等。 而 Ray Tracing 就不一样了，它通过模拟光线的传播路径，能够更真实地模拟光照效果，从而产生更加逼真的图像。 更重要的是，WebGPU 给了我们一个在 Web 上实现高性能图形渲染的机会。 以前在 Web 上搞复杂图形应用，那简直就是噩梦。 现在有了 WebGPU，我 …

继续阅读“JS `WebGPU` `Ray Tracing` (光线追踪) 的实现与性能挑战”

发布于

Ray 分布式强化学习：构建大规模并发 RL 实验

各位观众老爷们，大家好！今天咱们来聊聊怎么用 Ray 这个神器，搞定分布式强化学习，让你的 RL 实验跑得飞起，并发量嗖嗖地往上涨！ 开场白：为啥要搞分布式 RL？ 各位可能要问了，单机跑 RL 不是挺好的吗？为啥要费劲搞分布式？ 这个问题问得好！单机跑 RL，就像用小马拉大车，数据量一大，神经网络一复杂，立马就歇菜了。训练速度慢得让人怀疑人生，调参调到怀疑世界。 想象一下，你要训练一个机器人玩 Atari 游戏，需要成千上万局的游戏数据。单机跑，可能要跑好几天甚至几个星期。这时间，够你把游戏机都玩穿了！ 所以，为了解决这些问题，我们就需要分布式 RL。它可以把训练任务分解到多个机器上，并行执行，大大缩短训练时间，提高效率。就像雇了一群小弟帮你搬砖，速度自然快多了！ Ray：分布式 RL 的瑞士军刀 说到分布式 RL，就不得不提 Ray。Ray 是一个开源的分布式计算框架，它简单易用，功能强大，是构建大规模并发 RL 实验的利器。 你可以把 Ray 想象成一个超级调度员，它可以把你的 RL 任务分配到不同的机器上执行，并负责收集结果。你只需要关注你的 RL 算法本身，而不用操心底层的分 …

继续阅读“Ray 分布式强化学习：构建大规模并发 RL 实验”

发布于

Optuna/Ray Tune：Python 机器学习超参数优化

好嘞，各位看官，今天咱们来聊聊机器学习里一个既重要又有点让人头大的话题：超参数优化！别担心，今天咱不搞那些晦涩难懂的公式，就用大白话，加上一点点幽默，把这个“调参”的艺术给您掰开了、揉碎了，嚼烂了喂给您！ 开场白：超参数，你这个磨人的小妖精！ 话说，咱们搞机器学习，就像厨师做菜。模型就是锅碗瓢盆，数据就是食材，而超参数，就是盐、糖、酱油这些调味料。食材再好，锅再高级，调味料放不对，那菜也得砸锅！ 超参数这玩意儿，它不像模型里的参数，可以通过训练自动学习。它得咱们手动设置，而且不同的超参数组合，对模型的效果那可是天差地别。这就好比做红烧肉，有人喜欢甜口，多放糖；有人喜欢咸口，多放酱油。放多少？比例如何？全凭经验和感觉，简直就是玄学！🤯 更可怕的是，超参数的数量往往还不少！学习率、批次大小、正则化系数、网络层数… 一不小心就排列组合出一个天文数字般的可能性，一个个试过去，那得试到猴年马月啊！🤦‍♂️ 所以，超参数优化，也叫“调参”，就成了机器学习工程师们的一大难题。手动调参？效率太低！随机搜索？碰运气！网格搜索？组合爆炸！难道就没有什么更优雅、更智能的方法了吗？ 救星登场：Optuna 和 …

继续阅读“Optuna/Ray Tune：Python 机器学习超参数优化”