WebGL | 易学教程

How do I convert a vec4 rgba value to a float?

阅读更多关于 How do I convert a vec4 rgba value to a float?

问题 I packed some float data in a texture as an unsigned_byte, my only option in webgl. Now I would like unpack it in the vertex shader. When I sample a pixel I get a vec4 which is really one of my floats. How do I convert from the vec4 to a float? 回答1: The following code is specifically for the iPhone 4 GPU using OpenGL ES 2.0. I have no experience with WebGL so I cant claim to know how the code will work in that context. Furthermore the main problem here is that highp float is not 32 bits but

Alpha rendering difference between OpenGL and WebGL

阅读更多关于 Alpha rendering difference between OpenGL and WebGL

问题 I'm rendering the same scene using the same exact C++ code, once to native OpenGL on windows and once using Emscripten to WebGL. Everything in the scene looks exactly the same, except when I'm rendering something with alpha != 1.0. The difference looks like this: The blue cube color is (0.0, 0.0, 1.0, 0.5) The shader used for rendering the cube does nothing except draw the color. On the right is how it looks with OpenGL and is the expected result, just blue with half transparency. On the left

How do you pack one 32bit int Into 4, 8bit ints in glsl / webgl?

阅读更多关于 How do you pack one 32bit int Into 4, 8bit ints in glsl / webgl?

问题 I'm looking to parallelize some complex math, and webgl looks like the perfect way to do it. The problem is, you can only read 8 bit integers from textures. I would ideally like to get 32 bit numbers out of the texture. I had the idea of using the 4 color channels to get 32 bits per pixel, instead of 4 times 8 bits. My problem is, glsl doesn't have a "%" operator or any bitwise operator! TLDR: How do I convert a 32bit number to 4 8bit numbers by using the operators in glsl. Some extra info on

How to get the absolute position of a vertex in three.js?

阅读更多关于 How to get the absolute position of a vertex in three.js?

问题 As far as I know var point = object.geometry.vertices[i]; will return with the relative position for the x , y and z of the point inside the geometry of the object. How to get the absolute position, if the object was moved, rotated or scaled? 回答1: First make sure the object's matrices have been updated. object.updateMatrixWorld(); The render loop usually calls this for you. Then, do this: var vector = object.geometry.vertices[i].clone(); vector.applyMatrix4( object.matrixWorld ); The vector

How to get the absolute position of a vertex in three.js?

阅读更多关于 How to get the absolute position of a vertex in three.js?

Three.js WebGL 绘制流程(一)

阅读更多关于 Three.js WebGL 绘制流程(一)

【推荐】2019 Java 开发者跳槽指南.pdf(吐血整理) >>> Three.js 中3D 物体都继承于 Object3D; 而构造一个3D 物体需要提供两个对象即Gemotry 几何体和 Material 材质。 Gemotry 中 vertices 决定定点的列表， face 决定面的构成， faceVertexUv 决定纹理坐标而Material 不同类型将会采用不同类型的shader 来绘制，通过设定Material 的某些材质来开启默认shader的一些属性：例如map 属性将会开启纹理功能 WebGL 中任何的绘制都需要提供shader， Three 自身提供了一些shader 模板，这些模板和 Three提供的材质类型以及3D 对象的类型相关；例如一个Mesh 类型的3D 对象，通过PlaneGemotry 和 MeshBasicMaterial 来构造，则会采用编号为basic的shader 在WebGlRender 这个文件中汇集了绘制的基本逻辑，而在ShaderUtil 文件中集中了shader 模板。一个场景的构成： Scene Camera Object Scene 中一个数组存储了所有Object ，同时其通过继承 Object3D , 将整个场景也构成了一棵树。所有任何3d对象在加入到场景中时，

webgl——混合与模板测试

阅读更多关于 webgl——混合与模板测试

