FAQ Database Discussion Community


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

javascript,opengl-es,three.js,webgl
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...

Cannot get 4th vector to render in WebGL TRIANGLE_STRIP

webgl
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...

What can I do to optimize my WebGL animations?

javascript,jquery,performance,webgl
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?...

Where is 'webgl.osmesalib' parameter?

firefox,graphics,webgl
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...

Show two WebGL animations with the same shader

javascript,webgl
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...

Having trouble changing color by pressing left or right button

javascript,html,canvas,webgl
I'm having trouble changing change the color when you from left to right button. Holding down the left mouse button and moving it inside the canvas should draw a trajectory of the mouse in motion of red dots and blue dots for when you hold down the right mouse button....

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

three.js,glsl,webgl,shader
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...

WebGL Normal calculations from position texture

glsl,webgl,normals,render-to-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...

Three.js - sprite depths rendering backwards in r70+

javascript,three.js,webgl
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 to multiply a 4x4 Matrix with a vector-array of arbitrary length?

javascript,webgl
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...

Three.js - Cannot use local image for loadTexture

javascript,three.js,webgl
i am trying to use a local image for loadTexture in Three.js but i get the following error: Uncaught SecurityError: Failed to execute 'texImage2D' on 'WebGLRenderingContext': The cross-origin image at .... may not be loaded. I have a java application running on apache tomcat (locally) which serves my image with...

globalcompositeoperation equivalent in webgl

html5-canvas,webgl,glteximage2d,globalcompositeoperation
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 to use framebuffer targets in webgl?

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

How to identify IE11 WebGL compatibility (clearStencil,shaders) correctly

