- 博客(30)
- 资源 (4)
- 收藏
- 关注
RSS订阅
原创 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
786
2
原创 WebGPU NDC 标准设备坐标系
看了挺长时间的WebGPU了，会开始记录一些散点的问题，这部分目前没有在WebGPU Spec体现出来。今天先来讨论一个问题WebGPU的标准设备坐标（Normalized Device Coordinate ）是什么样的。webgl的ndc大家已经很熟悉了是一个位于中心点（0,0,0）xyz为2✖️2✖️2的空间，webgl程序中矩阵变换的目的，就是把想看的物体都变换到这个坐标系下。webgpu的ndc是中心点位于（0,0,0.5）的xyz为2✖️2✖️1的空间。这...
2022-04-10 22:47:36
1634
原创 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
9809
原创 WebGL 中的 gl.drawArrays()与gl.drawElements() 你真的懂吗？
哈哈，今天群友又问了一个很有意思的问题，问gl.drawElements()如何使用，如何制定绘制的范围，哈哈，很基础的问题，但也难住了很多人，你也可以思考一下如何去实现，Three.js源码拆分几何体地时候就会用到这些api技巧，但是我之前并没有深入去学习，OK，带着问题我们开始吧。 先来看一下 gl.drawArrays()的ts声明：drawArrays(mode: number,...
2020-01-10 23:04:42
2228
原创 WebGL 由gl_FragCoord在FS中计算世界坐标（渲染流水线矩阵变化的逆推）
今天有群友在交流群里问，如何根据gl_FragCoord在片元坐标中计算当前片元的世界坐标，因为能从顶点着色器传递到片元着色器，大家都没有在意这件事情，晚上正好无事也进行了一番探索，这是一个矩阵变换的逆过程。渲染管线中矩阵变换可参考我的这篇文章Webgl矩阵变换总结。 话不多说直接，上效果，估计有点蒙，解释一下，初始是红色立方体，然后过两秒，开始进行比对，gl_FragCoord在片元着色...
2020-01-06 23:32:39
1634
1
原创 Three.js BIM模型轻量化 FPS渲染速率优化 多 实例渲染[Instance]+顶点合并[Merge]
BIM模型不经过处理，直接加载到Three.js 创建的场景中，很大可能会很使fps帧率下降，原因在于模型的个数太多，有的模型是多材质的话还需要在Three.js中绘制两次，这样会导致drawcall过载，虽然在开启视椎体剪裁的情况下，Three.js中已经进行了模型剔除的处理，但仍然很难解决drawcall过载的问题，可以F12 打开devtool看下cpu使用率。 ...
2019-09-08 11:52:53
4924
1
原创 JS 技能点get 留存
彻底明白JS线程https://www.jianshu.com/p/8821c6432fe1https://segmentfault.com/a/1190000012925872
2019-09-08 10:33:04
221
转载 常用的空间数据结构(网格/四叉树/八叉树/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:26:04
6904
2
转载 Javascript调试命令——你只会Console.log() ?
Javascript调试命令——你只会Console.log() ?Console 对象提供对浏览器控制台的接入（如：Firefox 的 Web Console）。不同浏览器上它的工作方式是不一样的，但这里会介绍一些大都会提供的接口特性。Console对象可以在任何全局对象中访问，如 Window，WorkerGlobalScope 以及通过属性工作台提供的特殊定义。它被浏览器定义为 Wi...
2019-09-08 10:16:00
272
原创 顶点着色器插值输出到片元着色器的三种方式—— flat、noperspective 、smooth（透视矫正）
以OpenGL为例，在https://www.khronos.org/opengl/wiki/Type_Qualifier_(GLSL)上，可以看到三种插值的方式。图片截图不是很清楚，就简单说一下这几种吧。1. flat 该值不会被差值2.noperspective该值将在窗口空间中线性插值3.smooth该值将以透视校正的方式进行插值，这也是默认的插值方式...
2019-09-08 10:05:08
1795
原创 Android App 开发实战 共享客栈
这个App还是大二做的，前两天有人问我能不能做原生App，公司也要用到Android混合开发，突然想到了这个App，当时也是赶共享经济的潮流，在学校里和同学搞了这么个App，下面就简单介绍下吧，App里面的技术栈是很古老（嘻嘻，有点嘲讽的意思哈），有兴趣的朋友加我技术群交流哈。 开始...... PC端基于古老的Java swing : ...
2019-08-11 22:33:05
359
原创 Three.js项目实战之Dijkstra寻路效果、 A*寻路效果
分享两个基于Three.js结合寻路算法实现的项目效果；第一个是用Dijkstra实现的，是我大学的毕业设计，熟悉蜂鸟视图产品的同志，可能会感觉很相似哈，就简单截个图了哈。 上面当然会有些缺陷了哈，路径不够平滑，其实在得到最短路径之后，我们是可以用贝塞尔曲线或者B样条做曲线拟合的生成光滑的路径点，所以呢，在我实习的时候，遇到了类似的需求我就在得到最短路径后利用Thre...
2019-04-17 22:25:16
3456
2
原创 Three.js 拾取之GPU Picking的理解和思考
今天，分享的是项目中真实会用到的东西，Three.js GPU Picking，这是什么意思呢，不同于Three.js 的Raycaster，它是利用颜色的6位16进制表示，以颜色作为ID，在后台渲染出纹理后，根据鼠标坐标下的纹理颜色，进行ID的查询进行拾取操作，哈哈，如果你不是很了解，应该不明白我在说什么，下面我们一步一步来说明这个所谓的GPU Picking。 在Th...
2019-03-27 00:00:52
4510
2
原创 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
5410
原创 Three.js 项目实战之在线3D纸箱包装DIY设计
这个项目是在大学的时候做的，做了没多久就移交给下届的同学继续做了，那我今天分享一下这个项目，主要是是给纸箱厂做一个3D在线包装设计，增加包装纸厂的客户流量，并且也能过让用户得到更好的体验，下面展示的是客户端，后台在我同学那边，我就展示一下客户端。主界面：登录和注册页面：核心纸箱3D展示、编辑界面1.纸箱纹理编辑2.纸箱平面图展开与折叠3.平面图展开...
2019-03-25 22:17:47
3546
1
原创 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
4568
1
原创 Three.js着色器构成剖析和MeshStandardMaterial（PBR）shader着色器实现分析
哈哈！今天要分享的是在工作碰到的需求，项目中部分模型需要通过Instance方式进行渲染优化，主要是减少drawcall次数和顶点数量。然而项目中的使用的是MeshStandardMaterial，这种材质是一种基于物理的标准材质（PBR),然而Three.js并没有将Instance封装到着色器中，需要我们在代码里重写THREE.ShaderLib.physical并将Instan...
2019-03-24 21:52:32
6839
原创 重新开始！大前端+实时渲染+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
1040
原创 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
2974
原创 Babylon.js 踩坑之正交摄像机,平行投影的相关设置
最近在研究Babylon.js这款专业Web3D的游戏引擎，官网的教程很全面，但不免有些遗漏的地方。今天，就讲Babylon.js中相机的投影类型。 Babylon.js中的相机类型有UniversalCamera，ArcRotateCamera，FollowCamera等等，在测试程序的时候，这些相机的投影类型默认都是透视投影。那么，其实在开发的时候，我们有些特殊...
2018-08-04 19:22:43
2627
原创 AR.js摄像头前置的问题（已解决）（H5调用摄像头）
AR.js摄像头前置的问题（已解决） 终于放假了，开始搬砖。很多开发者对AR.js摄像头前置的这个问题比较苦恼，网上也有很多解决办法，但是有些过时。接下来，我们来一起解决这个问题。先看一下效果。(PS:下面的QQ摄像头图，标注反了) 不久前，我看一片关于WebAR的文章，很...
2018-07-07 22:39:18
15268
20
原创 WebGL 2.0实现FrameBuffer Objects And RenderBuffer Objects 实现渲染到纹理，离屏渲染
WebGL 2.0 FrameBuffer And RenderBuffer 在学习WebGL过程中，有一种技术叫渲染到纹理，就是把每一帧画面再次处理渲染，并最为纹理，它能做好多高级效果的实现，如边缘检测，高斯模糊，SSAO等。渲染到纹理技术中最重要的就是FBO和RBO,接下来，我们来看看什么是FBO和RBO。 FB...
2018-05-22 21:40:26
2856
原创 AR.js开发问题详解（二维码识别不出来及AR二维码如何进行训练）
AR.js开发问题详解（二维码识别不出来及AR二维码如何进行训练）1. 大家碰到的很多都是二维码识别不出来的情况。原因：周围环境的光太强或太暗，遮挡了二维码的信息，摄像头识别不到全部的信息。 举个例子来说，当你手机的亮度在100%，你在电脑上运行程序，这时候你可以看电脑里面的影像根本不是全部的二维码信息，就是识别不清。解决办法：1.去打印二维码，要...
2018-05-03 21:04:11
8531
14
原创 WebGL 2.0
学习WebGL 2.0有一段时间了，今天分享一些WebGL 2.0的一些学习心得和学习资料。 这是WebGL的一些介绍，包括WebGL 1.0，WebGL 2.0的规范和： WebGL是基于OpenGL ES的低级3D图形API的跨平台，免版税的Web标准。熟悉OpenGL ES 2.0的开发人员将使用GLSL将WebGL识别为基于Shader的API，...
2018-05-01 23:14:25
8386
2
原创 WebGL实现卡通风格着色器及物体描边效果实现（非真实质感）
卡通风格着色器及描边效果实现（基于WebGL 2.0实现）在开发过程中，我们并不总是以真实效果作为追求，最近在学习的过程中，看到了一些非真实质感的开发实现。本次带来一个球体的卡通效果及描边的demo。 先看一下效果图：接下来，简单的阐述一下其中的原理吧。 1.卡通风格的开发，首先需要对物体进行普通的光照计算，得到物体各个区域的的结果光照强度，...
2018-04-15 23:21:45
3691
原创 计算机图形学视图矩阵推导过程
视图矩阵推导过程（Demo基于WebGL 2.0实现）一、概述首先，我们需要了解些概念：摄像机坐标系或者摄像机空间：物体经摄像机观察后，进入摄像机空间。视变化，是将世界坐标系下的坐标变化到摄像机坐标系，视变换是通过乘以视图矩阵实现的。我们要知道视并不存在真正的摄像机，只不过是在世界坐标系里面选择一个点，作为摄像机的位置。然后根据一些参数，在这个点构建一个坐标系。...
2018-04-06 00:59:50
9996
5
原创 WebGL矩阵变换总结（模型矩阵，视图矩阵，投影矩阵）
矩阵变换总结（模型矩阵，视图矩阵，投影矩阵） 最近在开发项目的时候，常常用到Three.js，用起来很方便。可是，当引擎迭代升级的时候，以前的很多的技巧，并不一定使用最新的引擎。我认为应当对底层的原生API有很深入的认识并掌握3D开发相关的数学知识才能成为一个合格的3D开发人员。最近在参与编辑WebGL2.0的书籍，也趁着这个机会好好学习下计算及图形学。...
2018-04-04 00:13:44
6267
原创 AR.js打造高效WebAR（three.js+AR.js）
最近做完一个WebAR的室内导航项目，AR开发部分是基于ar.js做的。ar.js很棒的一处是结合three.js进行3D渲染。当然ar.js都是国外大牛封装开发的，我只是简单分享下向大家介绍下ar.js，并分享下ar.js开发的心得，同时也做了一个小demo。 我们先看一下demo的效果，fps能到60： 接下来我们介绍ar.js，ar.js是git...
2018-03-11 23:29:22
58628
82
原创 阿里轻量云服务器CentOS7.3 Java Web开发环境配置(Tomcat9+JDK1.8+MySQL5.7) 以及tomcat启动慢和mysql外网访问
最近做项目需要上云服务器测试，需要搭建Java Web开发环境配置(Tomcat9+JDK1.8+MySQL5.7)。笔者选择了阿里轻量云服务器，话不多说直接上配置过程。 为了方便操作，准备以下工具: 1.Xshell:远程连接操作阿里云服务器； 2.FTP上传工具：用于远程上传文件至服务器 3.Navicat Lite for MySQL：用于远程连...
2018-02-26 23:00:37
2420
原创 AndroidStudio 华为P9 logcat不出日志解决方案
进入拨号界面输入：*#*#2846579#*#*，进入工程菜单1.选择后台设置2.选择USB端口设置，USB端口设置为Google模式3.选择LOG设置，AP日志，充电日志，休眠日志全选4.再次调试程序
2017-08-06 16:39:05
677
1
AR.js（摄像头前置）
2018-07-07
WebGL 2.0 FrameBuffer And RenderBuffer
2018-05-22
webgl 2.0 camera
2018-04-06
ar.js demo
2018-03-11
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人