shader

Showing Depth in Three.js Point Cloud

由 那年仲夏 提交于 2020-06-23 12:14:03
问题 I have a 3D scan of a rock that I have represented as a point cloud using Three.js, and I wanted to more explicitly show the features of the rock, perhaps using lighting to show depths with Three. Viewing the rock from the top, I see this: When looking closely from the side, you can see rigid features that I would like to show more closely: I am unsure in how to approach this, and was hoping for some help in showing these rock features within this visualization. For context, this is my

Showing Depth in Three.js Point Cloud

由 大憨熊 提交于 2020-06-23 12:12:54
问题 I have a 3D scan of a rock that I have represented as a point cloud using Three.js, and I wanted to more explicitly show the features of the rock, perhaps using lighting to show depths with Three. Viewing the rock from the top, I see this: When looking closely from the side, you can see rigid features that I would like to show more closely: I am unsure in how to approach this, and was hoping for some help in showing these rock features within this visualization. For context, this is my

Why are Uniform variables not working in GLSL?

由 a 夏天 提交于 2020-06-07 07:12:49
问题 I am currently trying to create a Blur Shader for postprocessing purposes using LWJGL, but stumbled across a problem. The Uniforms I want to change are resolution, radius and direction of the blur (horizontal or vertical, so I am able to use one Shader for both directions). I render the output to a FrameBuffer, which then gets rendered to the screen. But somehow, the Texture is just black. When I use constant values instead of uniforms, it works exactly as expected, so the problem must be the

Font rendering onto off-screen FBO not working. (Note: fonts are loaded by creating textures using Freetype lib with glTexImage2D)

由 人走茶凉 提交于 2020-05-16 06:31:51
问题 I have the following code to render a rectangle and few texts onto an offscreen FBO. And then I try to bind the texture (attached to FBO) in default/ display framebuffer. I am able to render the rectangle but the fonts are not getting rendered. I tried debugging, but so far could not. I have to do this in OpenGL ES 2.0 only. My rectangle is of orange color. The texts/fonts are of red color. I use Freetype lib and glTexImage2D call to create individual textures for each font. When I render

Showing Point Cloud Structure using Lighting in Three.js

由 喜夏-厌秋 提交于 2020-04-14 08:33:27
问题 I am generating a point cloud representing a rock using Three.js, but am facing a problem with visualizing its structure clearly. In the second screenshot below I would like to be able to denote the topography of the rock, like the corner (shown better in the third screenshot) of the structure, in a more explicit way, as I want to be able to maneuver around the rock and select different points. I have rocks that are more sparse (harder to see structure as points very far away) and more dense

Workaround to use uniforms (or similar) in WebGL for loops?

由 北城以北 提交于 2020-04-11 08:30:11
问题 I'm working on implementing a fragment shader in WebGL, and came across the limitation of being able to only use constant expressions in for loops. Does anyone have any suitable workarounds for this? In my specific case, I'm implementing a bilateral filter, and currently have a window size specified as a const in my fragment shader, but would like to be able to change this from JavaScript. Uniforms aren't considered constants and thus can't be used in a for loop, so I'm looking for some other

Workaround to use uniforms (or similar) in WebGL for loops?

由 社会主义新天地 提交于 2020-04-11 08:30:10
问题 I'm working on implementing a fragment shader in WebGL, and came across the limitation of being able to only use constant expressions in for loops. Does anyone have any suitable workarounds for this? In my specific case, I'm implementing a bilateral filter, and currently have a window size specified as a const in my fragment shader, but would like to be able to change this from JavaScript. Uniforms aren't considered constants and thus can't be used in a for loop, so I'm looking for some other

cocos2dx shader应用——sprite变灰

由 半城伤御伤魂 提交于 2020-04-06 19:31:13
借鉴了多位博主的代码，谢谢！~~分享精神！ 使用版本：cocos2d-x2.2.1 在实际项目中，经常需要用到灰色图像。比如按钮变灰，一般情况下，我们需要准备三张图，一张正常颜色图，一张按钮按下图，一张按钮变灰图。若此种类似情况过多，就会导致资源包过大，这显然不是我们愿意看到的结果。此种情况下，我们就可以考虑修改程序的方法，实现正常颜色图变灰，就可以减少资源图。 基于上述情况，我们需要增加程序中图像变灰代码。具体有两种思路： （一）因为图像在cocos2dx引擎中是使用CCImage加载进来的，图像数据也使用CCImage存储。因此，可以使用图像处理方法将图像数据修改，转换为灰度图，然后创建精灵； （二）使用shader的方式，将图像显示转化为灰度图显示。 1、 本文采用的就是第二种方式。具体步骤如下：写好一个图像变灰的shader程序，并放入到cocos2dx引擎下面的shader文件夹中。 //ccShader_PositionTextureGray_frag.h " \n\ #ifdef GL_ES \n\ precision mediump float; \n\ #endif \n\ \n\ uniform sampler2D u_texture; \n\ varying vec2 v_texCoord; \n\ varying vec4 v_fragmentColor;

WebGL编程笔记3：纹理图片texture

由 北城以北 提交于 2020-03-29 17:41:06
HTML部分 <script type="text/javascript" src="gl-matrix.js"></script> <canvas id="myCanvas" width="400" height="400" style="border: 1px solid red"></canvas> JavaScript部分 以下两点若不注意texture2D有可能取不到值，一片黑色。 老的显卡只支持图片尺寸为2的n次幂的纹理图片。 TEXTURE_MAG_FILTER和TEXTURE_MIN_FILTER参数需要制定。 const vertex = ` attribute vec3 v3Position; uniform mat4 u_matrix; attribute vec2 inUv; varying vec2 outUv; void main() { gl_Position = u_matrix * vec4(v3Position, 1.0); outUv = inUv; } `; // texture2D(u_texture, vec2(outUv.x, outUv.y)); // texture2D(u_texture, outUv; // 从纹理texture中根据outUv坐标取色素rgba const fragment = ` precision

WebGL编程笔记1

由 别等时光非礼了梦想. 提交于 2020-03-28 09:00:17
<canvas id="myCanvas" width="600" height="300" style="border: 1px solid red"></canvas> 　　 function createProgram(webgl, vertex, fragment) { // 创建程序 let shader_vertex = webgl.createShader(webgl.VERTEX_SHADER); let shader_fragment = webgl.createShader(webgl.FRAGMENT_SHADER); webgl.shaderSource(shader_vertex, vertex); webgl.shaderSource(shader_fragment, fragment); // 编译源码 webgl.compileShader(shader_vertex); webgl.compileShader(shader_fragment); if (webgl.getShaderParameter(shader_vertex, webgl.COMPILE_STATUS) === false) { console.error('Compile Shader Error: shader_vertex,' + webgl
订阅 shader