ShaderToy 快速入门
简介与坐标系 ShaderToy 文章整理自 https://www.bilibili.com/video/av209900301 . 页面中有大量 webgl 元素, 建议使用桌面端浏览器打开. 简介 这是一个 ShaderToy 的默认程序 坐标系 mainImage 接受两个参数: fragColor 和 fragCoord . fragColor 是画布的颜色, fragCoord 是画布上的坐标, 画布的坐标从左下角开始, 往右是 x…简介与坐标系 ShaderToy 文章整理自 https://www.bilibili.com/video/av209900301 . 页面中有大量 webgl 元素, 建议使用桌面端浏览器打开. 简介 这是一个 ShaderToy 的默...
豆瓣读书开放 api
在很久很久以前, 豆瓣还是有开放的 api 接口的. 只需要一个 api key就可以使用. 但是后来网络上流传的 api key 一个接一个失效, 豆瓣的 api 接口虽然还在, 但是没有办法继续使用了. 如果有人用过 Calibre 这个电子书管理软件的话, 应该会记得它自带一个豆瓣读书的刮削器. 这个刮削器基于豆瓣官方的 api. 在换过 n 个网上找来的 api key…在很久很久以前, 豆瓣还是有开放的 api 接口的. 只需要一个 api key就可以使用. 但是后来网络上流传的 api key 一个接一个失效, 豆瓣的 api 接口虽然还在, 但是没有办法继续使用了. 如果有人用过 Calibre ...
Android 4.4 下 flex 布局阿拉伯语元素无法撑开
首先我们有一些原子和公共样式: 之后看下这个例子: 一切看起来似乎都是那么美好, 但是在 Android 4.4 下预览就有问题了: 主要是因为 Android 4.4 无法正确判断阿拉伯语的宽度, 因此在 justify-between 下阿拉伯语无法撑开. 解决办法可以给 span 元素增加属性 width: 100% 或者 flex: 1 1 0% 手动帮其撑开一下. 这样表现就和上面预览一致了. Version Action Time 1.0 Init…首先我们有一些原子和公共样式: 之后看下这个例子: 一切看起来似乎都是那么美好, 但是在 Android 4.4 下预览就有问题了: 主要是因为 Android 4.4 无法正确判断阿拉伯语的宽度, 因此在 justify-betwee...
addEventListener this 指向问题
先看一段代码: 输出的结果是 This is window . 这是因为这里 addEventListener 中的事件函数 onmsg 的 this 实际上 window 而不是 a . 如果想明确 this 的话, 需要指定 this 的指向. Version Action Time 1.0 Init 2021-08-19 20:26:03先看一段代码: 输出的结果是 This is window . 这是因为这里 addEventListener 中的事件函数 onmsg 的 this 实际上 window 而不是 a . 如果想明确 this 的话...
两天实现光线追踪 5 - 其他
其他 改进摄像机 我们之前实现的摄像机十分简陋, 其中视野范围是直接在空间中划定了一个矩形来描述的. 我们这里将这个描述改为更合理的两个参数: FOV 和屏幕比例 aspect . 这是 Minecraft 在不同 FOV 下的视觉效果: FOV: 60° FOV: 110° 通过这两个参数我们可以计算出之前定义的参数: 修改一下摄像机的定义 下一步是相机的方向. 我们已经有了相机的位置, 因为三维空间的自由度是…其他 改进摄像机 我们之前实现的摄像机十分简陋, 其中视野范围是直接在空间中划定了一个矩形来描述的. 我们这里将这个描述改为更合理的两个参数: FOV 和屏幕比例 aspect . 这是 Minecraft 在不同 FOV 下的视觉效...
两天实现光线追踪 4 - 折射
(最近更新: )折射 斯涅尔定律 我们需要一个折射函数, 入参为入射光线方向向量 和法线向量 , 以及材质的折射率. 折射率 . 我们有 . 即 . 那么 , 满足 时, 才会发生折射. 下面我们求出射光线方向 . 设 , 在法线上的投影分别为 和 , 在切线上的投影分别为 和 , 显然有 , . , 以及 , 即 . 那么 . 函数如下 对于折射率, 光线离开物体时折射率需取倒数. Ray…折射 斯涅尔定律 我们需要一个折射函数, 入参为入射光线方向向量 和法线向量 , 以及材质的折射率. 折射率 . 我们有 . 即 . 那么 , 满足 时, 才会发生折射. 下面我们求出射光线方向 . 设 , ...
两天实现光线追踪 3 - 反射与材质
反射与材质 反射 我们可以根据碰撞点, 法线计算出反射后的新光线. 首先是新光线的方向, 先求出光线在法线上的分向量, 之后用入射光线的方向减去两倍这个分向量即为反射光线的方向. 显然 (法线向量是单位向量) 那么 , 且 因此我们可以定义一个函数用来求光线反射后的方向 给类 Ray 添加 reflect 方法 修改 Hitable 接口, 同时返回反射后的光线. 修改 Sphere 类和 HitList…反射与材质 反射 我们可以根据碰撞点, 法线计算出反射后的新光线. 首先是新光线的方向, 先求出光线在法线上的分向量, 之后用入射光线的方向减去两倍这个分向量即为反射光线的方向. 显然 (法线向量是单位向量) 那么 , 且 因此我们...
两天实现光线追踪 2 - 坐标系与形状
坐标系 画布坐标系 上一节中已经有了一个根据坐标来渲染的函数 rederPixel , 现在我们把它抽象一下, 具体渲染的逻辑交给别的函数去做. 重新定义画布坐标系, 向右为 x 正方向, 范围从 0 到 1, 向上为 y 正方向, 范围也是 0 到 1. 因为透明度基本用不到, 直接写死就可以. 空间坐标系 向量 我们定义一个向量类 Vec3 , 既能装 x, y, z 坐标, 也能顺便装一下 r, g, b…坐标系 画布坐标系 上一节中已经有了一个根据坐标来渲染的函数 rederPixel , 现在我们把它抽象一下, 具体渲染的逻辑交给别的函数去做. 重新定义画布坐标系, 向右为 x 正方向, 范围从 0 到 1, 向上为 y 正方向, 范围...