webgl,depth-buffer , Depth image webgl

Depth image webgl


Tag: webgl,depth-buffer

I want to draw just the depth image without any color in the following manner:

enter image description here

Is this possible? If so, can someone point me to the correct resource to get this information or give a basic explanation about the same?


There's no direct way to visualize the actual contents of the depth buffer in WebGL. However, it's easy to draw the depth; this is basically identical to drawing fog (in the old fixed-function style).

In your vertex shader, pass the z component of the vertex position through a varying. While you're at it, rescale its range from [-1, 1] to [0, 1].

// do this after you've set gl_Position, of course.
vZ = (gl_Position.z + 1.0) / 2.0;

In your fragment shader, use this value as the color.

gl_FragColor = vec4(vZ, vZ, vZ, 0.0);

Note that this will produce shading which is nonlinear in the same way as the actual depth buffer values are nonlinear. If you want linear brightness from the near plane to the far plane, you'll need to take the z coordinate from just before the projection transform, and rescale it based on the near and far plane distance.


Using a loaded image in a webgl texture

I want to upload a texture to webgl, and most tutorials do something like this: var textureImage = new Image(); textureImage.src = "img/texture.png"; textureImage.onload = function() { ...texture loading code... }; So the texture doesn't actually get uploaded to webgl until later, after the image has loaded. However, I have...

Can I get a texture onto my second cube?

I'd like to get an opinion: I currently have the following program consisting of two multi-colored cubes that can be selected via the one html button and rotated by pressing corresponding keys on the keyboard. Here is my HTML file: <html> <script id="vertex-shader" type="x-shader/x-vertex"> attribute vec4 vPosition; attribute vec4 vColor;...

Cannot get 4th vector to render in WebGL TRIANGLE_STRIP

I am trying to play around with WebGL and I can render a triangle in this plunker. Now I try to make this a full square by changing... //This... this.triangleVertexPositionBuffer.numItems = 3; // ... this.gl.drawArrays(this.gl.TRIANGLE_STRIP, 0, this.triangleVertexPositionBuffer.numItems); // To this.. this.triangleVertexPositionBuffer.numItems = 4; This to me should just make a...

Show two WebGL animations with the same shader

I need to show two animations using WebGL on the page. Do I need to instantiate multiple shaders, or is there a way to reuse one shader? They are using the same program (so not entirely different animations). They both need to react to mouse events. something like this window.onload...

What can I do to optimize my WebGL animations?

I have a page with multiple WebGL animations. When I have one or two on the page, the performance is fine on most hardware. When I run 7 or 8 the animations become very slow. I have heard about viewport slicing, but can't find a good resource. Would it help?...

Programmatically generate texture for WebGL in JavaScript

I have the following code to programmatically generate a texture for WebGL in C. I need to do the same thing in JavaScript for WebGL. How do I properly create the 3 dimensional checkerboard matrix? GLubyte checkerboard[64][64][3]; How do I set the values? checkerboard[i][j][0] = (GLubyte) c; How do I...

WebGL fragment-shader for multiple light sources?

I want to be able to append multiple light sources to each node of my scene graph, but I have no clue how to do it! From the tutorials on learningwebgl.com I learned to either use directional or position lighting, but I couldn't find a good explanation of how to...

Writing fragment shaders: cannot make sense of how the uniforms are defined

I'm trying to make custom filters with Phaser, but I don't get how the uniforms, and vTextureCoord in particular are specified. Here's a JSFiddle (EDIT: Ignore the image, the minimal case lays in the square gradient): Why isn't the top-right corner white? I've set both the filter resolution and the...

is early exit of loops on GPU worth doing?

We've written GLSL shader code to do ray tracing visualisation using the GPU. It seems to be pretty standard to put an early exit break in the ray marching loop, so if the light is extinguished, the loop breaks. But from what I know about GPU code, each render will...

How can I render .mtl for object on iPhone 5 using ThreeJS?

I am trying to load .obj files through ThreeJS and have it be cross compatible. I am using the OBJMTLLoader method. The object loads and renders fine for Firefox, Chrome, and IE on Windows; see falloutfan.com/eyebot for reference. On iPhone 5, I am able to see the object, but it...

