webgl
DBBH
成都有合适webgl/webgpu岗位的请私信我
展开
-
webgl调试之排查内存泄漏
然后我们如何确认泄露了呢,我们需要把代码梳理清楚,知道哪个时机,在delete,在create,那么这个时候,按道理,delete了n个对象,create了N个对象,那么内存就是N个对象所占的,根据这个地方,你重新执行s次这个流程,看一下是否程序里只有N个对象即可。这个快照的摘要那里,点进去,谷歌里可以选择compare,那么能帮你看上一次和这次的区别,你自己也能看出来的,但是这只是告诉你某个对象泄露了,给你一点思路,具体是怎么回事,你就顺着对象的代码逻辑梳理慢慢找。就能获取一张现在的内存情况了。原创 2024-01-06 22:40:36 · 506 阅读 · 0 评论 -
webAR测试
我拿iphone死活打不开 我是11 裂开了,学习到此结束,有做过的大佬能指点一下吗QWQ。代码内容如下,引入了一个好像是AR识别库的东西,能反算真实的实时相机位置。今天好奇webAR怎么开发,找到一个叫mindAR的库有个教程,于是,原创 2023-02-26 20:59:10 · 194 阅读 · 0 评论 -
SSR关于厚度问题的思考
我坐标都是几十万,那表面0.1这个事情,在一个像素能承载的信息里,很难顶啊,思考一下,相机离远了,一个像素其实走了很远,这可怎么办。当条件给到viewDepth的差是0.1的时候,很难打中,这里打不中。问题就是来自于这个0.1。搜来的结果中,感觉唯一能解决的方案是。一个物体画两次,这样就有准确的厚度了。最近搞了个很大的坐标的mesh,然后SSR进行raymarch。...原创 2022-08-12 10:45:02 · 116 阅读 · 0 评论 -
粗版仿Sketch Up的cameracontrol的思路
threejs交流群511163089进去他们官网玩一下,发现有点意思。那么想一下大概怎么模仿(发出白嫖的声音)呢操作看看,鼠标向上,相机向上,鼠标向右,相机向右。这里你如果觉得方向反了拿起你身边的物体试试,你看看头移动看见的视觉效果。于是乎,劣质版就可以做出来了首先mousemove里看看鼠标方向然后以鼠标往上为例,camera的移动方向就向当前的up方向的方向移动,然后保持lookat的方向不变,这里不是lookat不变,是那个direction不变。向left up rig原创 2020-10-29 11:13:57 · 149 阅读 · 0 评论 -
web端的shader效果九 three.js里shader实现较平静的水面
具体做法可以参考threejs的reflector实现的拿到反射的部分 refactor实现的拿到折射的部分 然后我搭配的dudvMap 再加一个普通的phong 看起来还是比较像水面的...原创 2019-10-24 22:35:29 · 2310 阅读 · 0 评论 -
web端的shader效果七 线框模型 科技感
线框模型,初步实现了一下 侧面 我的这个做法房顶需要单独搞才会正常 不过我没有单独的房顶,没有搞来看原创 2019-08-21 15:21:14 · 1392 阅读 · 0 评论 -
webgl2 transformfeedback
这个东西 可以做到GPGPU粒子系统。。我也不知道其他地方怎么应用的 第一次学gl.createVertexArray创建VAO 填上VBO然后两个这个feedback =[gl.createTransformFeedback(),gl.createTransformFeedback()]交换用gl.bindTransformFeedback(gl.TRANSFORM_FEEDBAC...原创 2019-08-12 15:01:50 · 564 阅读 · 0 评论 -
threejs第二十八用 记一下vertexColor
buffergeometry这类品种都能使用ans=[]for(...)ans.push(xxx)大概就是var geo=new THREE.XXXBufferGeometrygeo.addAttribute('color', new THREE.Float32BufferAttribute(ans, 3));这样顶点属性就含有顶点颜色信息了材质中vertexColors...原创 2019-04-09 09:04:58 · 3662 阅读 · 0 评论 -
threejs第二十四用 我关于scene和renderTarget的理解
在opengl webgl里面创建对象就是用VAO VBO Shader整一个然后现在我们有一个camera属性对象 我们有 A B C D E F G绘制对象 有frameBufferA,frameBufferB我们可以把ABCD画到frameBufferA里面 使用camera的viewMatrix可以把EFG画到frameBufferB里面 仍然使用camera的vie...原创 2019-03-03 10:45:02 · 651 阅读 · 0 评论 -
threejs第二十二用 bloom单个或者几个选定的对象
参考的learnOpenGL的bloom这个单个对象还能半透明发光 不过半透明看着。。我感觉是么有实心的看起来亮 图上是实心的效果然后深度冲突的问题得看看怎么解决。解决掉遮挡的问题了。之后需要看看U3D UE4的处理手法 感觉我这个发光太朴素 没有炫的感觉最后还是使用UE4的shader来发亮 看起来很好看这个unrealBloom是模糊1次 再把模糊后的...原创 2019-02-25 13:58:04 · 2793 阅读 · 2 评论 -
PBR 环境光的diffuse部分学习
看的是learnopengl的教程这一部分,讲的就是步骤1 把一张hdr读进去 然后拆给cubeMap1 步骤2 把cubeMap1卷积了 弄出一张irradianceMap步骤3 ambient部分就可以用反射光线采样irradianceMap这样就有了diffuse部分了直接光部分还是之前教程中的样子unsigned int captureFBO; uns...原创 2019-02-22 09:30:03 · 810 阅读 · 0 评论 -
glsl 进阶学习2
关于求一个盒子 p=point c=center s=size d=distance float box(p,c,s){ vec3 ans=abs(p-c); 这样求出这个点到中心的距离 ans-=s;这样算出了x y z三个面跟size的比较 在内部就都<0float d=max( max(ans.x,ans.y),ans.z; 有一个大于0了就没在盒子里了 所以...原创 2018-12-05 10:34:15 · 167 阅读 · 0 评论 -
glsl mix
mix(x,y,a) a控制混合结果 return x(1-a) +y*a 返回 线性混合的值原创 2018-11-21 18:48:44 · 9520 阅读 · 0 评论 -
glsl smoothstep step
smoothstep (x y a )参数 y必须大于x 然后 a如果小于x 返回 0 如果a>y 返回1 在x y之间 返回 3a^2-2a^3step (x a)参数 如果a小于x就是0 否则 返回1 相当于比较大小...原创 2018-11-21 18:45:54 · 4827 阅读 · 0 评论 -
webGL拾取
原理:首先 给object一个key 然后keyToColor 然后 fragment里面 uniform这个 keyToColor 然后画出来 画在FBO上面 每一个object就会有独特的颜色在这张图片上面了。 拾取就readpixel 是读这张FBO 得到rgba 转化为key 然后key反向找一个object 就找到了栗子 第一个object key=1 color弄成0 0 1 0...原创 2018-11-09 13:31:26 · 690 阅读 · 1 评论 -
webGL绘制不同物体基本内容
跟OGL一样 需要先有VBO 再用vertexAttribute传定点属性 然后draw这个是一个基本例子 包含创建使用VBO EBO 创建使用shaderProgram<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name=&原创 2018-08-14 14:11:18 · 509 阅读 · 0 评论