- 博客(103)
- 资源 (4)
- 收藏
- 关注
RSS订阅原创 ShaderToy：SDF曲线
本文介绍了WebGL中的符号距离函数(SDF)及其应用。SDF是一种存储像素到图像边界距离的数据结构，在Shadertoy创作中尤为重要。文章详细解析了五种基本图形的SDF实现方法：1)圆形计算点到中心距离；2)线段通过向量投影计算距离；3)矩形通过坐标绝对值处理简化计算；4)圆角矩形在矩形基础上减去半径值；5)菱形结合线段方法和向量叉乘判断方向。每种方法都给出了核心代码和实现思路，为图形编程提供了基础技术参考。掌握这些SDF技术是玩转Shadertoy的关键。
2025-07-09 14:02:47
553
原创 ShaderToy：atan曲线（旋转风车、五彩光圈）
本文分析了如何利用atan和atan2函数在ShaderToy中创建旋转的风车以及五彩光圈的效果。
2025-06-13 13:38:03
387
原创 ShaderToy：入门
Shadertoy是一个基于WebGL的在线着色器编辑器平台，允许用户在浏览器中实时编写、分享和预览GLSL代码生成的图形效果。里面有好多大佬分享的用着色器写的各种效果，可以参考学习使用。
2025-06-06 16:57:02
705
原创 WebGL入门:光照原理
文章主要探讨了物体颜色的计算方式，特别是在WebGL环境下的实现。首先，物体颜色由漫反射光源和物体本身的颜色决定，且与入射光的角度有关，符合余弦公式。通过向量点乘公式，可以计算出物体在不同光照角度下的颜色。接着，文章详细介绍了在点光源下计算物体颜色的方法，包括顶点着色器和片元着色器的实现。顶点着色器负责计算顶点的世界坐标和法向量，而片元着色器则根据光照方向和法向量计算漫反射光和环境光，最终得出物体的颜色。文章还提供了相关代码示例，帮助理解如何在WebGL中实现这些计算。
2025-05-13 18:11:19
907
原创 WebGL入门:二维矩阵变换
不涉及三维的话，坐标计算表达式则如下二维坐标 = 模型矩阵(旋转、缩放等变换矩阵)*原始坐标 决定记录下矩阵变换的一些细节，为了方便理解就从二维的图形作为切入口。
2025-04-23 14:00:30
379
原创 WebGL入门:从绘制点来描述渲染过程
作为一个资深的GIS开发，搞过好多的Cesium和Threejs项目，有心去学更底层的webgl，断断续续学习WebGL好久了，也买过书，基本上也看完了，但是由于是碎片化的时间，学习的过程中也没记笔记，基本上是学完了就忘了，希望这次能够坚持下去。巩固知识的同时也会分享下自己的学习心得见解。
2025-04-14 11:13:59
751
原创 前端开发者玩转AI编程：揭秘Node+Langchain技术组合的魔法（五）
揭秘Node+Langchain技术组合的魔法（五）RAG2 githubRag webRag
2025-03-26 14:43:52
1706
3
原创 geoserver 使用rest发布tiff数据源报错处理
翻烂了geoserver的官方文档，没有找到任何的解决办法，无意间看到一篇文章，上面参数上加了workspace参数，试了一下果然可以，geoserver官网的坑果然很多啊。字面意思是数据存储必须包含在工作空间下面。然而官网上工作空间参数是作为路径传参的。
2024-12-18 13:20:42
393
原创 一文搞懂常见的地图投影
地图投影（Map Projection），即把地球表面的任意点，利用一定数学法则，转换到地图平面上的理论和方法。书面概念化定义：地图投影就是指建立地球表面（或其他星球表面或天球面）上的点与投影平面（即地图平面）上点之间的关系的方法。即建立之间的数学。它将作为一个不可展平的曲面即地球表面投影到一个平面的基本方法，保证了在区域上的联系与完整。这个投影过程将产生投影变形，而且不同的投影方法具有不同性质和大小的投影变形。
2024-10-17 15:14:11
3672
原创 vscode+vue3+vite项目配置stylelint 2024版本
在搭建前端项目时经常要用到一些工程化的东西，还有一个规范化的东西，现在eslint已经在各大脚手架工具集成的很好，但是stylelint还是有点欠缺，而且每次的版本更新迭代是个最让人头疼的问题，写这篇文章记录下在当前最新版本下怎么去配置stylelint。
2024-09-12 15:00:46
1325
2
原创 Geoserver的 rest、wfs、wms、wps接口请求指南
时光如白驹过隙，不知不觉间已经干了7年的GIS开发了，一路走来跌跌撞撞的，跟随着时代的洪流行尸走肉般的生存着（此处省略n个字，全是感慨）
2024-08-29 13:25:22
2781
原创 Type instantiation is excessively deep and possibly infinite
Type instantiation is excessively deep and possibly infinite
2024-07-26 16:01:15
1052
原创 web3d（threejs，cesium）硬件要求
处理器：Intel i7 2.5GHz及以上。处理器：Intel i9 2.5GHz及以上。操作系统：Windows 10 64位。操作系统：Windows 10 64位。操作系统：Windows 10 64位。操作系统：Windows 10 64位。操作系统：Windows 7 64位。操作系统：Windows 7 64位。显卡：显存24 GB以上（独立显卡）显卡：显存2G以上（独立显卡）显卡：显存6G以上（独立显卡）显卡：显存2G以上（独立显卡）显卡：显存8G以上（独立显卡）
2024-01-25 11:25:35
3010
原创 Node Sass could not find a binding for your current environment终极解决方案
在不同环境下迁移项目时由于node版本不同导致钱以后项目打不开，提示node sass不匹配，找了好多方法，记录下心得，也是多种试错后的终极解决方案一、删除node-moudles包二、清理缓存npm cache clean -f三、重新执行yarn -i 拉取依赖包（不能用npm，yarn会自动修复node版本的适配问题选择最适合的版本，而npm不会，鄙人因为这个卡了好久）四、rebuild nodesass 执行 npm rebuild node-sass五、完成...
2021-09-15 22:10:32
6269
1
原创 Vue源码解读-1（世上无难事，只要肯放弃）
从19年开始由于一些原因好久没怎么写博客了，今天心血来潮记录下vue的源码解读历程（可能中间懒了就又停了，世上无难事，只要肯放弃嘛！）正式开始准备工作我们把源码搞下来后，用vscode打开后不要着急看源码，打开demon文件夹下的随意一个html，修改引用路径为dist下的路径（方便调试），然后开启项目的源码调试准备工作做好后，运行dev 在html里面打个断点，前端单步调试，逐步跟踪代码执行顺序原型构造可以发现暴露的vue是在src-core而真正的vue又存在于ins
2021-08-14 01:28:01
409
原创 openalyers6.x源码解读-1（世上无难事只要肯放弃）
openalyers6.x源码解读_1（世上无难事只要肯放弃）第一步、下载源码第二步、查找入口文件第三步、先强行解析一个方法第三步、Object第一步、下载源码源码下载地址 https://github.com/openlayers/openlayers第二步、查找入口文件源码下载后执行npm i 安装好所有的依赖会看到如下界面：openlayers的核心源码都存在于src/ol下面，在里面找到index.js第三步、先强行解析一个方法在index.js暴露的口子中先找个软柿子捏捏，找来找去
2021-08-14 01:25:11
569
原创 个人前端代码规范
黄金定律永远遵循同一套编码规范，规范自己的代码风格，同时不管有多少人共同参与同一项目，一定要确保每一行代码都像是同一个人编写的。使用命名法大驼峰命名法小驼峰命名法下划线命名法应用场景项目文件夹使用大驼峰命名法，原则上不使用下划线VideoProjectionAudioProgectionTextProgection文件命名使用小驼峰命名法，复合页面使用小写加_加小驼峰简单页面index.html 首页main.html/main.js 首页download.htm
2021-08-05 01:13:15
187
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人