diff --git a/cg/api.opengl.md b/cg/api.opengl.md index 5165561..8541ffc 100644 --- a/cg/api.opengl.md +++ b/cg/api.opengl.md @@ -2,6 +2,8 @@ > [The Wiki is a collection of information about OpenGL, as well as frequently asked questions about OpenGL and its API. ](https://www.khronos.org/opengl/wiki/Main_Page) - [opengl 4.x](https://registry.khronos.org/OpenGL-Refpages/gl4/) +- [opengl4.5新增了DSA(direct_state_access),更改VAO,VBO,EBO的新用法](https://www.khronos.org/opengl/wiki/Direct_State_Access) +- [OpenGL Error](https://www.khronos.org/opengl/wiki/OpenGL_Error#Meaning_of_errors) Context上下文是OpenGL的核心,因为OpenGL就是一个状态机,上下文中就保存了各种状态值,是所有执行指令的基础, 这个概念比较接近底层。统一的API是由显卡驱动提供的,负责沟通驱动与系统接口的是一些跨平台的库,如glew,glad,glad是更现代的库。 @@ -226,4 +228,5 @@ void initOpenGl() { - [GLRF - OpenGL Realtime Framework](https://github.com/DunkleMango/GLRF) - [GLRF笔记](/cg/library/GLRF.md) - [g-truc creation, OpenGL Mathematics (GLM) OpenGL Image (GLI)等有关opengl的文档与知识](https://www.g-truc.net/) +- [A Guide to Modern OpenGL Functions](https://github.com/fendevel/Guide-to-Modern-OpenGL-Functions) diff --git a/cg/threejs/grid.md b/cg/threejs/grid.md new file mode 100644 index 0000000..5d1a8fb --- /dev/null +++ b/cg/threejs/grid.md @@ -0,0 +1,15 @@ +# 网格 + +- [无穷网格,很容易更改为ES6版本](https://github.com/Fyrestar/THREE.InfiniteGridHelper) + - [讨论内容](https://discourse.threejs.org/t/three-infinitegridhelper-anti-aliased/8377) +- [Anti-Aliased Grid Shader](https://madebyevan.com/shaders/grid/) + +```ts +// 这个是保持与camera的朝向关联起来,这样不会因为control的改变而改变 +this.quaternion.rotateTowards(camera.quaternion, 1); +// 找到一个参数,把这个关系对数化,得到的数据就是0.1,1,10,100这样的阶梯数,用来实现跨度 +const distance = camera.position.length(); +const logValue = 10 ** Math.ceil(Math.log(distance) / Math.log(10)); +(this.material).uniforms.uSize.value = logValue / this.scaleSize; +// 对上面的无穷网格利用这个逻辑可以面前实现网格的变化 +``` \ No newline at end of file diff --git a/cg/threejs/index.md b/cg/threejs/index.md index b70e05a..c5fd330 100644 --- a/cg/threejs/index.md +++ b/cg/threejs/index.md @@ -4,6 +4,8 @@ - [Bump map](/cg/threejs/bumpmap.md) - [RayCaster](/cg/threejs/raycaster.md) - [Loader细节](/cg/threejs/loader.md) +- [Grid实现](/cg/threejs/grid.md) +- [shader](/cg/threejs/shader.md) ## 参考 @@ -15,3 +17,4 @@ - [use your mouse to control the camera and build an andorid](https://hofk.de/main/threejs/raycaster/raycaster.html) - [webgl examples](https://alteredqualia.com/) - [22](https://github.com/brunosimon/folio-2019) +- [THREE.js rendering order渲染顺序](https://segmentfault.com/a/1190000041221932/en) diff --git a/cg/threejs/shader.md b/cg/threejs/shader.md new file mode 100644 index 0000000..16f6ad9 --- /dev/null +++ b/cg/threejs/shader.md @@ -0,0 +1,6 @@ +# [Shader](https://threejs.org/docs/index.html?q=shader#api/en/materials/ShaderMaterial) + +```js +renderer.toneMapping = LinearToneMapping; +renderer.toneMappingExposure = 0.1; +``` diff --git a/cg/tools/curve.md b/cg/tools/curve.md index 23bc574..85a6fbd 100644 --- a/cg/tools/curve.md +++ b/cg/tools/curve.md @@ -52,4 +52,6 @@ Catmull-Rom样条线是由四个控制点p0,p1,p2,p3定义的插值样条曲线 [Computing Curve Skeletons from Medial Surfaces of 3D Shapes](https://diglib.eg.org/bitstream/handle/10.2312/LocalChapterEvents.TPCG.TPCG12.099-106/099-106.pdf?sequence=1) -[Physically-Based Facial Modeling, Analysis, and Animation](https://web.cs.ucla.edu/~dt/papers/vca90/vca90.pdf) \ No newline at end of file +[Physically-Based Facial Modeling, Analysis, and Animation](https://web.cs.ucla.edu/~dt/papers/vca90/vca90.pdf) + +- [Implementation of my HPG2020 paper: Quadratic Approximation of Cubic Curves ](https://github.com/ttnghia/QuadraticApproximation) \ No newline at end of file diff --git a/dev-note/git.md b/dev-note/git.md index 5c4db70..93891de 100644 --- a/dev-note/git.md +++ b/dev-note/git.md @@ -59,9 +59,10 @@ 此操作非常耗时 - git stash list 罗列出所有的 - git stash save "message" 给当前的stash加上message说明 -- git stash 等同于上面这一句 +- git stash 等同于上面这一句,系统默认添加说明 - git stash pop [--index] [] 恢复stash中的内容 - git stash drop [] 删除对应的stash的id +- git stash drop stash@{3} - git stash clear 清楚所有的 ### diff diff --git a/exercises/math.secondary.md b/exercises/math.secondary.md index 16bcc8a..b966aeb 100644 --- a/exercises/math.secondary.md +++ b/exercises/math.secondary.md @@ -4,7 +4,7 @@
数的几何变换 让我们从另外一个角度来看到数字,会发现实数与复数一样自然! -**对称与变换**,对称性指的是在某种操作下使物体保持不变的性质。 +对称与变换,对称性指的是在某种操作下使物体保持不变的性质。

1. 正方形旋转90度后,旋转对称

2. 沿着直线方向移动一段距离,称为平移对称

3. 放大或缩小任何几何平面图形,称为扩张/缩放对称性

@@ -13,10 +13,15 @@ 现在用上面定义的几何语言来重新定义数字与运算。

现在想象有一个平面,中间有一条水平直线,把数字0放在中间,把正实数放在0的右边,把负实数放在左边,这就是熟悉的数轴。

现在有一个几何对象,一条直线,将直线平移x个数字会产生什么结果呢?数字0将位于x的位置,数字1位于x+1的位置,即平移变换对应于平移方向就是加减运算

-

现在进行扩展或缩放变换,这相当于乘法与除法运算,就看你变换的数字是大于1还是小于1,是1就是变换成自己

-

4. 反射

-

4. 反射

-

4. 反射

+

现在进行扩展或缩放变换,这相当于乘法与除法运算,就看你变换的数字是大于1还是小于1,是1就是变换成自己,恒等变换

+

如果将数轴通过0点作发射,这种情况下就会产生1变成-1,相当于乘数是负数的乘法运算,反射对应于乘以-1.如果连续反射两次了?(-1)(-1)=1,也是恒等变换

+

自此利用几何变换引起数轴上实数的变化,就是对应于四种基本运算。但还忽略了一种变换,那就是旋转变换。
+这时需要我们从直线上的点拓展到平面上任意点。这个认识,就是平面上的几何点对应着数字,但不一定是实数
+考虑逆时针旋转90度,这时对应什么变换呢?不会是加减运算,假设是乘除运算,即逆时针旋转90度对应于乘以某个数,这样得到通过0的竖直的直线。 +现在需要知道乘以了某个数是什么,我们跟踪数字1的变化,因为乘以1就是恒等变换。
+数字1逆时针旋转90度得到数字(0,1),继续逆时针旋转90度得到数字-1,这样就存在一个数,满足这样的性质(0,1)2=-1.称这个数字为i,这样逆旋转90度就是乘以数字i。
+16 世纪的时候,当时数学家发现一维数轴并不是完整的图景。他们需要“发明”这个神秘的数字,称之为虚数单位,即i² = -1,以便计算三次多项式方程的解。 +

diff --git a/web/css.md b/web/css.md index 6a18d15..5af80da 100644 --- a/web/css.md +++ b/web/css.md @@ -2,6 +2,7 @@ ## Web-CSS-Standard + ### meta ```html @@ -138,6 +139,11 @@ box-model分为两类:块状block和行内inline,两种的区别: } ``` +```js +// 通过css的media样式来判断当前的js页面是否属于某种情况,CSS-JS交互的接口 +const tabletMedia = window.matchMedia(StylesheetVariables.tabletMedia).matches +``` + ### pseudo-classes - host, selects shadow root host用于阴影DOM限定范围的 diff --git a/web/pkg.md b/web/pkg.md index fa35609..1a2e371 100644 --- a/web/pkg.md +++ b/web/pkg.md @@ -41,7 +41,7 @@ npm config list ``` #### [workspaces](https://docs.npmjs.com/cli/v10/using-npm/workspaces) - +workspace在node_modules创建了一个link,指向每个子包项目,这样各个子包项目可以互相直接引入代码 ```shell npm init -w ./packages/a // 创建子包 npm install abbrev -w a