浏览器收藏夹的东西太多又没简介，收藏过就忘了看，所以博客上单独开个收藏夹，记录些会经常回来看的东西

独立博客 ​

• 从浏览器渲染原理谈动画性能优化 | 云音乐大前端专栏 云音乐大前端专栏 github 归档
• 高效的 GraphQL + Ant.Design - Randy's Blog
• 冴羽写博客的地方
• 面向信仰编程
• （已挂）精选技术资讯渠道合集 - 拍岸的博客 | Paian's Blog
• cssinspirationguide - csc inspiration guide online
• 懶惰的權利 - 曼努 manzoo
• 暂未下沉的离岛 - 舒乐熊
• dtysky | 一个行者的轨迹 Github | dtysky (Tianyu Dai)
• SardineFish
• 构建我的被动收入 _（注：文章写得不错）
• James Smyth | Creating stylized grass in WebGL
• 傅里叶变换交互式入门 GitHub: Jezzamonn/fourier 作者: Jez Swanson
• 与上个示例相似的3D动画: Bartosz Ciechanowski GitHub: Bartosz Ciechanowski
• 早早聊分享——前端女生职业路 Blog:麻凯倩
• 何遇的博客 - Github:QxQstar (何遇) - 掘金:何遇er 的个人主页

独立博客列表 ​

• 【独立博客收录】十年之约
• volfclub/travellings: 开往-友链接力
• timqian/chinese-independent-blogs: 中文独立博客列表 发布页
• Izzy Burton

设计博客 ​

• 腾讯工作心得：原型该画到什么程度?
• 信息容器的归类与应用-优设网
• 定义开发者体验 | 开发者体验：探索与重塑
• 动效输出格式科普（上下两期资源合集） · 语雀

设计师/插画师 ​

• Twitter:OTOMICA /ご依頼10月〜 (@otom1ca) tumblr lilToon - Unity Toon Shader

页面设计实例 ​

• 素马设计
• 365 A Year of Cartier
• CSS Design Awards - Website Awards - Best Web Design Inspiration - CSS Awards
• 优秀网页设计欣赏: Web Design File - Website Awards | Web Design Inspiration
• Awwwards - Website Awards - Best Web Design Trends
• 4db * 地域別Webデザインリンク集
• 縦長のwebデザインギャラリー・サイトリンク集｜MUUUUU.ORG
• KPR | Story
• 与我协作，让 <div> 变成杰作 - GitHub: SuneBear/freelance-landing - 与舒乐熊一起快乐协作手册.pdf - 开源一个我 2024 接活用的介绍页 - V2EX

页面设计参考 ​

• 场景交互设计 - PC端
• 场景交互设计 - 移动端
• 样式片段搜索
• tailwind 样式复制
• tailwind 组件样式
• tailwind 组件样式卡片

Design Inspiration (from Free for Developers with Github) ​

• awwwards. - [Top websites] A showcase of all the best-designed websites (voted on by designers).
• Behance - [Design showcase] A place where designers showcase their work. Filterable with categories for UI/UX projects.
• dribbble - [Design showcase] Unique design inspiration, generally not from real applications.
• Landings - [Web Screenshots] Find the best landing pages for your design inspiration based on your preference.
• LovelyLanding.net - [Landing Page Designs] Frequently updated landing page screenshots. Includes Desktop, Tablet, and Mobile screenshots.
• Mobbin - [Mobile screenshots] Save hours of UI & UX research with our library of 50,000+ fully searchable mobile app screenshots.
• Mobile Patterns - [Mobile screenshots] A design inspirational library featuring the finest UI UX Patterns (iOS and Android) for designers, developers, and product makers to reference.
• Screenlane - [Mobile screenshots] Get inspired and keep up with the latest web & mobile app UI design trends. Filterable by pattern and app.
• scrnshts - [Mobile screenshots] A hand-picked collection of the finest app store design screenshots.
• UI Garage - [Mobile and web screenshots] Daily UI inspiration & patterns for designers and developers to find inspiration, tools, and the best resources for your project.
• Refero - [Web screenshots] Tagged and searchable collection of design references from great web applications.

作品集 ​

