【WebGL与光线追踪】(四) 实践及工程化
前面的章节已经提供了全部的理论基础，剩下的就是如何实践落地到Web啦。 杠精回避宣言：后续内容有大量一家之言，如意见向左，皆为你对。 当前Web3D的现状 当前Web3D最新的API标准为WebGPU，可以说是代表着未来了，并且也在一直往前推进。但就目前(2021年1…
【WebGL与光线追踪】(三) Path Tracing
还是先回顾一些概念： 蒙特卡洛（Monte Carlo）积分 一些概率论的基础公式(连续随机变量)： 概率密度函数(PDF): $$ P { a<x\leq b } = \int_{a}^{b}f(x)dx $$ 分布函数(CDF): $$ F(x) = P { x\leq X…
【WebGL与光线追踪】(二) Disney BSDF
材质部分实现的是Disney BSDF，这里再做一次从基础开始的总结，比较熟悉的兄弟可直接跳过了哈 首先一切的一切，都得从渲染方程开始： $$ L {o}\left(p, \omega {o}\right)=L {e}\left(p, \omega {o}\right)+\int…
【WebGL与光线追踪】(一) 简介
先上最后结果的渲染器： lgltracer 几个Demo和效果图： CornellBox GLTF Viewer DiningRoom 光追的效果是不是让你燃起了曲线救国锤一波Sketchfab…
个人主页开发小记
趁着有空，这些天又把主页更新了一波： todaylg.com 把喜欢的几部动漫和游戏都整进去了，开心得一批哈哈哈 Home Section 首先那必然是首屏的最终幻想7啦，其实之前并不了解最终幻想系列，直到看到了最终幻想7重制版的几个预告片，这Tifa和Aerith…
Loading
先躺一波。。。下波起来就是最后的波纹啦(惊起！)
Threejs问题小记
…
Viewer与PBR
在通过Envtools将预计算的资源进行打包后，自然就需要在Viewer进行解包和渲染啦: https://github.com/todaylg/three-viewer 歪出来感叹一句，搂完Viewer以后照常发了个Twitter纪念，但是没想到得到了Threejs…
EnvTools
我们知道实时PBR渲染中的IBL部分是可以预计算的，主要包括： Diffuse部分：辐照度图(irradiance map)或SH(Spherical Harmonics) Specular部分：不同粗糙度级别对应的环境贴图、BRDF积分(LUT…
海拉鲁之旅
今年回家过年以后，就被突如其来的疫情给关了。 出门是不可能出门了，口罩也买不到，只能赖在家里瘫着来勉强过日子😂。 想搞之前的envtool来着，又发现这工具涉及的知识好多(配一台好点的PC学CUDA？Flag+…
2019小结
转眼2019就已过去，回顾这一整年真可谓是感慨万千。。。 过去一年里最重要的就是对学习方向的调整，算是自己从Web2D转向Web3D的一个转折点吧。转行大计算是正式迈出了夯实的第一步！Rua！ 在对一些基础知识学习以及一些瞎折腾(“LGL“)后，Threejs…
Sakura是怎样炼成的
平常在动漫里其实可以非常高频的看到各种伴随樱花的场景，而这些场景又都美得一批，每每看到这些场景让人都不由自主的连连称奇、拍案叫绝、惊为天人、振聋发聩、大呼过瘾 从此对 Sakura 有了执念。 其实有许多大牛前辈早已在 Web 中进行了实现： 有使用 Canvas2D…
《Mathematics for 3D Game Programming and Computer Graphics》读书笔记 (上)
学习的过程中深感自己的地基不够牢固，决定补习巩固一波基础知识。 这本书涵盖了图形学相关的各方面数学知识，希望通过阅读这本书籍能补回丢掉的数学知识，也可以提高自己英语书籍的 疯狂查词典 阅读能力。 本着实践为主的目的，尽量能实践的就搂个Example…
ShadowMap学习笔记
给场景添加上shadow可以大大提高场景的真实感，所以讲道理关于Shadow的实现还是要学习一波的～ 最简易的Shadow实现方法就是直接在物体下方摆张黑底贴图啦。好处自然是省掉了Shadow…
Post-Processing学习笔记
Post Processing Effect指的是后期处理效果，这些效果的实现是基于已经渲染的场景之上的，即通过将场景以纹理形式渲染到一个覆盖全屏的四边形上，再对纹理图形进行处理： RenderTarget/Post…
glTF学习笔记
当想要构建包含复杂模型的场景时，如何从建模工具导出的模型文件中解析并复原模型就成了必须要解决的一个问题。 首先需要了解一下各种三维文件的格式： 三维文件格式知多少 glTF无疑是应用于Web平台的首选格式，作为一个WebGL Renderer的LGL…
日常踩坑小记
存放日常工作和学习过程中的一些踩坑记录~ 踩坑总结： 兼容性： IE IE8不支持transform、background-color IE9不支持transition、animation、linear-gradient IE不支持animation变化伪类content…
Web动效通用实现方案探究
前言 在平时的工作中我们会遇到一些动画师设计的动效需要在Web实现，大多数情况下我们使用CSS3就可以搞定了，但对于一些复杂的动效（比如粒子效果）用我们就得另寻他法了。那在考虑性能与完成效果的前提下，我们该哪种方案复现这些复杂的动效呢？ 方案对比 动态图片（gif） 使用gif…
LGL
前言 转眼间2018年就过去了，自己也结束了通信生涯正式变为了“社畜”。7月份拿到毕业证回到公司后，便是深陷各种业务需求，平时回到寒舍便是早已筋疲力竭，周末再补觉续命+打打游戏，一年下来积累沉淀得相比于学生时代是少之又少，实为惭愧。 游戏戒是不可能戒了，还没经住毒瘤同事和G…
MikuMikuMi
中了Miku的毒。。。希望有朝一日可以搂一个炫酷的页面给公主殿下~Web3D搞起啊！！ 2019.8.31： 续一年（+1s）Up！Up！ 2020.8.31： 有生之年 2021.8.31： 已还愿 lgltracer
初探WebVR与Web Audio API
借着毕设的机会，接触了一下WebVR和Web Audio API，以及通信本行的数字信号处理的知识： 老样子，先上结果： WebVR-Audio-Visualizer 当年在DSP…
Hello World!!
伴随着学生机的到期，又迎来了一次新的”Hello World”，博客从Wordpress=>自己整=>Hexo=>Gatsby，在这曲折的更换过程中我越来越认识到 没钱 就老老实实弄静态页的真理。 首先先来安利一波 Gatsby ，对比当下较流行静态网站生成器Jekyll…
《WebGL编程指南》读书笔记
脑里还是有个挥之不去的3D梦呀~ Part 1 万里长征的第一步吧。。。也不知道自己能走几步，毕竟底子真是差啊，但是奈何想搞的一些骚操作不上3D…
实习小结
搁学校待了…
初探Canvas2D渲染与数据可视化
实习期间接触到了Canvas2D渲染与数据可视化，然后进行了一波探究和实践： 探究能否在保留高灵活性同时，借助WebGL Renderer来突破SVG与Canvas2D Renderer渲染大量节点的瓶颈。 D3.js的灵活性高，但是Renderer还停留在Canvas2D…
SVG动画制作小结
基础知识 1.SVG (Scalable Vector Graphics) 首先需要知道SVG大概是啥，SVG即可缩放矢量图形（Scalable Vector Graphics),是一种用XML定义的语言，用来描述二维矢量图形，并且已是W3C标准，所以它也可以和CSS、DOM…
基础备忘汇总
Vim备忘 自己用的场景还是偏少，所以命令根本记不住。。。备忘把常用的简单指令记一下。 基本移动 h j k l ⬅️ ⬇️ ⬆️ ➡️ H 本屏首行 L 本屏末行 o 这一行的最前处 $ 这一行的最末尾 G 移动到整个文档最后一行 gg 移动到整个文档首行，相当于1g n…
《图解HTTP》读书笔记
通信工程搞软件真是举步维艰。。。唯一值得兴奋一点的是这学期好歹学个有用的计算机通信与网络（计网）然而毕竟是通信的计网。。老师从物理层讲到传输层就往后的就基本没涉及了。。。用了大概30分钟提了提了TCP/IP…
《JavaScript数据结构与算法》读书笔记
之前有扫过一眼《学习JavaScript…