Webgl 1 bit per pixel texture

Is there any way to use 1 bit per pixel texture data in WebGL (for example texture 16×16px in 32 bytes of data) or is it necessary to unpack data from 1bpp to 8bpp first? I have found similar OpenGL related question and answer http://stackoverflow.com/a/15706596/4540236, but it seems to me,...

OpenGL How to use a invisible mask to hide objects behind it

I have an OpenGL problem to solve. I have an object/mesh A, an object/mesh B and a background texture C. Initially the framebuffer is filled with background texture C. We draw both A & B in the framebuffer. We want to keep object A visible, and object B always invisible....

mat4 type in attribute shader

how to send to a shader attribute with the MAT4 type? attribute mat4 attr; ... JS: var attr=gl.getAttribLocation(_program,"attr"); ...

Is it possible to use WebGL max texture size?

I am working on an app where higher resolution is always better. But I'm stuck with WebGL max_texture_size problems. I create an image of size exactly this dimension (16384x16384 on my laptop) and WebGL crashes saying that: GL_INVALID_ENUM : glBindFramebuffer: target was GL_READ_FRAMEBUFFER_ANGLE GL_INVALID_ENUM : glBindFramebuffer: target was GL_READ_FRAMEBUFFER_ANGLE WebGL:...

Atmosphere Scattering for Earth from space and on the ground

Please provide prompt how to make the atmosphere of the Earth so that it is visible from space and from the ground (as shown in the image) a model of the earth: Earth = new THREE.Mesh(new THREE.SphereGeometry(6700,32,32),ShaderMaterialEarth); model of the cosmos: cosmos= new THREE.Mesh(new THREE.SphereGeometry(50000,32,32),ShaderMaterialCosmos); and a light source: sun...

WebGL vs CSS3D for large scatter plot of images

I am building a web application which will display a large number of image thumbnails as a 3D cloud and provide the ability to click on individual images to launch a large view. I have successfully done this in CSS3D using three.js by creating a THREE.CSS3DObject for each thumbnail and...

JavaScript Image only loads on refresh

I'm currently struggling with a very annoying problem on my game engine... I can't figure out why the images are not loading on the first time the page loads, and to make this work I have to refresh it. Here's my current code: Texture creation: /** * @param {GLContext} context...

Supporting WebGL on Android 5's WebView

I have a web project (depends on WebGL) which works on computers, any browser. Now I am trying this project to be opened as an application on Android based mobile phones. I used WebView to accomplish this. My phone (Nexus 3) had Android 4.3 and as I learnt afterwards before...

Three js Shader Material - Pixelated glitching when transparency is set to true

I'm playing around with shaders for the first time and using THREE.RawShaderMaterial on a few meshes. I'm getting some strange artifacts on my very simple shaders: Vertex shader: precision mediump float; precision mediump int; uniform mat4 modelViewMatrix; uniform mat4 projectionMatrix; attribute vec3 position; attribute vec4 color; varying vec3 vPosition; void...

THREEJS Shader Material overwritten

I have a shader material that works as expected. This shader has a texture attached. I want to create 2 meshes using this shader material, with a different texture for each mesh. Problem is that if I try to render my 2 meshes in the scene, the first object's material...

Animating JSON models without three.js

I know that we can load JSON models in WebGL, but I don't know how to animate them if we have a rigged model loaded. Is there any way of doing this without three.js?

How it is possible to get rid of spurious artifacts of Shadow Mapping?

Spurious artifacts in case of creation of shadows through shadow mapping. I can't understand why many shadows are drawn, and from where they originate? example: example...

Three.js - sprite depths rendering backwards in r70+

It looks like something broke with r70+ regarding z-depth of sprites. Here is a jsfiddle that works perfect with r69. Here is the same jsfiddle except using r71. You can see that now when the scene rotates, the depths of the sprites are not always shown correctly. Half the time...

How can I bypass or set up CORS for Unity3D?