javascript,three.js,webgl,internet-explorer-11,browser-support
In IE11 Version 11.0.9600.16428 and below some WebGL Methods are not working correctly (as mentioned here: https://github.com/mrdoob/three.js/issues/3600) One Example is the method clearStencil. The Problem is that the method exists, but it's not working correctly. I would like to detect that and give the user some feedback. I tried the...

WebGL vs CSS3D for large scatter plot of images

three.js,webgl
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...

is early exit of loops on GPU worth doing?

opengl-es,glsl,webgl,shader,gpu
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...

Atmosphere Scattering for Earth from space and on the ground

three.js,glsl,webgl
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...

sublime text webgl autocomplete

javascript,autocomplete,sublimetext2,webgl,sublimetext
I want to get into WebGL, but the functionnames feel so strange. Is there any way of getting the WebGL functions into sublime text's autocomplete? If not, is there any way to get them into any other editor's autocomplete? Thank you!...

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

opengl,glsl,webgl
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...

mat4 type in attribute shader

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

How to draw 2 nested rectangles using ONLY 4 vertices in the buffer in Webgl?

webgl
I know how to use a uniform variable to move the rectangle around, but I don't know how to make it smaller or bigger to fit one into the other. Any help is appreciated. Thank you! var vertices = [ vec2(0.0, 0.0 ), vec2(0.4, 0), vec2(0, 0.4), vec2(0.4, 0.4) ];...

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

javascript,html5,twitter-bootstrap,canvas,webgl
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"...

Why WebGL slower than Canvas?

javascript,html5,canvas,webgl
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 can we draw 3D bulding structure from existing image Jquery,Css?

jquery,css,three.js,webgl
Please see this site it was made in flash: Can we do it by jquery css? Go here And click on any building marked with "Release" You will see one building on hover animation effect. That i want to develop using jquery and css Or you can suggest for development...

How to blur a transparent texture in a glsl shader?

glsl,webgl
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,...

Depth image webgl

webgl,depth-buffer
I want to draw just the depth image without any color in the following manner: 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?...

Working around WebGL readPixels being slow

optimization,webgl
I'm trying to use WebGL to speed up computations in a simulation of a small quantum circuit, like what the Quantum Computing Playground does. The problem I'm running into is that readPixels takes ~10ms, but I want to call it several times per frame while animating in order to get...

Using clientWidth/clientHeight Javascript with webgl returns problems

javascript,webgl
I am using document.getElementById('myid').clientWidth (.clientHeight for height) to get the width and the height of a div element to set the width and height of a container variable where I want my Webgl graphics to be done. Adding the value to a label for testing I was able to get...

My cubes have disappeared and I don't know why

javascript,html,opengl,webgl
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,...

Fill Phaser TileLayer with Data

html5,html5-canvas,webgl,phaser-framework
With Phaser there is the possibility to to create TileMaps which are pretty neat so I would love to use them. I can generate the required array of tile "data" that you would usually initiate the tilemaps with but since I generate them on the fly I can't use like...

WebGL fragment-shader for multiple light sources?

javascript,webgl
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...

Simplify code by finding a way to remove many if statements

javascript,c++,c,glsl,webgl
I'm having trouble figuring out a good way to structure my code. I am writing a shader in GLSL. I'm using WebGL. So I have a sprite sheet with 22 items. The sheet is 640 X 640. Except for the last each row has 5 sprites. So I used the...

THREEJS Shader Material overwritten

javascript,three.js,textures,webgl,shader
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...

WebGL not rendering may be related to warning

webgl
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...

WebGL solid colors

javascript,coffeescript,glsl,webgl
https://www.dropbox.com/s/4zkhtdv4yaqhpxy/Screenshot%20from%202015-01-28%2010%3A42%3A02%201.png?dl=0 Can someone explain to me, what am I doing wrong? I want every face of the cube to have one solid colour. The code, which creates the cube, is in RunCube.coffee file and the vertices and colour are defined in Cube.coffee file. I think the problem is that I...

three.js webgl custom shader sharing texture with new offset

three.js,webgl,shader,vertex-shader
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...

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

javascript,ios,three.js,webgl,.obj
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...

Animating JSON models without three.js

javascript,three.js,webgl
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?

Volume rendering is more transparent from one direction that another

three.js,glsl,webgl,volume-rendering,raymarching
I'm trying to get my head around volume rendering using three.js and ray marching GLSL. I've got some data I synthesised from a numpy array. The cube of data being rendered is more opaque on one side, graduating to being transparent on the other side - like this (ignore the...

Create a 2D texture from existing textures

three.js,textures,webgl,texture-atlas
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,...

WebGL heightmap using vertex shader, using 32 bits instead of 8 bits

opengl-es,webgl,vertex-shader,heightmap
I'm using the following vertex shader (courtesy http://stemkoski.github.io/Three.js/Shader-Heightmap-Textures.html) to generate terrain from a grayscale height map: uniform sampler2D bumpTexture; uniform float bumpScale; varying float vAmount; varying vec2 vUV; void main() { vUV = uv; vec4 bumpData = texture2D( bumpTexture, uv ); vAmount = bumpData.r; // assuming map is grayscale it...

Can I get a texture onto my second cube?

javascript,webgl,texture-mapping
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;...

Three.js Updating DataTextures with a renderTarget's image data

three.js,webgl,rendertarget
I am working on a motion detection program in Three.js which uses the difference between the current and previous frame. For now, before the subtraction, the current and the previous frame are both blurred using a Three.EffectComposer each. The main problem is: Instead of having to blur the previous frame...

Supporting WebGL on Android 5's WebView

java,android,google-chrome,android-webview,webgl
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...

Webgl throws different error in browsers

javascript,webgl
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....

webgl drawArray intermediate results

javascript,webgl
setMatrixUniforms(); gl.drawArrays(gl.TRIANGLES, 0, triangleVertexPositionBuffer.numItems); Once the matrices are set, (for projection etc) the points passed to drawArrays will be projected accordingly and drawn. I would like to know if there is any way of obtaining the final positions of these transformed points. ...

Matrices and projection in webgl

opengl-es,webgl,projection-matrix
// Upload Projection, ModelView matrices gl.uniformMatrix4fv(shaderProgram.uMVMatrix, false, pMVMatrix); gl.uniformMatrix4fv(shaderProgram.uPMatrix, false, perspM); In the above lines, I understand that the projection matrix and modelview matrix are being uploaded. I would like to know the math behind this. I have some 3d vertices (overlayvertices) which are later passed in this manner: //...

Text Rendering WebGL

javascript,html,textures,webgl
I am trying to give text labels to different elements in a 2D image. The 2d elements are obtained through projection from 3d. I have certain element ids that I want to include as text labels. I have been trying this for 2 days with no luck. I dont know...

Drawing webgl primitives

opengl-es,webgl
I know how to draw squares, rectangles and triangles with WebGL. however, i'm a bit confused on how to draw a circle using triangle_fan. I created an array containing vertices and binded it to a buffer. In the way that I draw triangles etc, i create an array to fill...

How to align text and buttons next to canvas (WebGL + JavaScript + CSS)

javascript,html,css,webgl
I have a webpage with a canvas for implementing graphics rendering, and would like to align some text and buttons to the left of it. My HTML code is as follows: <body onload="webGLStart();"> <canvas id="canvas" style="border: none;" width="800" height="450" align="center"></canvas> <div class="controls"> <h2>Controls</h2> <button class="btn" onclick="initBuffers(1)">Man</button> <br><br>Use the mouse to...

WebGL VBO error in Firefox

javascript,firefox,webgl,vbo
I am using Firefox to render a 3D object in a canvas using WebGL. My code was working previously, whereby a textured object was being displayed within the canvas. However upon revisiting my code, without making any changes, the object will not render and the browser console displays the following...

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

javascript,glsl,webgl,phaser-framework,pixi
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 it possible to use WebGL max texture size?

javascript,browser,textures,webgl
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:...

Is there a bug in WebGL polygonOffset or am I missing something?

javascript,webgl,depth-buffer,zbuffer
I am seeing very odd behavior where polygonOffset initially works, but if I re-render it stops working. I made a simple example to illustrate it. I started with the z-fighting example from Ch7 of the WebGL Programming Guide (https://sites.google.com/site/webglbook/). I then separated out just the rendering portion and wrapped it...

Webgl Distortion in Chrome with three Monitors

google-chrome,firefox,webgl,distortion
I'm developing a webgl application (a simple solar system) and everything looks fine on Chrome and Firefox on ONE monitor But if I start eyefinity (three monitors each full hd + bezel compensation) the solarsystem is distorted in chrome. In Firefox it looks correct and really nice: http://kritten.org/pictures/firefox.jpg In Chrome...

How can I bypass or set up CORS for Unity3D?

.htaccess,cors,webgl
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...

webgl lighting shader working with firefox but not with chrome

google-chrome,firefox,glsl,webgl,shader
I am currently developing a 3D engine using WebGL, and I encountered a problem with the lighting shader. I am using an array of structure in order to pass the light parameters to the vertex and fragment shaders (with the same array passed as "uniform"). It actualy works very well...

WebGL rectangle borders

canvas,html5-canvas,webgl
I'm trying to render a transparent rectangle with a solid border using WebGL. I know how to make it transparent by setting the alpha to zero in webGL's uniformfv() function but I can't figure out how to render a solid border and didn't find anything online that was helpful. Please...

handle large arrays/textures in fragment shader

arrays,opengl-es,three.js,webgl,texture2d
I am trying to pass a large amount of information to my fragment shader but I always reach a limit (too many textures binded, texture too large, etc., array too large, etc.). I use a ThreeJS custom shader. I have a 256*256*256 rgba volume that I want to pass to...

Can I load a shader into My JavaScript code from an external text file?

webgl,shader,fragment-shader,vertex-shader
I learn WebGL. I see the tutorial has the code of shaders inside of JavaScript code as a usual string. For example: var VSHADER_SOURCE = 'void main(){\n' + ' gl_Position = vec4(0.0, 0.0, 0.0, 1.0);\n' + ' gl_PointSize = 10.0;\n' + '}\n'; I want to place the code of my...

A Professional User Interface for Javascript

javascript,jquery,user-interface,webgl
I need a user interface for my application in JavaScript. I need to be able to toggle all layers and also click on each object to zoom to that object. I saw the following example and I need this or something similar to this. https://human.biodigital.com/index.html However, I could not extract...

Unbinding a WebGL buffer, worth it?

performance,buffer,webgl
In various sources I've seen recommendations for 'unbinding' buffers after use, i.e. setting it to null. I'm curious if there is really a need for this. e.g. var buffer = gl.createBuffer(); gl.bindBuffer(gl.ARRAY_BUFFER, buffer); // ... buffer related operations ... gl.bindBuffer(gl.ARRAY_BUFFER, null); // unbinding One the one hand, it's likely better...

WebGl scanner effect

javascript,three.js,webgl,shader
Hey I have just seen this short video: https://vine.co/v/hxHz5H2Q07q and I am wondering how to achieve this scanning effect. For start there are 2 groups needed: one holding cubes with material and a corresponding one with the same cubes but just wireframed, so it is possible to get these layers....

WebGL iOS render to floating point texture

javascript,ios,opengl-es,webgl
I'm trying to get rendering to a floating point texture working in WebGL on iOS Safari (not in a native app). I have managed to get iOS to read a manually (e.g. from JavaScript) created floating point texture, however when I create a framebuffer of floating point type and use...

Shaders in WebGL vs openGL? [closed]

opengl,glsl,webgl
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?

Every way to get textures, WebGL

javascript,2d,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....

Implementing a 32-bit heightmap vertex shader in threejs

opengl-es,webgl,vertex-shader,heightmap
I am attempting to repurpose the heightmap shader example found here into one that will work with 32-bits of precision instead of 8. The work-in-progress code is on github: https://github.com/bgourlie/three_heightmap The height map is being generated in .NET. The heights are within 0f...200f and converted into a 32-bit color value...

Retrieve Vertices Data in THREE.js

three.js,textures,webgl,shader,vertex-shader
I'm creating a mesh with a custom shader. Within the vertex shader I'm modifying the original position of the geometry vertices. Then I need to access to this new vertices position from outside the shader, how can I accomplish this?

Why it is necessary to set precision for the fragment shader?

opengl-es,webgl,shader,precision
I learn WebGL. Next shaders work fine: // vertex.shader // precision mediump float; attribute vec4 a_Position; attribute float a_PointSize; void main(){ gl_Position = a_Position; gl_PointSize = a_PointSize; } and // fragment.shader precision mediump float; uniform vec4 u_FragColor; void main(){ gl_FragColor = u_FragColor; } Why it is necessary to set precission...

Clipping images in Webgl

html5-canvas,webgl,image-clipping
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

javascript,webgl
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...

Webgl 1 bit per pixel texture

opengl-es,webgl
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,...

JS Canvas get pixel value very frequently

javascript,canvas,webgl,pixi
I am creating a video game based on Node.js/WebGL/Canvas/PIXI.js. In this game, blocks have a generic size: they can be circles, polygons, or everything. So, my physical engine needs to know where exactly the things are, what pixels are walls and what pixels are not. Since I think PIXI don't...

Trying to understand the math behind the perspective matrix in WebGL

math,matrix,opengl-es,webgl,perspectivecamera
All matrix libraries for WebGL have some sort of perspective function that you call to get the perspective matrix for the scene. For example, the perspective method within the mat4.js file that's part of gl-matrix is coded as such: mat4.perspective = function (out, fovy, aspect, near, far) { var f...

Multiple WebGL models on the same page

graphics,three.js,webgl
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...

Programmatically generate texture for WebGL in JavaScript

javascript,opengl-es,textures,webgl
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: How to get colour in fragment shader to change over time?

webgl
I'm rather new with webgl: I was wondering how I would go about configuring / setting up the fragment shader so that it would change the colour based on how much time has currently passed.

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

javascript,webgl,shader,shadow
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...

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

google-chrome,gwt,libgdx,html5-canvas,webgl
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...

What version of GLSL does WebGL use

glsl,webgl
Is this a per device sort of thing? Or is it based on the browser? Sorry for such a basic question but I cant seem to find a straight answer.

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

webgl,opengl-es-2.0,glfw,emscripten
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) {...

getShaderPrecisionFormat return values

webgl,opengl-es-2.0
I'm confused about the method getShaderPrecisionFormat, what it's used for, and what it's telling me because for me it always returns the exact same precision for all arguments, only differences are between INT / FLOAT. to be clear: calls with gl.FRAGMENT_SHADER and gl.VERTEX_SHADER in combinations with gl.LOW_FLOAT, gl.MEDIUM_FLOAT and gl.HIGH_FLOAT...

WebGL: INVALID_OPERATION: vertexAttribPointer: stride or offset not valid for type

opengl-es,webgl,opengl-es-2.0
I learn WebGL. I get some errors, when I try to draw three points, when each of this has own location, size and color. I try to do it through the same buffer. // To draw three points. Each of this has own location, size and color. function start(gl){ if(!initShaders(gl,...

Threejs: PointCloudMaterial size compared to ShaderMaterial gl_PointSize with size attenuation

three.js,webgl,vertex-shader
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...

PHP detect browser can use webgl

php,browser,webgl
Does anyone know how to check in php if a browser has webgl or not and display a true or false value? I know if I use: $_SERVER['HTTP_USER_AGENT'] . "\n\n"; $browser = get_browser(null, true); print_r($browser); http://php.net/manual/en/function.get-browser.php displays all the attributes/features of a browser, but does it do webgl? Please advise....

Hide faces with GLSL shader

opengl-es,three.js,glsl,webgl
I'm trying to wright a shader to work with three.js. Which is a javascript library for WebGL. I just started reading up on GLSL so there are some thing i'm having trouble with. Basically I want reveal and hide faces of a geometry. I have cloned my geometry's face array...

Three.JS MeshDepthMaterial, depth map not uniformly distributed

three.js,rendering,webgl,depth
So I'm trying to render the depth map of a scene using three.js An example can be found here: http://threejs.org/docs/#Reference/Materials/MeshDepthMaterial The depth map looks good when the scene is setup carefully, for example: camera.position.z = 30; camera.near = 0.1; camera.far = 50; object.position.z = 0; However, if the camera is...

Simple ways to create content-rich 3D WebPage/WebApp

web,3d,webgl
I want to create a an interactive 3D based web page/application wherein, I can draw simple 3D shapes, shadows, custom 3D models (say .ply, .obj). I want this page to contain rich 3D content and should support both MAC and Windows. I am new to web development and very naive...

WebGL - cannot reader property createShader of null

javascript,null,webgl
I am following a book called professional WebGL, I am hand writing stuff making sure of my understanding, I have this code: <!DOCTYPE HTML> <html lang="en"> <head> <title>2-1 A first WebGL example</title> <meta charset="utf-8"> <script id="shader-vs" type="x-shader/x-vertex"> attribute vec3 aVertexPosition; void main() { gl_Position = vec4(aVertexPosition, 1.0); } </script> <script...

Can not render image from S3 bucket in WebGL

javascript,amazon-s3,cors,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...

Change the number of MSAA smaples

webgl
I can get the number of MSAA samples like this: gl.getParameter(gl.SAMPLES); Is it possible to change the number of samples, either in JavaScript or in browser settings?...

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

arrays,indexing,glsl,webgl
Are there ONLY constants allowed or can I use for loop indices or any other dynamic values ?

JavaScript Image only loads on refresh

javascript,html5,html5-canvas,webgl
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...

How much data does texImage2D in WebGL need?

javascript,three.js,webgl
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 EaselJS sprite animation with SpriteStage (WebGL)

javascript,animation,webgl,sprite,easeljs
I have this sprite animation in EaselJS created with the classic Stage, here is the fiddle: Fiddle: http://jsfiddle.net/6sygocvb/ EaselJS now has SpriteStage, which translates to WebGL and falls back to canvas if needed. How do I create the example above with SpriteStage? Can you guys help me with a fiddle?...

How can I delete a stl file from my scene?

three.js,webgl,stl-format
I need to load some stl files when clicking on a button, the problem is that every time I click on this button a new stl is loaded OVER the previous one. How can I clean my scene before loading the next file? Thank you! This is my function that...

How to auto focus camera on a point in three.js?

javascript,three.js,webgl
I want to know is there any built-in feature for auto focus a camera into a point in three.js so that the rest of the environment became relatively blur like something we have in these examples ? http://alteredqualia.com/xg/examples/animation_physics_level.html http://alteredqualia.com/xg/examples/animation_physics_ammo.html The code in XG library that enabled auto focus, is something...

Using a loaded image in a webgl texture

javascript,webgl
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...