浏览器收藏夹的东西太多又没简介,收藏过就忘了看,所以博客上单独开个收藏夹,记录些会经常回来看的东西
一步步学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
【原生WebGL实现渲染算法】Rendering algorithms implemented in raw WebGL 2. tsherif/webgl2examples
数据图表设计师。他的 repo 很有意思,各种粒子效果:wangyasai (Yasai) - e.g.Perlin-Noise
使用 WebGL 和 Shaders 进行高级创意编码【中英字幕 Advanced Creative Coding with WebGL & Shaders】
WebGPU 中文社区-Orillusion/orillusion-web - Live - https://www.orillusion.com/ - 简介 - Orillusion | 第一个 WebGPU 中文社区 - 知乎
pmndrs/threejs-journey: Bruno Simons journey demos in React
【ThreeJs 推荐教程】 30天成為鍵盤麥可貝:前端視覺特效開發實戰 - 作者: iT 邦幫忙::伍瑪斯
这个博主讲了各种图像算法的实现:Maxim McNair
这个repo提供了各种效果源码和原理讲解:boytchev/etudes: Computer Graphics Études with WebGL and Three.js - Twitter:Pavel Boytchev
系统性Shader教程:B站 - 掘金 - 李伟的博客 - 示例代码Github
着色器语法API :OpenGL-Refpages
threejs实例合集:The Best Three.js Resources in One Place | Three.js Resources
chenjsh36/ThreeJSForFun: 收集关于 ThreeJS 的系列教程、Demo、工具,整理学习笔记和 Demo
让 WebGL 的暴雨拍打你的屏幕(雾) [Demo] [Code - SardineFish/raindrop-fx]
Shader Park shader-park/shader-park-core: A JavaScript library for creating real-time 2D and 3D shaders. JS -> Shader.
Codrops - Creative front-end resources and inspiration for web professionals (附源码的 demo)
Threejs反射 MeshReflectorMaterial.js - 0beqz/vanilla-threejs-meshreflectormaterial-example
git1029/waves_threejs - Preview: Waves
Question: (模板测试截面轮廓实现)Cap outline in Threejs
Answer: Three-mesh-bvh: A plugin for fast geometry raycasting and spatial queries!
Three.js Material which lets you do Texture Projection on a 3d Model
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
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
可交互水面 nhtoby311/WaterSurface: 🌊 Interactive Water Surface shader component for React Three Fiber - Live
体积光教程 Eric Heitz's Research Page - WebGL实现
传送门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
延迟渲染示例
玻璃破碎的平面效果 @Ksenia Kondrashova / X - Broken Glass Effect (on click, WebGL)
模型由多个部分组合怎么生成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
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 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
VRM 人物模型 hub 一个模型实例:AvatarSample_A - VRoid Hub
Blender 导入插件:Import VRM file | STYLY