I'm trying to get a WebGL game that calls a server running with Unity3D, however, I've hit this: XMLHttpRequest cannot load http://api.playerio.com/api/13. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://www.teonnyn.com' is therefore not allowed access. Has anyone encountered this before? I did some research, and it seems...

Where is 'webgl.osmesalib' parameter?

I'm trying to get webgl running on my firefox (v37.0.2) via software acceleration with mesa. I tried following the steps that have been stated in this article: http://www.binarytides.com/enable-webgl-firefox-ubuntu/ However, I am unable to find any parameter named 'webgl.osmesalib' in about:config section? Has this been removed (or renamed)? If yes, then...

Webgl throws different error in browsers

Im am learning webgl I made an application to read PLY files and render them in with webgl. The application works fine in Chrome, but when I run it in safari or in Firefox it doesn't work. I tested it in 2 more computers and it just worked in one....

My cubes have disappeared and I don't know why

I'm trying to create a program consisting of two cubes, one with colors, the other with a colored texture. These cubes move and rotate depending on input from the keyboard as follows: u - up, d - down, l - left, r - right, i - in, o - out,...

Shaders in WebGL vs openGL? [closed]

I want to use shaders to use in WebGL and specifically three.js. Is there a specific version of GLSL that WebGL and three.js uses?

Why WebGL slower than Canvas?

I am just started to play around with canvas and webgl, read some article, etc.. and as per my knowledge, WebGL should be much more faster than canvas, but in these following tests it is remarkably slower: http://jsperf.com/canvas-drawimage-vs-webgl-drawarrays http://jsperf.com/three-js-canvas-vs-webgl/2 I run them in Chrome and Firefox, in both browser the...

How to create latitudinal (horizontal) contour lines in GLSL?

I'm aiming for this effect: (horizontal-only contour lines): I did find this example, however it creates horizontal and vertical contour lines. I can't quite wrap my head around how the call to fwidth() is generating the lines. uniform float gsize;//size of the grid uniform float gwidth;//grid lines'width in pixels varying...

GLFW with GLES in simple C++ Emscripten file wont build

I'm trying to setup an OpenGL Context with a window and viewport using the minimum code to do this with emscripten. I've started coding, this with the following code: #include<stdio.h> #include<stdlib.h> #include<GLES2/gl2.h> #include<GL/glfw.h> #include<emscripten/emscripten.h> int init_gl() { const int width = 480, height = 800; if (glfwInit() != GL_TRUE) {...

WebGL not rendering may be related to warning

I am rather new to OpenGL and trying to learn a little WebGl. I came across a tutorial that, while great, appears to be a bit dated. I implemented my own version of this example in a Plunkr. I left out the square on purpose, however, once I have everything...

can I send an array of data as a vertex attribute?

I have a PointCloud in which I am using to visualize some time-related data points. For each vertex in the PointCloud.Geometry, I'd like to assign an attribute which is an array of epoch times. These epoch times are ints, an example would be: epochTimes = [1432314839, 1432314840, 1432314841]; the custom...

Threejs: PointCloudMaterial size compared to ShaderMaterial gl_PointSize with size attenuation

I am curious to know what the relationship is between gl_PointSize and the size property within PointCloudMaterial. When I create a PointCloud with PointCloudMaterial and set the size property to 1, the size of the particles are far larger than when creating a PointCloud with a ShaderMaterial and setting the...

Clipping images in Webgl

The 2-D canvas provides an api called draw image : context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height); where sx is the position from where the image clipping starts . http://www.w3schools.com/tags/canvas_drawimage.asp, I am trying to use webgl to render a 2D image using texImage2D. i wanted to check if there is a way to implement clipping with...

Webgl: color attachments with different formats do not work on windows

I'm trying to use WEBGL_draw_buffers with OES_texture_float, which works. However, when using two render targets with a different type, this does not work on my windows machine (amd). It does, however, work on my linux machine (open source radeon driver). So a framebuffer with the following color attachments does not...

three.js webgl custom shader sharing texture with new offset

I am splitting a texture 1024 x 1024 over 32x32 tiles * 32, Im not sure if its possible to share the texture with an offset or would i need to create a new texture for each tile with the offset.. to create the offset i am using a uniform...

