呜啦!日常碎碎念,偶尔掉落优质前端博文推荐、学习资源等
网页:https://tg.cosine.ren
本频道的搜索Bot 来辣 👉 @cosSearchBot
私聊直接发消息就可以搜索啦~
🔖tags
#优质博文 #资源推荐 #博客更新 #碎碎念 #项目更新 #手工 #书摘 #阮一峰的科技周刊 #新动态

图频:Cosine 🎨 Gallery @CosineGallery
猫片: @cosine_cat
#AI
这几天好累没有更新🥹 简单 mark 一下。

https://fixupx.com/Manjusaka_Lee/status/1944414735715479807

NadeshikoManju@薫る花は凛と咲く7月5日播出(@Manjusaka_Lee):讲一下目前自己对于目前 AI 路线的一个小想法
个人目前觉得 AI Agent 在迎来自己的真正的 iPhone4 时有一个问题是需要解决。即如何高效的去创建 Sandbox。
如同大家所看到的一样,目前 MCP 也好,还是其余协议也好,随着我们赋予模型或者 Agent 的权限越来越大。意味着攻击手段也会越来越多样化(如同容器一样,你可能永远不知道你引入的 prompt 或者你依赖的 API Provider 加了什么料),比如最近的一个很有趣的例子是附录1提到基于 Supabase MCP 攻击。
这意味着我们需要一个更有效率的 Sandbox 让我们进行 dry run 的操作。
而更有效率的 Sandbox 意味着几点
1. 强隔离(runc 这种逃逸满天飞的还是有点不太适合)
2. 启动快
3. 能耗小
而在这方面,Apple 实际上进行了一个先手布局。在 macOS 11.0 之后,Apple 发布了一套快速,轻量的虚拟框架 vz(参见附录2),而最近,Apple 更进一步的发布了开源的 container 套件(参见附录3)。VZ 开发体验相对良好,能耗表现极好。我觉得是为后续 macOS 生态的 AI Agent 铺平了道路
说回下一个时代的 Sandbox,看着几点主要诉求,可能很多同学第一时间就反应过来了这不是 Serverless 之前衍生出来的高性能的安全容器的需求嘛?这个时候,再去会看 NSDI 2020 AWS 发布的 Firecracker: Lightweight Virtualization for Serverless Applications (参见附录4),就会有一种恍惚感。技术路线总是会在不经意间交叉
而至于 Windows,其实 WSL 的开源我觉得也是在为后续的可定制化的 AI Sandbox 打样。但是我自己对于 hyperv 体系不甚了解就不在此处乱讲了。
差不多就这样,深夜的一点胡乱思考
附录:
1. https://read.readwise.io/new/read/01jztvkzkv792149kne27x2v95
2. https://developer.apple.com/documentation/virtualization
3. https://github.com/apple/container
4. https://www.usenix.org/conference/nsdi20/presentation/agache
#碎碎念 #面
今天晚上面了 暗恋对象 @eruusagi 🥹
《关于我面基发现知名推友竟是以前一起做过字节校园项目的伙伴这件事》
完全没对上号,呜呜呜呜,人家把我对上了(我好渣ww)

以及昨天 vueconf 面的忘记在频道发了补一下ww
#碎碎念 #旅游
特种兵 の 证明(x)
TIM 对不起但是这个真的哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈
cosine - 前端人の日常频道
#碎碎念 #前端 #工程化 好好好 “cargo for JavaScript” 好大的饼,等发布了康康,我对这种还是一向持积极态度的,有人弄是好事
看到有没到现场的群友觉得vite继续做这些也无法避免继续让前端工具链碎片化。

但其实现场直接有人问尤雨溪这个经典问题了,前面10个工具链不够好,又开发一个,于是我们有11个了,怎么面对这种问题?
回答是需要时间,实现再好也不会有魔法让所有想切换的人一下子换成vite+工具链;
演讲前文也提到过,在合适的时机做合适的事很重要,vite实际上从起步发展到现在,进展非常迅速,社区接受度已经很高了(已经被广泛采用或者作为大部分框架的默认脚手架),是前端工具链最有希望做成这件事的团队。

如果问我,我会说看看其他领域怎么解决类似问题的,cargo的优秀示范在前面,py那边也要uv在做类似的生态位,前端工具链当然也需要这样一个角色
#碎碎念 #前端 #工程化
好好好 “cargo for JavaScript”
好大的饼,等发布了康康,我对这种还是一向持积极态度的,有人弄是好事
#优质博文 #webgl #r3f #性能优化 #react
Three.js Instances: Rendering Multiple Objects Simultaneously

AI 摘要:本文详细介绍了在 Three.js 中使用实例化(Instancing)技术来优化性能,同时渲染多个对象。通过实例化,可以将多个共享相同几何形状和材质的对象合并为一个绘制调用(Draw Call),显著减少 CPU 到 GPU 的通信开销,从而提升渲染效率。文章结合 React Three Fiber 和 drei 库,提供了从基础实例化到复杂场景(如森林渲染)的完整教程,涵盖了自定义着色器、实例属性调整以及多种实例集的实现方法。

