3 Webglzhang

尚未进行身份认证

我要认证

Three.js Contributor!努力奋斗的programmer !

等级
TA的排名 9w+

WebGPU 初探 - Windows10上Chorme运行WebGPU程序

WebGPU是最新的Web 3D图形API,浏览器封装了现代图形API(Dx12、Vulkan、Metal),这才是未来的标准,不像 WebGL2.0 苹果直接不支持,好,开始今天的分享;点击链接查看是否支持WebGPU首先分享链接:W3C WebGPU组织WebGPU 目前的进展 可以查看WebGPU最新的进展和平台支持情况WebGPU文档 WebGPU的官方介绍,说明比较详细Web...

2020-01-15 22:57:01

WebGL 中的 gl.drawArrays()与gl.drawElements() 你真的懂吗?

  哈哈,今天群友又问了一个很有意思的问题,问gl.drawElements()如何使用,如何制定绘制的范围,哈哈,很基础的问题,但也难住了很多人,你也可以思考一下如何去实现,Three.js源码拆分几何体地时候就会用到这些api技巧,但是我之前并没有深入去学习,OK,带着问题我们开始吧。  先来看一下 gl.drawArrays()的ts声明:drawArrays(mode: number,...

2020-01-10 23:04:42

WebGL 由gl_FragCoord在FS中计算世界坐标(渲染流水线矩阵变化的逆推)

  今天有群友在交流群里问,如何根据gl_FragCoord在片元坐标中计算当前片元的世界坐标,因为能从顶点着色器传递到片元着色器,大家都没有在意这件事情,晚上正好无事也进行了一番探索,这是一个矩阵变换的逆过程。渲染管线中矩阵变换可参考我的这篇文章Webgl矩阵变换总结。  话不多说直接,上效果,估计有点蒙,解释一下,初始是红色立方体,然后过两秒,开始进行比对,gl_FragCoord在片元着色...

2020-01-06 23:32:39

Three .js 记录一次给 three.js 提 pr 的经历!!2020冲鸭!!

记一次给Three.js 提 pr 的经历!! 哈哈  在 Three.js r110的版本中,mrdoob 添加了InstancedMesh,在一次issue的讨论中,有人提到想知道它具体的是哪个实例, 有人建议gpu pick,也就是基于颜色编码去做。哈哈,巧了,最近一直在读Three…js 的源码,正好包含raycast部分,我就尝试着去实现InstancedMesh.raycast,也在...

2020-01-05 19:13:01

Three.js BIM模型轻量化 FPS渲染速率优化 多 实例渲染[Instance]+顶点合并[Merge]

BIM模型不经过处理,直接加载到Three.js 创建的场景中,很大可能会很使fps帧率下降,原因在于模型的个数太多,有的模型是多材质的话还需要在Three.js中绘制两次,这样会导致drawcall过载,虽然在开启视椎体剪裁的情况下,Three.js中已经进行了模型剔除的处理,但仍然很难解决drawcall过载的问题,可以F12 打开devtool看下cpu使用率。 ...

2019-09-08 10:55:43

JS 技能点get 留存

彻底明白JS线程https://www.jianshu.com/p/8821c6432fe1https://segmentfault.com/a/1190000012925872

2019-09-08 10:33:04

常用的空间数据结构(网格/四叉树/八叉树/BSP树/k-d树/BVH/自定义划分)

空间划分的数据结构(网格/四叉树/八叉树/BSP树/k-d树/BVH/自定义划分)目录网格 (Grid) 网格的应用 四叉树/八叉树 (Quadtree/Octree) 四叉树/八叉树的应用 BSP树 (Binary Space Partitioning Tree) 判断点在平面前后算法 BSP树的应用 参考 k-d树 (k-dimensional tre...

2019-09-08 10:24:13

Javascript调试命令——你只会Console.log() ?

Javascript调试命令——你只会Console.log() ?Console 对象提供对浏览器控制台的接入(如:Firefox 的 Web Console)。不同浏览器上它的工作方式是不一样的,但这里会介绍一些大都会提供的接口特性。Console对象可以在任何全局对象中访问,如 Window,WorkerGlobalScope 以及通过属性工作台提供的特殊定义。它被浏览器定义为 Wi...

2019-09-08 10:12:02

顶点着色器插值输出到片元着色器的三种方式—— flat、noperspective 、smooth(透视矫正)

以OpenGL为例,在https://www.khronos.org/opengl/wiki/Type_Qualifier_(GLSL)上,可以看到三种插值的方式。图片截图不是很清楚,就简单说一下这几种吧。1. flat 该值不会被差值2.noperspective该值将在窗口空间中线性插值3.smooth该值将以透视校正的方式进行插值,这也是默认的插值方式...

2019-09-08 10:01:33

Android App 开发实战 共享客栈

这个App还是大二做的,前两天有人问我能不能做原生App,公司也要用到Android混合开发,突然想到了这个App,当时也是赶共享经济的潮流,在学校里和同学搞了这么个App,下面就简单介绍下吧,App里面的技术栈是很古老(嘻嘻,有点嘲讽的意思哈),有兴趣的朋友加我技术群交流哈。 开始...... PC端基于古老的Java swing : ...

2019-08-11 22:33:05

Three.js项目实战之Dijkstra寻路效果、 A*寻路效果

分享两个基于Three.js结合寻路算法实现的项目效果;第一个是用Dijkstra实现的,是我大学的毕业设计,熟悉蜂鸟视图产品的同志,可能会感觉很相似哈,就简单截个图了哈。 上面当然会有些缺陷了哈,路径不够平滑,其实在得到最短路径之后,我们是可以用贝塞尔曲线或者B样条做曲线拟合的生成光滑的路径点,所以呢,在我实习的时候,遇到了类似的需求我就在得到最短路径后利用Thre...

2019-04-17 22:25:16

Three.js 拾取之GPU Picking的理解和思考

今天,分享的是项目中真实会用到的东西,Three.js GPU Picking,这是什么意思呢,不同于Three.js 的Raycaster,它是利用颜色的6位16进制表示,以颜色作为ID,在后台渲染出纹理后,根据鼠标坐标下的纹理颜色,进行ID的查询进行拾取操作,哈哈,如果你不是很了解,应该不明白我在说什么,下面我们一步一步来说明这个所谓的GPU Picking。 在Th...

2019-03-27 00:00:52

Web人脸检测实现人脸贴图、Web人脸识别、tracking.js、face-api.js

大学期间呢,做过一个人脸检测,基于tracking.js做的,通过CPU计算得出结果,具体的算法就没有深入研究了,只是做个效果玩玩而已,下面看看效果吧,当然还有更好的Web端人脸识别的库,像face-api.js一款基于Tenserflow.js训练的一款人脸识别,检测的js库。 tracking.js实现人脸检测face-api.js实现人脸识别和检测,当然这...

2019-03-25 23:39:16

Three.js 项目实战之在线3D纸箱包装DIY设计

这个项目是在大学的时候做的,做了没多久就移交给下届的同学继续做了,那我今天分享一下这个项目,主要是是给纸箱厂做一个3D在线包装设计,增加包装纸厂的客户流量,并且也能过让用户得到更好的体验,下面展示的是客户端,后台在我同学那边,我就展示一下客户端。主界面:登录和注册页面:核心纸箱3D展示、编辑界面1.纸箱纹理编辑2.纸箱平面图展开与折叠3.平面图展开...

2019-03-25 22:17:47

Three.js Obejct3D.matrix、.matrixWorld、.modelViewMatrix、.normalMatrix和.parent、.children属性的深入理解

工作中,在涉及对模型一些矩阵变换操作的时候,都会看到这样的代码注释,获取AAA的矩阵,向量BBB applyAAA矩阵,变换到AAA的空间。今天,分享的是对于THREE.Object3D矩阵属性的一些理解,并附上工作时使用的感受。下面开始吧。 我们先来讨论Obejct3D.matrix、.matrixWorld、.modelViewMatrix、.normalMatrix的属性,先...

2019-03-24 23:29:14

Three.js着色器构成剖析和MeshStandardMaterial(PBR)shader着色器实现分析

哈哈!今天要分享的是在工作碰到的需求,项目中部分模型需要通过Instance方式进行渲染优化,主要是减少drawcall次数和顶点数量。然而项目中的使用的是MeshStandardMaterial,这种材质是一种基于物理的标准材质(PBR),然而Three.js并没有将Instance封装到着色器中,需要我们在代码里重写THREE.ShaderLib.physical并将Instan...

2019-03-24 21:52:32

重新开始!大前端+实时渲染+Al

大学里做过App,做过JavaWeb,做过人脸识别,后来一直在做基于WebGL实时渲染的工作,中间我们同学四人帮老师写过一本关于WebGL 2.0书,当时由于种种限制并未完全写出WebGL 2.0新的图形功能,像3D纹理,遮挡剔除等,很是遗憾,希望出版了大佬们勿喷。后来想在博客里继续更新WebGL 2.0的一些东西,后来写着写着就感觉没意思,把opengl es 3.0的程序移植到WebGL ...

2019-03-03 22:35:51

WebGL 2.0实现Vertex Array Objects(VAO,顶点数组对象)

在WebGL 2.0中,终于把VAO转正了。在WebGL 1.0中,可以通过拓展实现。Babylon.js引擎默认情况下,每次渲染都使用VAO完成。简单介绍下VAO,下面截取自《OpenGLES 3.0 Programming Guide》。In OpenGL ES 3.0, a new feature was introduced to make using vertex a...

2018-08-06 19:52:45

Babylon.js 踩坑之正交摄像机,平行投影的相关设置

最近在研究Babylon.js这款专业Web3D的游戏引擎,官网的教程很全面,但不免有些遗漏的地方。今天,就讲Babylon.js中相机的投影类型。 Babylon.js中的相机类型有UniversalCamera,ArcRotateCamera,FollowCamera等等,在测试程序的时候,这些相机的投影类型默认都是透视投影。那么,其实在开发的时候,我们有些特殊...

2018-08-04 19:22:43

AR.js摄像头前置的问题(已解决)(H5调用摄像头)

                                         AR.js摄像头前置的问题(已解决)        终于放假了,开始搬砖。很多开发者对AR.js摄像头前置的这个问题比较苦恼,网上也有很多解决办法,但是有些过时。接下来,我们来一起解决这个问题。先看一下效果。(PS:下面的QQ摄像头图,标注反了)        不久前,我看一片关于WebAR的文章,很...

2018-07-07 22:39:18

查看更多

勋章 我的勋章
  • GitHub
    GitHub
    绑定GitHub第三方账户获取
  • 签到新秀
    签到新秀
    累计签到获取,不积跬步,无以至千里,继续坚持!
  • 持之以恒
    持之以恒
    授予每个自然月内发布4篇或4篇以上原创或翻译IT博文的用户。不积跬步无以至千里,不积小流无以成江海,程序人生的精彩需要坚持不懈地积累!
  • 勤写标兵Lv1
    勤写标兵Lv1
    授予每个自然周发布1篇到3篇原创IT博文的用户。本勋章将于次周周三上午根据用户上周的博文发布情况由系统自动颁发。