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

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 ...
1
vote
2answers
562 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 ...
0
votes
0answers
245 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
2answers
117 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
745 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
238 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 ...
1
vote
1answer
306 views

WebGL immediate mode

I know that WebGL is based on OpenGL ES 2.0 and that glBegin and glEnd have been removed and replaced with vertex buffer objects. I understand that VBOs are faster and use less code but is there a ...
1
vote
1answer
427 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
0answers
80 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 ...
4
votes
2answers
866 views

blending with the foreground but not the background

I want to draw some very-semi-transparent objects on top of my scene and have them blend nicely with the other pixels in the scene, but not blend with the background; if I draw a semi-transparent ...
1
vote
1answer
3k 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.
3
votes
2answers
2k views

scaling point sprites with distance

How can you scale a point sprite by its distance from the camera? GLSL fragment shader: gl_PointSize = size / gl_Position.w; seems along the right tracks; for any given scene all sprites seem nicely ...
1
vote
0answers
143 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, ...
3
votes
1answer
1k views

Proper way to maintain Vertex Buffer Objects

I've started learning WebGL, currently I'm building a 2D lighting system, but there is some confusion going on inside my head. How the lighting works is based on this tutorial ...
1
vote
3answers
626 views

Can Simple Direct Media Layer be used with WebGL?

I have read that on desktop OpenGL + SDL is a great way to learn. In looking at WebGL I couldn't find a Web version of SDL. On their site I see bindings for all sorts of languages, but no JavaScript. ...
4
votes
3answers
1k views

why is it faster to draw lots of small arrays than one big array?

This application on-line here has interesting performance characteristics: Sorting the rectangles to be drawn so it keeps having to change colour is faster than sorting the rectangles by their colour ...
2
votes
1answer
370 views

mat3x4 in webGL shaders

I am porting the IQM bone animation format to Javascript and have run into a problem... The vertex shader is failing to compile and the only error message I get out is 'mat3x4' : syntax error on the ...
-4
votes
2answers
210 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 ...
1
vote
0answers
539 views

shader-based particle systems [closed]

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 ...
-5
votes
1answer
742 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?
0
votes
1answer
375 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 ...
1
vote
1answer
519 views

WebGL: Texture appears as black

I have a simple WebGL canvas, where I'm attempting to render a texture on a square. When working with textures as local files, all is fine. But when I try to load a texture from the web, I get a black ...
5
votes
1answer
1k views

What's the difference between Canvas and WebGL?

I'm thinking about using CAAT as a part of a HTML5 game engine. One of it's features is the ability to render to Canvas and WebGL without changing anything in the client code. That is a good thing, ...
2
votes
2answers
5k views

Rotate sphere in Javascript / three.js while moving along x/z plane

I have a sphere/ball in three.js which I want to "roll" around on the x/z plane. For the z axis I could simply do this no matter what the current x and y rotation is: sphere.roll_z = ...
4
votes
3answers
3k views

List of 3D libraries based on WebGL [closed]

Is there a up-to-date list of WebGL libraries or articals with comparison? Until now I heard only three.js and GLGE.
-1
votes
4answers
3k views

How can I use WebGL to create a tile-based multi-layer scrolling platform game?

I've found WebGL (based on OpenGL) to be a fiendish and unforgiving framework for those learning to write HTML5-based games. Despite the presence of many examples on how to get started, I'm really ...
0
votes
0answers
32 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 ...
0
votes
1answer
1k 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, ...
6
votes
1answer
3k views

GLSL pack floats into an RGBA texture

I want to compose conventional triangle-based models and particles with a ray-traced scene at a reasonable frame-rate. webGL does not let you write the gl_FragDepth in the fragment shader. You ...
1
vote
2answers
350 views

What kind of physics to choose for our arcade 3D MMO?

We're creating an action MMO using Three.js (WebGL) with an arcadish feel, and implementing physics for it has been a pain in the butt. Our game has a terrain where the character will walk on, and in ...
2
votes
2answers
1k views

How to rotate an object so it stands correctly (back always facing the camera)

I have the following scene: And I have two 3D vectors, the camera position, and the focus position. The focus vector is always behind the monster. I know how to rotate the camera around the focus ...
1
vote
2answers
565 views

How is JS source protected in Chrome games?

I was playing a space arcade shooter https://moonbreakers.com/ and tried to see some of the JS and shader code. However, I was unable to find anything but some server communication code. Game code is ...
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.
1
vote
1answer
700 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 ...
4
votes
2answers
2k views

How to animate a model in WebGL?

I created a human model in Blender, exported the vertices and indices into a JSON file and render the model in a browser using WebGL. Now I created a walk and jump animation in Blender and would like ...
2
votes
2answers
1k views

Why is my quaternion camera rotating around strange axes?

I can't get it to work for the life of me. Its rotating the camera in the global coordinate system, or some other random coordinate system, not the camera local coordinate system. WASDEC work ...
3
votes
2answers
536 views

What is UVIndex and how do I use it on OpenGL?

I am a noob in OpenGL ES 2.0 (for WebGL) and I'm trying to draw a simple model I've made with a 3D tool and exported to .fbx format. I've been able to draw some models that only have: A vertex buffer, ...
15
votes
3answers
5k views

Is there a way to use an arbitrary number of lights in a fragment shader?

Is there a way to pass an arbitrary number of light locations (and colors) for the fragment shader, and loop over them in the shader? If not, then how are multiple lights supposed to be simulated? ...
1
vote
1answer
169 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 ...
3
votes
2answers
488 views

Is there any reason for doing back face culling in software?

I, a newbie, have been doing back face culling in javascript for my WebGL app because I didn't know gl.cullFace() existed. Is there any reason to use software-based culling instead of just passing all ...
3
votes
2answers
639 views

WebGL geometry calculations

I have a dynamic surface in WebGL, that is animated in vertex shader. I want other objects to interact with this surface (for example, an object riding on dynamic terrain). What's the best way to do ...
0
votes
1answer
219 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 ...
6
votes
1answer
1k views

How do I create a blob shadow under a character?

I have a webgl based 2.5D platformer game, and I would like to add a simple blob shadow under the character to help the player with the platforming. How is this normally done? As you can see below, ...
7
votes
2answers
3k views

Why must the transpose value of glUniformMatrix4fv in webgl/OpenGL ES be false?

Why must the transpose value of glUniformMatrix4fv in webgl/OpenGL ES be false? The OpenGL ES spec says that the transpose value must be false or an INVALID_VALUE is generated. Why then have the ...
3
votes
2answers
2k views

Disable V-sync in WebGL?

Normally my app runs at 60 fps, But when I add some simple models it decreases to 40fps. I think v-sync on, which is might be causing it to run slower. Is there any way to disable v-sync in WebGL? ...
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
252 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?
0
votes
3answers
2k 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 ...
2
votes
1answer
661 views

What are the texture coordinates for a tetrahedron

EDIT This is the WebGL code for initializing the tetrahedron points. You may want to skip to the second code block, because you may be able to answer without this. //Making a tetrahedron with ...
3
votes
1answer
2k views

Unity3d or WebGL: Where should I go?

I am interested in making a simple 3D game this summer, and I'd prefer if it were playable in a browser. My choices I am considering are Unity and WebGL. Currently I have no experience in either. But ...