1. 引言:介绍了实例化的基本概念及其性能优势。实例化允许在一次绘制调用中渲染多个共享几何形状和材质的对象,例如渲染森林中的树木、岩石和草地时,可以大幅减少绘制调用次数,提升性能。
2. 基础实例化:以渲染一千个盒子为例,展示了传统方法与使用 drei/instances 的实例化方法的对比。传统方法需要一千次绘制调用,而实例化方法仅需一次,显著优化了性能。
3. 多组实例化:讨论了如何使用 drei 的 createInstances() 函数创建多个实例集,例如同时渲染盒子和球体(一千个盒子与一千个球体),最终仅需两次绘制调用。
4. 自定义着色器的实例化:讲解了如何为实例化对象创建自定义着色器材料,包括顶点动画(如 blob 效果)。通过 instanceMatrix 属性解决位置重叠问题,确保每个实例有独立的变换。
5. 调整实例属性:介绍了如何通过 InstancedAttribute 为每个实例设置自定义属性,例如为 blob 动画添加时间偏移(timeShift),实现独立动画效果。
6. 创建森林场景:以渲染一千棵树为例,展示了如何加载 3D 模型并应用实例化技术,最终仅用三次绘制调用完成整个森林场景(包括天空盒和地面)。还通过随机位置、高度和旋转增加场景多样性。
7. 进一步阅读:提及了未深入探讨但值得关注的主题,如批量网格(Batched Meshes)、骨骼动画(Skeletons)以及变形(Morphing)与批量网格的结合。


author Matias Gonzalez Fernandez
#工具推荐 #Git #任务管理 #开源 #tools
Backlog.md - 在 git 仓库中用 .md 生成并管理项目看板 | GitHub
AI 摘要: Backlog.md 是一款面向 git 用户的本地项目看板工具,通过将任务以 Markdown 文件形式存储在 git 仓库中,实现项目管理和代码管理的无缝结合。它支持命令行和网页两种操作模式,无需云端和账号,注重数据隐私和本地协作,适合对安全性和离线工作有需求的开发者或团队。同时,它集成了 AI 助手、跨平台支持等功能,开源且免费。
Backlog.md - 在 git 仓库中用 .md 生成并管理项目看板 - 小众软件
#优质博文 #chrome #webgl #性能优化 #浏览器 #新动态
Introducing Skia Graphite: Chrome's Rasterization Backend for the Future

AI 摘要:本文详细介绍了 Chrome 在 Apple Silicon Macs 上推出的 Skia 新光栅化后端 Graphite。Graphite 是一个面向未来的图形渲染技术,显著提升了 Chrome 在 Motionmark 1.3 测试中的表现,同时为未来的图形改进奠定了基础。通过支持现代图形 API(如 Metal、Vulkan 和 D3D12)、多线程设计以及深度测试等创新技术,Graphite 不仅提高了渲染性能,还优化了用户体验,减少了滚动卡顿和页面加载等待时间。

1. Skia 在 Chrome 中的历史
• 介绍了 Skia 作为 Chrome 图形渲染核心的历史,从最初的性能问题到引入 GPU 加速后端 Ganesh。
• Ganesh 虽性能优异,但因其以 OpenGL 为中心的设计,难以充分利用现代图形 API 的优势,因此团队开发了 Graphite。

2. Graphite 的成果
• 在 Macbook Pro M3 上,Motionmark 1.3 得分提升近 15%。
• 优化了真实世界指标,如交互到下一帧时间(INP)、最大内容绘制时间(LCP)、图形流畅度(掉帧百分比)以及 GPU 内存使用等。

3. Graphite 与 Ganesh 的区别
现代图形 API:Graphite 利用 Chrome 的 WebGPU 实现 Dawn,支持 Metal、Vulkan 等现代 API,减少维护负担并提升多线程和 GPU 计算能力。
2D 深度测试:通过深度测试减少过度绘制(overdraw),优化不透明和半透明对象的渲染顺序,提升性能并降低移动设备功耗。
多线程设计:Graphite 的 API 支持多线程,利用独立记录器(Recorders)在多线程上生成记录(Recordings),减轻主线程负担,减少卡顿和延迟。
性能悬崖与管线编译:Graphite 减少渲染管线数量,避免因管线编译导致的卡顿,确保复杂内容与简单内容渲染效率一致。

4. 未来计划
多线程光栅化:计划将光栅化任务分配到多线程,进一步提升性能。
减少简单内容的 GPU 内存:通过重新发布记录(Recordings)优化滚动,减少不必要的 GPU 内存分配。
GPU 计算路径光栅化:探索 GPU 计算路径光栅化技术,提升视觉质量和性能,替代传统的 MSAA 和 CPU 光栅化。


author Claire Charron
#demo #前端 #webgl #r3f
Animations with React-Three-Fiber
Demo | GitHub
Bring static visuals to life with rotating textures, 3D geometry, and smooth motion powered by React Three Fiber.
使用旋转纹理、3D 几何图形和由 React Three Fiber 驱动的平滑运动,将静态视觉效果赋予生命力。
Media is too big
VIEW IN TELEGRAM
#demo #前端 #css #动画 #设计
经典键盘的实现!很酷

jhey ʕ•ᴥ•ʔ (@jh3yy):keypad w/ CSS + <img> layers 🧑‍🍳
.key { mask: url(keycap.png); }
.key:active img { translate: 0 20%; }
use keycap images as a mask for the container that they translate in
bonus: clip-path to clip the hit area + filter to style the keys 🤙


https://fixupx.com/jh3yy/status/1943132402315886934

不过这个没给demo链接,只是给了思路和展示。
代码什么的可以看看这个类似的。
Twitter | Github
Back to Top