“Tainted canvases may not be loaded” Cross domain issue with WebGL textures

I've learnt a lot in the last 48 hours about cross domain policies, but apparently not enough. Following on from this question. My HTML5 game supports Facebook login. I'm trying to download profile pictures of people's friends. In the HTML5 version of my game I get the following error in...

How to blur a transparent texture in a glsl shader?

My setup: Ping-ponging RGBA FBO's, and two shaders for blurring: a horizontal and a vertical one. Imagine I want to blur a red rectangle. The blend function is as follows: _gl.blendEquationSeparate(_gl.FUNC_ADD, _gl.FUNC_ADD); _gl.blendFuncSeparate(_gl.SRC_ALPHA, _gl.ONE_MINUS_SRC_ALPHA, _gl.ONE, _gl.ONE_MINUS_SRC_ALPHA); In my blur shaders I add several fragments like this: vec4 color = texture2D(u_image,...

Every way to get textures, WebGL

I was wondering if there was any other way to get textures in WebGL other than the standard Image() constructor. Specifically I would like to make a texture using the data from a tag in html, but I would also like to see other ways....

WebGL Normal calculations from position texture

Iam trying to create a procedural water puddle in webGL with "water ripples" by vertex displacement. The problem I'm having is that I get a noise I can't explain. Below is the first pass vertex shader where I calculate the vertex positions that i later render to a texture that...

How to use framebuffer targets in webgl?

How can I specifically use the read and write framebuffers in webgl ? Can't seem to find the constants for it.

Can not render image from S3 bucket in WebGL

When my JavaScript app trys to load an image from my Amazon S3 account and render it in WebGL the browser throws a CORS error. I changed the S3 bucket's CORS configuration to allow access: <CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/"> <CORSRule> <AllowedOrigin>*</AllowedOrigin> <AllowedMethod>GET</AllowedMethod> <MaxAgeSeconds>3000</MaxAgeSeconds> <AllowedHeader>Authorization</AllowedHeader> </CORSRule> </CORSConfiguration> Unfortunately, browsers...

Multiple WebGL models on the same page

My research lab is working on a webpage that displays a long scrollable list of 3d models, about 50 or so. Our first idea was to do this with separate THREE.js WebGL contexts, but it seems this isn't advisable given the architecture of WebGL, and browsers seem to limit the...

globalcompositeoperation equivalent in webgl

Canvas 2D provides an option of overlapping images in different ways with the globalcompositeoperation property as shown here http://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_canvas_globalcompop Is there an option similar to this in webgl when rendering images using the texImage2D function ?...

How do I resize webGL canvas in bootstrap.js column?

I have a webpage at here where I want to resize a webGL drawing in an HTML5 canvas to fit within "6" columns using the bootstrap.js library for layout. The layout is defined as: <div class="container"> <div class = "row"> <div class = "col-md-2"></div> <div class = "col-md-6" id="rightColDiv"><canvas id="lesson04-canvas"...

What can I use as an array index in GLSL in WebGL ?

Are there ONLY constants allowed or can I use for loop indices or any other dynamic values ?

How to multiply a 4x4 Matrix with a vector-array of arbitrary length?

When writing a specific scene in webgl, the usual procedure of transforming an object would be to define the original vertex position data and pass it to the vertex shader, where the vertices are multiplied with matrices, that hold the informations about perspective, translations, rotations and scale, so that the...

How much data does texImage2D in WebGL need?

I created a DataTexture in ThreeJS, which in turn will call texImage2D. var twidth = 50; var theight = 50; var tsize = twidth * theight; var tileData = new Uint8Array( tsize * 3); //fill it with some data tileDataTexture = new THREE.DataTexture(this.tileData, twidth, theight, THREE.RGBFormat); As you can see,...

Create a 2D texture from existing textures

I have an application where I load a series of medical images (jpg), create a texture object for each image and display those textures on 3D planes. The amount of images depends in the CT scanner's resolution but my prototype should work with up to 512. As an additional task,...