• Stefan Hiienurm | User Experience Designer
• Design Director - Bradley Haynes
• Takehiko Ono 注：nipponcolors.com 作者
• 倾城之链 | NICE LINKS
• Frontend Mentor | Front-end coding challenges using a real-life workflow

CSS 文章博客 ​

• Issues · chokcoco/iCSS（issue 形式博客 ）
• Issues · chokcoco/cnblogsArticle
• Michael-lzg/my--article
• chokcoco/CSS-Inspiration: 在这里找到写 CSS 的灵感！ [live demo]
• SVG 线条动画入门 - ChokCoco
• Coding an Interactive (and Damn Satisfying) Cursor - DEV Community - Codepen:Satisfying curly cursor - Twitter: Ksenia Kondrashova

编程规范 ​

• 网易 NEC 代码规范 : 更好的 CSS 样式解决方案
• 腾讯 TGideas 游戏团队代码规范
• 京东凹凸实验室 Aotu.io - 前端代码规范
• Google 软件工程之工具篇
• Google 软件工程之过程篇
• Google 软件工程之文化篇

手绘风格 CSS 库 ​

• papercss/papercss: The Less Formal CSS Framework
• fxaeberhard/handdrawn.css: Handdrawn.css lets you prototype your web site with a hand drawn look and feel.
• wiredjs/wired-elements: Collection of custom elements that appear hand drawn. Great for wireframes or a fun look.

CSS 模板工具 ​

• CodeMyUI
• CSSFX - Beautifully simple click-to-copy CSS effects
• NIPPON COLORS - 日本の伝統色 需翻墙
• Visualization Collection - 一个专注于前端视觉效果的集合应用 Github:hepengwei/visualization-collection
• whatamesh
• Particles for Framer
• Fresh Background Gradients

音频可视化库 ​

• howler.js - JavaScript audio library for the modern web

Canvas 效果库 ​

• 彩色纸屑:catdad/canvas-confetti - Live

WebGL ​

• 一步步学OpenGL3.3+ - 知乎 - 官方教程：OpenGL Step by Step - OpenGL Development

• oframe/ogl: Minimal WebGL Library(轻量的 webgl 渲染库) - OGL WebGL Library

• davidlyons/threejs-intro: Intro to WebGL with Three.js - Online Presentation

• Three.js 教程

• WebGL 教程

• 【原生WebGL实现渲染算法】Rendering algorithms implemented in raw WebGL 2. tsherif/webgl2examples

• webgl-fundamentals - preview

• webgl2-fundamentals - preview

• GLSL 详解（基础篇） · Colin's Nest

• GLSL 详解（高级篇） · Colin's Nest

• GAMES101-现代计算机图形学入门-闫令琪_哔哩哔哩_bilibili

• (创建 3D 场景工具)Verge3D 中国 ｜ FunJoy.Tech

• WEBGL 案例 - GhostCat

• 课程 PPT 和视频 – 计算机图形学与混合现实研讨会

• 从头开始学习 GLSL 着色器 Learn GLSL Shaders from Scratch_bilibili

• three.js 实战式入门教程 vite+three+vue3 - 效果网站：cpc-web-library

• 数据图表设计师。他的 repo 很有意思，各种粒子效果：wangyasai (Yasai) - e.g.Perlin-Noise

• 使用 WebGL 和 Shaders 进行高级创意编码【中英字幕 Advanced Creative Coding with WebGL & Shaders】

  • 这个链接是上面视频系列的 Shader 部分 webgl three.js 前端 3D shader 部分 opengl glsl 合集 中字_哔哩哔哩_bilibili
  • three-demos - 视频中的 code snippets

• WebGL 和着色器简介 - 无涯教程

• Modern OpenGL Tutorial - Compute Shaders - YouTube

• three.js WebGL Shaders Tutorial - For Beginners - YouTube

• WebGPU 中文社区-Orillusion/orillusion-web - Live - https://www.orillusion.com/ - 简介 - Orillusion | 第一个 WebGPU 中文社区 - 知乎

• pmndrs/threejs-journey: Bruno Simons journey demos in React

  • Live Lessons: Journey.pmnd.rs
  • Examples: React Three Fiber Documentation - Examples

• R3F - drei.pmnd.rs - Github

• (该框架的3D文字模型很好用) protectwise/troika

