WebGL is a Javascript API for rendering interactive 3D / 2D graphics on the HTML5 canvas element. It is based on OpenGL ES 2.0.

learn more… | top users | synonyms

1
vote
1answer
76 views

UV Texture coordinates out of [0,1] (WebGL)

I'm creating a 3D game with WebGL and i'm using Wavefront Objects as a base model format. I recently found some models, their texture coordinates of which are out of the typical [0,1] range and i ...
1
vote
1answer
178 views

How to draw many identical quads in WebGL efficiently?

I have recently been trying to develop a more basic one of those 'falling sand'/'powder game' style games (See here) the past few months, and after prototyping on a plain canvas, then trying PIXI.js, ...
1
vote
2answers
259 views

Ward model implementation: specular component too weak

I'm trying to implement the Ward shading model, the anisotropic, computationally efficient version: This is how I made it: float alphaX=0.5, alphaY=0.5; // asinotropic roughness float ...
1
vote
1answer
270 views

How to manage frustum culling

I have a spherical clipmap based planet terrain. The entire planet is made from a ring geometry of 1 unit which the vertex shader moves to cover the entire planet of 6 million unit radius. But the ...
1
vote
1answer
605 views

Problem when animating MD5 model (GPU Skinning)

I'm trying to implement a GPU skinning version of the md5mesh.js by @tojiro (demo with CPU skinning) in WebGL (live demo of the project here, use WASD to move the camera around). The main concept is ...
1
vote
1answer
165 views

How do I draw a multi-object mesh at once?

This is a very elementary question. At the moment I am drawing lots of faces separately by setting a location uniform separately for each one of them. This is very slow. As I understand it, the ...
1
vote
1answer
1k views

WebGL rendering performance and frustum culling

When I render five boxes in WebGL with one texture for all of them, the app runs at 60 FPS, nice. But when I render 70 boxes the performance decreases to ~40fps... but only 5 of the boxes are visible. ...
1
vote
1answer
228 views

Can you have shader variables that vary per primitive?

A shader normally has values that vary per-vertex and values that vary per-fragment. Can you have values that vary only per primitive, such as per-triangle or per-quad?
1
vote
1answer
125 views

Omni-directional light shadow mapping with cubemaps in WebGL

First of all I must say, that I have read a lot of posts describing an usage of cubemaps, but I'm still confused about how to use them. My goal is to achieve a simple omni-directional (point) light ...
1
vote
0answers
85 views

Adding rivers to procedural generated terrain [closed]

I have an heightmap generated using libnoise (c++). I am loading it from the babylon.js framework (3dWebGL). I have my heightmap image file and also a river position image file, also generated using ...
1
vote
0answers
97 views

How can I reduce draw calls when using glBufferSubData and DYNAMIC_DRAW?

At first I had the problem where I had about 150 rectangles rendered every tick. I only used STATIC_DRAW and glBufferData. I added support for DYNAMIC_DRAW and glBufferSubData and now I have a very ...
1
vote
1answer
107 views

Custom lookAt function goes wild

I have written a custom lookAt function based on a lot of posts from all over the net, and it works very nice... except when a rotation (which is stored in a quaternion) crosses some 'threshold'. ...
1
vote
1answer
193 views

How can I restrict the rotation of an object to a subset of axes using quaternions?

I've got a question about quaternions in my WebGL application. How can I rotate an object only around two axes? For example, how can I exclude/nullify rotation about the Y axis? The problem is that ...
1
vote
0answers
70 views

Textures occasionally rendering twice on a particular face [closed]

I am learning how to render 3D objects using webgl (no third-party libraries). I am currently facing a very confusing situation however, where my textures are rendering apparently twice over a ...
1
vote
0answers
103 views

Is there an out-of-the-box way to create a custom non-convex polygon in three.js?

Does Three.js offer an out-of-the-box way to create custom non-convex polygon, or do I have to use THREE.Geometry and set faces manually? I'm guessing that ShapeGeometry has something to do with this, ...
1
vote
0answers
430 views

shader-based particle systems

I have a classic particle system where each particle is represented by a quad and, each time step, I move each particle. My target is webGL which means I don't have instancing, attribute divisors nor ...
0
votes
2answers
5k views

Best physics engine for OpenGL ES (different implementations)? [closed]

Can you recommend a good physics engine which is easily portable between WebGL and other OpenGL ES implementations like in Android and iPhone? I don't want a game engine. Only the physics part.
0
votes
1answer
117 views

Why are some of my normals facing away from the camera?

I'm trying to use WebGL to render some simple models, and I'm running into issues where pixels near the edge of my model are passing normals to my fragment shader that point away from the camera. This ...
0
votes
2answers
84 views

Need to know the origin and coordinates for 2d texture and 2d/3d vertices in webgl

Long story short, I know my coordinates are off and I believe my indices might be off. I'm trying to render a simple 2d rectangle with a texture in webgl here's the code I have for the vbo/ibo: ...
0
votes
1answer
974 views

How to draw a circle with WebGL using GL_POINTS [closed]

I'm trying to draw a circle using simple vertices points and a big gl_PointSize value. I found this example and try to reproduce it on WebGL with no success.
0
votes
1answer
195 views

3d immersive Virtual Conference meeting environment development on the web (3d website)-Help required [closed]

I want to develop 3d immersive virtual collaborative conference meeting environment on the web i.e an immersive virtual environment for our university Teachers to attend and address conference ...
0
votes
1answer
230 views