【推荐】2019 Java 开发者跳槽指南.pdf(吐血整理) >>> 今天研究了一个混合与模板测试相结合的案例，这里做以总结。案例中一个篮球在地板上不断弹起并且落下，这里主要涉及到了两项技术：混合与模板测试。首先篮球在地板上反射出来的镜像篮球就是通过混合技术实现的，为了让镜像体在运动脱离地板时消失，实现真实的效果，还需要加入模板测试。首先介绍他们的绘制顺序 1.开启模板测试，关闭深度检测 2.绘制实体地板 3.设置模板测试参数 4.绘制镜像球，禁用模板测试 5.开启混合 6.设置混合参数，绘制半透明地板 7.关闭混合，开启深度检测看到这里是不是有些头晕了，不过没关系，我们来一起理一理其中的思路。首先关于深度检测：深度检测在此案例中不需要使用，我们完全可以根据绘制的顺序来确定他们的显示顺序，当不开启深度检测时，会根据我们绘制的顺序来决定谁会覆盖谁。其次是模板测试，先清除上一次绘制产生的模板缓冲，使得缓冲中所有值为0，然后给地板设置模板缓冲的参数，其中设置 glStencilFunc(GL_ALWAYS, 1, 1); 这样一来，地板的像素的“模板值”为1，而其它地方像素的“模板值”为0。glStencilOp(GL_KEEP, GL_KEEP, GL_REPLACE);这个函数第一个参数是未通过模板测试时的操作，第二个参数是通过模板测试，未通过深度测试的操作

WebGL 的 3D 模型交并补

阅读更多关于 WebGL 的 3D 模型交并补

建设性的立体几何具有许多实际用途，它用于需要简单几何对象的情况下，或者数学精度很重要的地方，几乎所有的工程 CAD 软件包都使用 CSG（可以用于表示刀具切削，以及零件必须配合在一起的特征）。CSG 是 Constructive Solid Geometry 建模技术的简称，通过裁剪 subtract、融合 union 和相交 intersect 的运算，组合出复杂模型效果，HT 封装了 ht.CSGNode 和 ht.CSGShape 等图元类型来支持 CSG 的组合功能，常用于墙面的门窗挖空凿洞的应用场景。 CSG 对象可以用二叉树表示，其中叶子表示基元，节点表示操作。在这个图中，节点被标记 ∩ 为交集，∪ 为并集，- 为差集。CSG 提供的模型或表面看起来很复杂，但实际上不过是巧妙组合或分解对象。 ht.CSGNode 继承于 ht.Node，当 style 的 shape3d 属性为空时显示为六面体效果，CSGNode 如果通过 setHost 吸附到宿主 CSGNode 或 CSGShape 后，宿主 CSGNode 或 CSGShape 可与吸附的 CSGNode 图元进行 CSG 的组合建模。详情请参考 HT for Web 建模手册 CSGNode 章节。这里我用 CSG 的概念写了一个例子，让大家能更好地理解这个概念。本例 Demo 地址： hightopo

WebGL 的 3D 模型交并补

阅读更多关于 WebGL 的 3D 模型交并补

【推荐】2019 Java 开发者跳槽指南.pdf(吐血整理) >>> 建设性的立体几何具有许多实际用途，它用于需要简单几何对象的情况下，或者数学精度很重要的地方，几乎所有的工程 CAD 软件包都使用 CSG（可以用于表示刀具切削，以及零件必须配合在一起的特征）。CSG 是 Constructive Solid Geometry 建模技术的简称，通过裁剪 subtract、融合 union 和相交 intersect 的运算，组合出复杂模型效果，HT 封装了 ht.CSGNode 和 ht.CSGShape 等图元类型来支持 CSG 的组合功能，常用于墙面的门窗挖空凿洞的应用场景。 CSG 对象可以用二叉树表示，其中叶子表示基元，节点表示操作。在这个图中，节点被标记 ∩ 为交集，∪ 为并集，- 为差集。CSG 提供的模型或表面看起来很复杂，但实际上不过是巧妙组合或分解对象。 ht.CSGNode 继承于 ht.Node，当 style 的 shape3d 属性为空时显示为六面体效果，CSGNode 如果通过 setHost 吸附到宿主 CSGNode 或 CSGShape 后，宿主 CSGNode 或 CSGShape 可与吸附的 CSGNode 图元进行 CSG 的组合建模。详情请参考 HT for Web 建模手册 CSGNode 章节。这里我用 CSG 的概念写了一个例子

How to implement a scrolling texture in WebGL?

阅读更多关于 How to implement a scrolling texture in WebGL?

问题 I have gone through this as a example on how to render a normal texture to a canvas using WebGL and successfully implemented it. Now I am trying to implement a scrolling image where I am getting line by line pixel data from another machine in the same network via Ajax Polling or Websockets and have to render the same using WebGL to canvas. So, now I know we can easily render 60 frames per second which means if I get 50 lines of pixel data per second from another computer in the network ,I

订阅 WebGL