• 【ThreeJs 推荐教程】 30天成為鍵盤麥可貝：前端視覺特效開發實戰 - 作者: iT 邦幫忙::伍瑪斯

  Day27: WebGL Shader—透過Shader製作光暈：Shader傳值的原理 - iT 邦幫忙

• 这个博主讲了各种图像算法的实现：Maxim McNair

• 这个repo提供了各种效果源码和原理讲解：boytchev/etudes: Computer Graphics Études with WebGL and Three.js - Twitter:Pavel Boytchev

• 系统性Shader教程：B站 - 掘金 - 李伟的博客 - 示例代码Github

• 着色器语法API ：OpenGL-Refpages

• wshxbqq/GLSL-Card: 着色器语言 GLSL (opengl-shader-language)入门大全

• Gizmo: Fennec-hub/three-viewport-gizmo

WebGL 实例 ​

• threejs历年案例合集 - 2019案例

• threejs Resources

  • 真实感水面 WaterSurface: Interactive Water Surface shader component for React Three Fiber - X 上的 Three.js Resources

• threejs实例合集：The Best Three.js Resources in One Place | Three.js Resources

• threejs 实例合集:暮志未晚

• List of Explorations

• NovaEra Showcase

• akira-cn/graphics: 一些图形系统相关的小例子

• kavalcio/three-js-playground - Live

• chenjsh36/ThreeJSForFun: 收集关于 ThreeJS 的系列教程、Demo、工具，整理学习笔记和 Demo

• klevron/threejs-toys: ✨ ThreeJS Toys ⚡

• z2586300277/show-site: 一些案例网页展示

• dailycssdesign Shader创意合集(F12 源码)

• 让 WebGL 的暴雨拍打你的屏幕（雾） [Demo] [Code - SardineFish/raindrop-fx]

• (风格化渲染shader教程) Custom Toon Shader in Three.js - Tutorial

• [ThreeJs Sample] Pioneer – Corn. Revolutionized.

• 三盛网络

• Chartogne-Taillet

• Lusion

• Gergely Gizella - Full stack development and Illustration

• Mixamo - Character Model

• Oat The Goat – The Story – MoE

• Luis Henrique Bizarro — Creative Developer

• Elysium - A Tranquil 3D Nature World

• Make A Pie - 上海职住可视化

• Car Visualizer WebGL - The FWA

• Renault Espace Visualization

• 上面的例子是从这里来的：WebGL 实现 3d 渲染 - 知乎

• Shader Park shader-park/shader-park-core: A JavaScript library for creating real-time 2D and 3D shaders. JS -> Shader.

• OpenProcessing - Creative Coding for the Curious Mind

• 墨雨設計 | Monoame Design

• Codrops - Creative front-end resources and inspiration for web professionals (附源码的 demo)

• Liquid Distortion Effects - Codrops demo

• WebGL Distortion Hover Effects - Codrops github demo

• Interactive WebGL Hover Effects - Codrops github demo

• Mechanical Watch – Bartosz Ciechanowski

• KUBOTA FUTURE CUBE | Kubota Global Site

• CineShader

• 码语派 - 3D数字创意工作室

• 云朵 Thunder clouds - CodeSandbox - Twittter

• Threejs油画效果 dli/paint: Fluid Paint - live demo

• Threejs反射 MeshReflectorMaterial.js - 0beqz/vanilla-threejs-meshreflectormaterial-example

• Threejs SDF文字 带roughness的反射等各种实例 alienkitty/alien.js

• Threejs后处理效果 pmndrs/postprocessing

• ykob/sketch-threejs

• 瓦片加载: dragonir/zelda-map: zelda-map 塞尔达：旷野之息地图

• dragonir/threejs-odessey: Three.js 进阶之旅，掘金专栏配套项目

• Ocean Wave Simulation

• git1029/waves_threejs - Preview: Waves

• ThreeJS Caustics Github: martinRenou/threejs-caustics

• enable3d - Standalone 3D Framework

  • enable3d • 3D extension
  • Water

• Question: (模板测试截面轮廓实现)Cap outline in Threejs

  Answer: Three-mesh-bvh: A plugin for fast geometry raycasting and spatial queries!

  • gkjohnson/three-mesh-bvh
  • three-mesh-bvh - Projected Edge Generation
  • three-mesh-bvh - Skinned Mesh BVH
  • three-mesh-bvh - GPU Path Tracing
  • three-mesh-bvh - Clipped Edges
  • daign/clipping-with-caps: Clipping a mesh and covering the openings with caps in WebGL