Is HTML5/WebGL performance unreliable on low-end Android tablets and phones?

I've developed a couple of WebGL games, and am trying them out on Android. I found that they run very slowly on my tablet, however. For example, a game with 10 sprites or so runs as 5fps. I tried ...
0
votes
1answer
46 views

bug in webgl phong shader: lighting rotates with object

I'm working on a simple phong shader in webgl, and I think I'm getting close but something is still wrong. Dead give away: if I have a billboard and have it roll (so it spins like a wheel), the part ...
0
votes
1answer
92 views

Strange quaternion camera streching in WebGL

So after a lot of researching about quaternions I almost got the quaternion camera working. Almost, cause it rotates in a proper way only in a vertical axis. Other rotations stretches and deforms the ...
0
votes
1answer
91 views

(WebGL) Point light per-fragment issue

I'm using an FPS-like camera, this is the code: CAMERA mat4.identity(mat.mvMatrix); mat4.rotate(mat.mvMatrix,degToRad(-camera.pitch),[1,0,0]); ...
0
votes
1answer
230 views

First person camera world matrix issue (in THREE.js and webGL)

I'm trying to create a Portal-like effect in webGL using THREE.js. I have two scenes connected by a pair of portals. The view of the 2nd scene in rendered inside the 1st portal using stencils and ...
0
votes
1answer
61 views

How would one outline an alpha transparency layer in javscript and/or php? [duplicate]

I simply want an outline/edge detection of the character/item/object that is selected or doing something. I'm seeing lots of versions of this question for different languages, but I would appreciate ...
0
votes
1answer
277 views

best way of rendering more 3D models in three.js that not slow down page?

I am in the way of creating a 3D web game using threeJS library. This is a multi-player game that players are 3D human models in game, and I need to add a human 3D model for each player that enters ...
0
votes
1answer
932 views

How can I implement 3D textures using webgl?

I went through the google I/O video but did not get exactly how to do it. If somebody could point me to a simple 3D texture implementation using webgl, it would be helpful. i basically have a volume, ...
0
votes
3answers
1k views

How do I create menu with text in OpenGL?

How would I go about creating a menu system with fonts in OpenGL? I want to make a dungeon crawler and will need a menu for inventory and stats for the weapons. I can draw a world made out of blocks ...
0
votes
0answers
33 views

Web-Based Traffic Simulation based on Discrete Event SImulation + AI

I'm working on the application of 2D web-based traffic simulation. I am looking for a library that is suitable for my application. I'm making an application based on discrete event simulation, each ...
0
votes
1answer
57 views

One draw call with one big mesh VS many draw calls with many little meshes

I have read that in order to optimize WebGL application, one should reduce an amount of draw calls. But does it mean that computing a one big mesh from all single meshes on CPU by modifying vertices ...
0
votes
1answer
75 views

WebGL wrong scaling of rectangle

I'm working with this tutorial http://www.html5rocks.com/en/tutorials/webgl/webgl_transforms/ and my result is, that the rectangle moves in the direction of it's scaling values, and also scales at ...
0
votes
0answers
43 views

Is it possible or not to share a geometry among many meshes and applied a different shaderMaterial for each?

I instanciate one PlaneGeometry, then I instanciate 200 meshes sharing this geometry and with their own instance of a given shaderMaterial. Here is a simplified version of the code : ... var geom = ...
0
votes
0answers
31 views

Strauss model : no specular component [duplicate]

I implemented the Strauss model with the metalness, transparency and smoothness parameters, taking the formulas from the book "Programming vertex geometry and pixel shaders", this is how I implemented ...
0
votes
0answers
99 views

How can I compute spotlight attenuation when I only have a spotlight cutoff angle?

I am trying to compute the spot light attenuation, though I don't have a spotCosCutoff (cosine of the spotlight cutoff angle) predefined variable in the shader so I have to compute it myself. This is ...
0
votes
1answer
309 views

Having a problem with texturing vertices in WebGL, think parameters are off in the image?

I'm having a problem texturing a simple rectangle in my WebGL program, I have the parameters set as follows: gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, textureImage); I'm ...
0
votes
1answer
160 views

WebGL CORS error loading simple texture in Chrome

Here's my code: function loadTexture() { textureImage = new Image(); textureImage.onload = function() { setupTexture(); } textureImage.src = "jumper2.png"; } function ...
0
votes
0answers
31 views

How do i draw a volume cube and fill it up with a 3D texture in webgl? [duplicate]

Possible Duplicate: How can I implement 3D textures using webgl? I have a set of (x-y) images of the cross-section of an object varying along the z-dimension. From that i have to construct ...
-2
votes
1answer
57 views

List of GLSL ES built-in variables

I am writing an article on WebGL and three.js, I'm trying to search all the built-in variables available in the vertex and fragment shader. I've found many sites mentioning some, for example: ...
-4
votes
2answers
197 views

enemy shooting towards FPS [closed]

WELL first of all I want you to see my game (its deployed on heroku cloud) : http://still-escarpment-3701.herokuapp.com (It takes almost 10 sec to load so please wait for couple of sec) I have ...
-5
votes
1answer
509 views

How can I create a WebGL camera based on quaternions?

I am trying to create a WebGL camera based on quaternions. I looked at many tutorials, and none is as simple as it could be or it was not working. How can I create such a camera?