Questions tagged [webgl]

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

Filter by
Sorted by
Tagged with
29
votes
10answers
13k views

Browser-based MMOs (WebGL, WebSocket) [closed]

Do you think it is technically possible to write a fully-fledged 3D MMO client with Browser JavaScript - WebGL for graphics, and WebSocket for Networking? Do you think future MMOs (and games ...
19
votes
3answers
10k 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? ...
16
votes
2answers
5k views

How can I simulate a limited (256) color palette in OpenGL?

On Twitter, I found this screenshot of a game in development: The image on top seems to be without any color limitation. But the two other pictures at the bottom have a 256 color palette. I want ...
12
votes
4answers
2k views

Difference between “buffer” and “array” in OpenGL?

When I read doc on webGL or OpenGL there can be seen some patterns in how names of functions and objects are used. But I can't understand the difference between buffer object and an array. There are ...
11
votes
2answers
5k views

How can I tell a fragment shader to not write a particular pixel?

In a WebGL I'd like to send a screen space quad through that gets processed by a fragment shader, but have the fragment shader only write out a pixel under certain conditions (say... that it was ...
10
votes
4answers
2k views

Missing features from WebGL and OpenGL ES

I've started using WebGL and am pleased with how easy it is to leverage my OpenGL (and by extension OpenGL ES) experience. However, my understanding is as follows: OpenGL ES is a subset of OpenGL ...
10
votes
2answers
6k 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 ...
10
votes
3answers
6k views

How to implement mouselook in the browser?

I am currently creating a 3D first-person shooter game in the browser using WebGL. How would I implement mouselook/free look for such a game?
10
votes
3answers
656 views

How to hide a post-processed mesh outline when/where the mesh is hidden

I'm working on setting up an active outline in my 3d engine, a highlight effect for selected 3d characters or scenery in the screen. After working with the stencil buffer and getting some ...
9
votes
4answers
8k views

Can't understand these UV texture coordinates (range is NOT 0.0 to 1.0)

I am trying to draw a simple 3D object generated by Google SketchUp 8 Pro onto my WebGL app, the model is a simple cylinder. I opened the exported file and copied the vertices positions, indices, ...
8
votes
3answers
993 views

Noisy edges, smoothing out edges between faces via fragment shader

I have a generated terrain, with hexagonal geometry, as per screenshot below: I then generate biomes, but as you can see the borders between them are really ugly and straight. To hide that hexagonal ...
8
votes
1answer
6k 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...
7
votes
1answer
506 views

Should the Oj lobe of a Lafortune shader cause the light to be displaced?

I implemented the Lafortune shader in WebGL, and my biggest concern is about this formula: Explanation Kd/Ks is the material diffuse/specular color, ρd/ρs is the light diffuse/specular component, ...
6
votes
1answer
2k 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, ...
6
votes
2answers
4k views

Rendering 2d sprites into a 3d world?

In opengl how do I render 2d sprites in opengl given that I have a png of the sprite? See images as an example of the effect I'd like to achieve. Also I would like to overlay weapons on the screen ...
6
votes
1answer
5k 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, ...
6
votes
2answers
3k 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 ...
6
votes
2answers
6k 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 ...
6
votes
2answers
2k views

Low quality bilinear sampling in WebGL/OpenGL/DirectX

I'm seeing low quality bilinear texture sampling in WebGL, OpenGL and Directx, and was wondering if anyone knew how to make it higher quality? The picture below should help show what I mean. The ...
5
votes
3answers
4k 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.
5
votes
2answers
2k 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 ...
5
votes
1answer
4k views

How to create a perspective field of view matrix?

Hey, hello. I am learning a little of WebGL (OpenGL ES 2.0) through the http://learningwebgl.com tutorials, but it uses a third party library to create the View, Projection and transformation matrices ...
5
votes
3answers
6k views

How do I load Collada models into a WebGL app? [closed]

I have written some simple apps following the tutorials on http://learningwebgl.com. What is the simplest way to load and display Collada model files, particularly the files available from Google 3D ...
5
votes
0answers
161 views

Virtual infinite plane in shadow map

I have a WebGL deferred rendering pipeline, where I'm rendering shadow map with VSM technique. The goal is that the scene, or model, is hovering in space, and in addition to casting shadow on itself, ...
4
votes
3answers
2k 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 ...
4
votes
3answers
3k 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
2answers
4k 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? ...
4
votes
1answer
1k views

How can I render a single object that uses multiple textures?

I'm looking for a technique to render an object with multiple texture sources. One texture is static, the other is generated dynamically (it's a render target). For example, say I was rendering a TV. ...
4
votes
1answer
6k views