• WebGL 3D Gaussian Splat Viewer- Live

• Realtime procedural planet shader in WebGL - Live

• Three.js Material which lets you do Texture Projection on a 3d Model

• Strange Attractors in WebGL - Live

• WebGPU Samples author:Martin Laxenaire | Creative front-end developer

• R3F Playground - Gravity - Maxime Heckel - Blog:Maxime Heckel's Blog - Twitter:@MaximeHeckel

• MeshTranslucentMaterial - CodeSandbox - Live - Twitter: Anderson Mancini

• CodePen: Glass Configurator (Three.js MeshPhysicalMaterial) - Twitter - Ksenia Kondrashova：This glass MeshPhysicalMaterial

• Portfolio 2023 - Michal Zalobny - Portfolio: Michal Zalobny - Github

• 只有一部分滤镜是怎么写的：实例 waterfalls - Github - Twitter

• 人体皮肤材质实例 Github: lo-th Twitter

• 丁达尔效应光线

• Scroll Shader: gotohiroki/three-monopo-london - three-monopo-london - Twitter: @G=H

• Hover Shader: List Hover Image Ripple - List Hover Image Ripple

• hand script Shadow: Handdrawn | Labs | OHZI Interactive

• Interctive Toys Created by ShoyaKajita. | WebGL, Three.js | GLSL Github:sho1374k (K's)

• 风格化草地: twitter: FluffyGrass - Github:thebenezer/FluffyGrass - Live

  • 类似实例：James-Smyth/three-grass-demo
  • 类似实例：KallkaGo/Grass: Webgl Grass - Live

• 原神启动shader: 超还原！three.js复刻原神启动 Github:gamemcu/www-genshin

• 小米汽车 su7

• 可交互水面 nhtoby311/WaterSurface: 🌊 Interactive Water Surface shader component for React Three Fiber - Live

• 真实感水面 Realistic water shader built with Three.js - Live

• 体积光教程 Eric Heitz's Research Page - WebGL实现

• 真实感海面 Spiri0/Threejs-WebGPU-IFFT-Ocean-V2

• 传送门Shader brunosimon/doom-portal-in-webgl - Live

• 模型破碎效果 dgreenheck/three-pinata: Three.js library for fracturing and slicing meshes in real time. - Live - Twitter

• 可生长的树 dgreenheck/tree-js: Procedural tree generator written with JavaScript and Three.js - Live: Tree.js

• Threejs可拖动曲线 danielesteban/fabrik: Forward and backward reaching inverse kinematics - Live: fabrik

• 延迟渲染示例

  • 丁达尔光效果 - Github:nemutas/light-shaft
  • tiansijie/Tile_Based_WebGL_DeferredShader: WebGL2 Deferred Shading Demo - Live: Chinese Painting Tile Based Deferred Shading
  • aadebdeb/Sample_WebGL2_DeferredRendering: Sample of Deffered Rendering in WebGL2
  • 推荐的教科书级demo:badwrongg/webgl-deferred-pbr: A deferred PBR renderer created with WebGL - Live: WebGL Deferred Rendering
  • 极简GBuffer threejs实现实例：deferred-rendering-1cfm5

• 透镜 reflect cursol - Github SourceCode; three-monopo-london

• 玻璃破碎的平面效果 @Ksenia Kondrashova / X - Broken Glass Effect (on click, WebGL)

• 软体效果 Three.js Blobby Apple Twitter:Ksenia Kondrashova

• 模型由多个部分组合怎么生成InstancedMesh troy351/three-instanced-group-mesh: instance a group of meshes for three.js

• InstancedMesh 怎么做不同实例的不同Skinned动画 luis-herasme/instanced-skinned-mesh: https://instanced-animation.vercel.app/

  同上另一个实例 @Cody Bennett：InstancedBatchedSkinnedMesh with GPU mixer. - InstancedBatchedSkinnedMesh - JSFiddle

• 风格化水 KallkaGo/Stylized-Water: create a stylized water shader in Webgl

• 值得学习的博主：Aadarsh Gupta (@AadarshGupta80) / X

  • 风格化交互草地示例： Three.js Experiments
  • Github: AadarshGupta07 (Aadarsh Gupta)
  • 3D丝带: AadarshGupta07/3d-ribbon
  • 3D泡泡Shader效果：https://github.com/AadarshGupta07/force-field 预览

• Configurator实例：运动鞋 shoe-configurator-qxjoj

• 屏蔽罩效果 Bhushan Wagh：「Interactive shield using three js Github:bhushan6/interactive-shield Live

• 程序化生成地形 IceCreamYou/THREE.Terrain - Live

• 原神角色渲染：KallkaGo/ToonShading: Unity Toon Shading Webgl replica - Live

• 物体表面热力图: Three.js InterpolatedGradientMaterial Temperature Heatmap Demo

• 液体滴落粘滞效果 & SDF的简介应用: three.js 实现露珠滴落动画 - Live

• 手绘效果shader：On Crafting Painterly Shaders - Maxime Heckel's Blog

• 布料模拟 nemutas/cloth-simulation - Live

• 无限地图平面 kkhanhluu/infinitown: 3D infinite town. Built with three.js - Live

• 图片的各种形变实例 Your magic WebGL carpet - Live

• 溶解特效 JatinChopra/Dissolve-Effect - Live

VRM 基于glTF的跨平台人物模型(便于绑骨和表情) ​

VRM is formulated on top of the 3D standard format glTF2.0 to handle the humanoid model. The humanoid motion (e.g. from motion capture) can be reproduced based on defined Humanoid bones in VRM

• 从这条推文开始认识 Misora Ryo：「I think I can do the skirt and hair swing I wanted to do.

  Using VRM-model, you can easily set up shaking things with spring-bone. You can set spring-bone on FBX model via unity, export with VRM-model, and display VRM-model with @pixiv/three-vrm.

• pixiv/three-vrm: Use VRM on Three.js https://github.com/pixiv/three-vrm

  • Live Examples: three-vrm example
  • mixamo animation example

• VRM 官方站 showcase

• VRM Consortium

• VRM 人物模型 hub 一个模型实例：AvatarSample_A - VRoid Hub

• Blender 导入插件：Import VRM file | STYLY

WebGL 博客 ​

• PlayCanvas Blog | The latest news and updates from the PlayCanvas Team.
• 网格采样摩尔纹的解决 The Best Darn Grid Shader (Yet). by Ben Golus | Medium - codesandbox - twitter@Renaud
• Immersive Studios - Digital Creative Agency

WebGPU 实例 ​

• compute.toys

3D 素材 & 商店 ​

• Poly Pizza: Free 3D models for everyone
• Mixamo
• 素材集合：Fasani/three-js-resources: A collection of resources for building 3D projects with three.js

TA 相关 ​

• [游戏美术文档]从技术到艺术（艺术篇） - 知乎
• [游戏美术文档]从技术到艺术（技术篇） - 知乎
• 美术设定案-石墨文档
• 浅墨的游戏编程 - 知乎
• 【傅老师】【OpenGL 教学】
• #Shader #WebGL 老闆週六來聊聊 - 聊聊外星圖像渲染語言 Shader 跟 WebGL - YouTube
• The Book of Shaders
• 计算机图形学系列笔记 - 知乎
• TheTus Games 101 笔记 · 语雀
• 可以将 Unity 和 Three 打通的工具：Needle github/Needle
• (用于调试pixijs的案例网站) PixiJS Filters Demo
• Misora Ryo Experimental World BLOG | Creative Coding-玻璃实例博文：【Three.js】Glass material and Broken glass | Misora Ryo Experimental World BLOG - Twitter:Misora Ryo (@MSRDGC)

TA 从业者博客 ​

• [游戏美术文档]故事与立体构成的基础 - 知乎
• WalkingFat – 行尸走油肉的笔记
• 还原《塞尔达-旷野之息》的草地 – WalkingFat
• 游戏开发养成方法 - 石墨文档 这个引用出自这里毕业杂谈

Github 相关 ​

• Github repo card: nwtgck/gh-card: GitHub Repository Card for Every Web Site
• Github contribution chart: Github Chart API
• Github buttons: mdo/github-buttons
• Github readme tags: badges/shields
• Github Resume: https://resume.github.io
• Github history: pomber/git-history
• Github cards(unofficial): lepture/github-cards - repo
• Programming Quotes: PiyushSuthar/github-readme-quotes
• github-profile-summary-cards
• An infographics generator: lowlighter/metrics Live Demo
• Moe Counter! journey-ad/Moe-counter: 多种风格可选的萌萌计数器 Live Page
• honzaap/GithubCity: Create a 3D city from your GitHub contributions - live
• GitHub Profile Generator

WebAssembly ​

• Made with WebAssembly

简历工具 ​

• Latex 简历模板
• markdown-resume: 支持 markdown 和富文本的在线简历排版工具
• Resume-vuepress: 用 Vuepress 将 markdown 渲染为静态页面简历
• xitanggg/open-resume Live
• 简历本; 超级简历; 五百丁

酷炫的工具 ​

• Markdown->PPT: ksky521/nodeppt
• The HTML Presentation Framework: hakimel/reveal.js
• Slidev 制作 - 一个为开发者打造的演示文档工具: slidevjs/slidev: Presentation Slides for Developers (Public Beta 🎉)
• 半色像素效果生成器: Vector Halftone Maker - Interactive PNG/SVG halftone pattern generator
• 极简在线样机效果图: Mockup your designs simply and beautifully.
• 页面外框截图工具: Screely - Generate Website Mockups
• 知乎卡片：laike9m/zhihu-card
• UI 画圆角工具：Coupon.io repo: XboxYan/coupon: 🎫 Generate Coupon-UI CSS code
• Some CSS tricks,一些 CSS 常用样式：QiShaoXuan/css_tricks Live
• Clippy — CSS clip-path maker
• 阿里工具: CSS Trick - CSS Trick
• nolimits4web/atropos: Stunning touch-friendly 3D parallax hover effects
• 可商用的免费漫画风素材: Loose Drawing | 無料で商用利用可なフリーイラスト
• Animated Icons - Lordicon
• Fontmin - 纯 JavaScript 字体子集化方案
• 城市道路图 anvaka/city-roads: Visualization of all roads within any city - Live
• 简易世界地图 tinyworldmap/tiny-world-map - Live

已经看过的文章 ​

• 视差滚动 - 滚动视差？CSS 不在话下 [Demo]
• 全屏滚动 - 仅用 CSS 实现 fullpage.js 全屏滚动效果 [Demo]
• 从零配置 webpack 4+react 脚手架（一） - 掘金
• 从零配置 webpack 4+react 脚手架（二） - 掘金
• 从零配置 webpack 4+react 脚手架（三） - 掘金
• 从零配置 webpack 4+react 脚手架（四） - 掘金
• CSS Grid 网格布局教程 - 知乎
• 超简单并超详细的 CSS Grid 布局（上）bilibili
• 超简单并超详细的 CSS Grid 布局（下）bilibili
• 一文读懂渲染管线(7k 字) - 知乎
• (TAA) Temporal Anti-Aliasing

TypeScript ​

• 旧版，需要该章中一个示例 #hybrid-types TypeScript: Handbook - Interfaces
• 电子书 | 深入理解 TypeScript 作者博客：sitemap | 三毛

前端早早聊大会 ​

• 第 29 届-可视化 密码:okw6
• 福利场 6
• 福利场 5
• 福利场 4-工程化
• 团队场-菜鸟
• 福利场 3-搭建
• 福利场 2-小程序
• 福利场 1-微前端
• 第 2 届前端基建
• 第 1 届前端管理

前端技术交流与演讲 ​

• 2021 GMTC 讲师 PPT 合集 - 早早聊收藏 · 语雀
• 技术周报 · 字节跳动的现代 Web 开发实践
• 迈入现代 Web 开发（GMTC 2021 演讲《字节跳动的现代 Web 开发实践》全文）
• 现代 Web 开发的现状与未来（JSDC 2019 演讲全文） - 知乎

低代码与大屏实现 ​

• [案例]大数据可视化·光启元

• Vision 内核大升级——可视化搭建引擎 Gems 应运而生

博客改版参考 ​

• Blog Post Item
• Card Hover Interactions