Jeff's World

Things that I'm interested in

47
文 章
2
分 类
64
标 签

WebGL之绘制三维地球

通过Three.js也许可以很方便的展示出3D模型,但是你知道它是怎么一步一步从构建网格到贴图到最终渲染出3D模型的吗?现在我们直接使用底层的webgl加上一点点的数学知识就可以实现它。

本节实现的效果: WebGL三维地球
WebGL三维地球

more

WebGL之延迟着色

什么是延迟着色(Deferred Shading)?它是相对于正常使用的正向着色(Forward Shading)而言的,正向着色的工作模式:遍历光源,获取光照条件,接着遍历物体,获取物体的几何数据,最后根据光照和物体几何数据进行计算。

但是正向着色(Forward Shading)在光源非常多的情况下,对性能的消耗非常大。因为程序要对每一个光源,每一个需要渲染的物体,每一个需要渲染的片段进行迭代!还有片段着色器的输出会被之后的输出覆盖,正向渲染会在场景中因多个物体重合在一个像素上浪费大量的片段着色器运行时间。

延迟着色(Deferred Shading),就是为了解决上述问题而生,尤其是需要渲染几百上千个光源的场景。

more

Docker搭建部署Node项目

前段时间做了个node全栈项目,服务端技术栈是 nginx + koa + postgresql。其中在centos上搭建环境和部署都挺费周折,部署测试服务器,接着上线的时候又部署生产环境服务器。这中间就有很多既无聊又费精力,吃力不讨好的”体力活”。所以就开始思考怎么自动化这部分搭建部署的工作,也就引出了Docker

more

Flutter轮播图

前端开发当中最有意思的就是实现动画特效,Flutter提供的各种动画组件可以方便实现各种动画效果。Flutter中的动画组件主要分为两类:

  1. 隐式动画控件:只需设置组件开始值,结束值,执行时间,比如AnimatedOpacityAnimatedSize等组件。
  2. 显式动画控件:需要设置AnimationController,手动控制动画的执行。显式动画可以完成隐式动画的效果,甚至更加地可控和灵活,不过需要管理该动画的AnimationController生命周期,AnimationController并不是一个控件,所以需要将其放在StatefulWidget中。
more

Flutter开发初探

目前跨端开发比较热门的就是 React NativeFlutter 了,到底该选哪门技术似乎也快成了大前端圈的一个热门话题。对于web前端来说,基于web生态的 React Native 应该是一个更加顺畅而自然的选择;但 Flutter 让人动心的地方就是高性能和 跨端UI一致性。而React Native 发展不太明朗和 Flutter 越发成熟的走势对比促使我从观望的心态转为加入 Flutter

这里主要就是记录一下学习Flutter的一些感想和看法:

  1. 包管理
  2. 布局和样式
  3. json
  4. 状态管理
more

SVG高级应用及动画

canvas 和 webGL 这两项图形技术结合 css3 可以说能完成绝大部分的动画和需求。但 canvas 和 webGL 毕竟是偏向底层的绘制引擎,某些场景使用起来还是过于繁琐的,不分场合一律使用锤子解决的行为不值得提倡。svg 在解决排版,图标,相关动画还是非常高效的,而且 svg 还是矢量图形,高清还原各种屏幕尺寸的设计简直就是神器。

svg 基础知识不再讲解,结合svg特点和应用场景,主要介绍如下几方面的内容

  • svg sprite
  • css background-image 插入svg
  • 文字路径
  • 路径动画
more

使用typescript改造koa开发框架

原文地址:使用typescript改造koa开发框架

强类型的 TypeScript 开发体验和维护项目上相比 JavaScript 有着明显的优势,那么对常用的脚手架进行改造也就势在必行了。

接下来开始对基于 koa 框架的 node 后端脚手架进行改造:

  1. 项目开发环境 和 typescript 编译环境的搭建;
  2. nodekoa、koa中间件和使用到的库 添加类型化支持;
  3. 基于 typesript 的特性改造项目。
more

WebGL之物体选择

使用WebGL将图形绘制到画布后,如何与外部进行交互?这其中最关键的就是如何实现物体的选择。比如鼠标点击后判断是否选中了某个图形或图形的某个部分。

本节实现的效果: WebGL选中物体
WebGL选中物体

more

WebGL学习之HDR与Bloom

什么是HDR

HDR (High Dynamic Range,高动态范围),在摄影领域,指的是可以提供更多的动态范围和图像细节的一种技术手段。简单讲就是将不同曝光拍摄出的最佳细节的LDR (低动态范围) 图像合成后,就叫HDR,它能同时反映出场景最暗和最亮部分的细节。为什么需要多张图片?因为目前的单反相机的宽容度还是有限的,一张照片不能反映出高动态场景的所有细节。一张图片拍摄就必须要在暗光和高光之间做出取舍,只能亮部暗部两者取其一。但是通过HDR合成多张图片,却能达到我们想要的效果。
hdr

more

WebGL学习之纹理盒

我们之前已经学习过二维纹理 gl.TEXTURE_2D,而且还使用它实现了各种效果。但还有一种立方体纹理 gl.TEXTURE_CUBE_MAP,它包含了6个纹理代表立方体的6个面。不像常规的纹理坐标有2个纬度,立方体纹理使用法向量,换句话说三维方向。本节实现的demo请看 天空盒
sky box

more

扫一扫,分享到微信

Powered by Hexo Theme simply

Copyright © 2021 Jeff Zhong

给我的早餐加个蛋吧 😊

weixinpay alipay