(Three.js) - What object3D properties are required to make rayCaster.intersectObjects() work?

FYI, i am trying to do something almost identical to the following: Merging geometry/mesh without losing benefits I essentially have a list of Three.object3D's. These objects are "merged" together ...
4
votes
1answer
2k 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 ...
4
votes
2answers
4k 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 ...
4
votes
1answer
134 views

Timers and performance for mobile JS

I'm using the Three.js JavaScript library to do some things in WebGL, and I wonder how the graphic aspects of timers are done on mobile. I was creating numbers with geometries and just replacing them ...
4
votes
2answers
922 views

how to use unity3d webgl content in a asp.net mvc view?

I asked this question in stackoverflow but no answers so I think it would fit here better. I have a unity webgl project and an asp.net mvc project. I need to show the webgl content in a view. The ...
4
votes
0answers
983 views

LibGDX's HTML project doesn't show anything in Browser

The question is self explanatory, when I run my demo-html project as a Web Application and I open Chrome with the provided link by eclipse, my browser doesn't show the image it is supposed to show in ...
4
votes
2answers
1k views

Confused about Max Vertex Uniform Vector limit

While coding my WebGL app I've encountered an interesting phenomena: On my first PC (with GPU Radeon HD 5850), BrowserLeaks (link) tells me that in my browser - Google Chrome Version 36.0.1985.143m ...
3
votes
2answers
671 views

Loading chunks of the terrain relative to the player's position

I'm making a small voxel-based multiplayer WebGL game with a Node.JS server which handles player positions and sends terrain chunk data to the clients. This is an example of how I'm currently sending ...
3
votes
1answer
666 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 ...
3
votes
2answers
782 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, ...
3
votes
1answer
3k 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 ...
3
votes
2answers
673 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
1answer
1k 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. ...
3
votes
1answer
4k views

lookAt with orthographic camera (gl-matrix)

Technically this is a webgl question though I think it's generic enough to get some opengl, erm, perspective on it too... If I setup an orthographic camera (perspective matrix) like this: ...
3
votes
2answers
495 views

10% idle time in WebGL

I'm using requestAnimationFrame to handle my frame rate in a WebGL game, and running through the Chrome profile shows that a solid 10% of the time is spent in ...
3
votes
1answer
3k 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 http://archive.gamedev....
3
votes
2answers
919 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 ...
3
votes
2answers
574 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?
3
votes
1answer
173 views

GLSL ES 2.0 alternative for dFdxFine

I'm trying to generate normal map on the fly in fragment shader. The implementation I've found is using dFdxFine function, which can't be used in WebGL, is there any alternative for dFdxFine in GLSL ...
3
votes
1answer
460 views

How to implement user friendly screen panning on 3D HTML canvas for RTS game

How can I get RTS map panning like how it was done in C&C red alert (with the mouse at the edge of the screen moves the screen in that direction) with a Babylon.js RTS game in the html canvas? ...
3
votes
1answer
5k views

Orthographic Camera and Raycasting in Three.js

I'm working on a test project porting a simple game from iOS to Javascript. I've got the orthographic camera working and it can view the objects in the scene and move up and down the tower of meshes ...
3
votes
1answer
782 views

GPU skinning algorithm incorrectly distorts mesh

I've been trying to implement a GPU-based matrix palette skinning algorithm with WebGL, but the rendering appears incorrect even though I can't find evident conceptual problems in the underlying ...