WebGL

问题 I'm trying to download 16-bit image data from a server and push it into a WebGL texture without browser plug-ins. texImage2d will work with: ImageData, HTMLImageElement, HTMLCanvasElement, or HTMLVideoElement. I'm looking for some javascript (a library or code sample) which can decode 16-bit TIFF or similar (hdf5, etc.) image data into one of these object types. I have no problem doing this is 8-bit per channel RGB by using an to load a PNG but this doesn't work with 16-bit per channel data

问题 I found Famo.us and it seemed pretty exciting but their docs are closed. I am very curios about WebGL so I started looking for alternatives. I found Three.js and Clara.io. How do they differ from famo.us? What is the main objective of each framework? Thanks. Edit : Rephrased. 回答1: Three.js is a lightweight javascript library to create 3D visualisations (using WebGL, SVG, Canvas or another renderer). Clara.io is an online 3D modelling tool using WebGL. Famo.us is a javascript rendering engine

问题 I have a vertex shader that accepts the following attributes: a_posCoord : vertex position a_texCoord : texture coordinate (passed to the fragment shader) a_alpha : transparency factor (passed to the fragment shader) The objects I'm rendering are all "billboards" (a pair of right triangles to make a rectangle). I'm using a single call to glDrawArrays to render many billboards, each which may have a unique alpha value. A single billboard has 6 vertices. Here's some pseudocode to illustrate how

问题 In OpenGL you can draw define points like this: glBegin(GL_POINTS); for(float theta=0, radius=60.0; radius>1.0; theta+=0.1, radius-=0.3){ glColor3f(radius/60.0,0.3,1-(radius/60.0)); glVertex2i(200+radius*cos(theta),200+radius*sin(theta)); } glEnd(); How do you accomplish this same functionality in WebGL? 回答1: The code you wrote really doesn't do much except define some points. To do that in WebGL could do it like this var colors = []; var verts = []; var theta=0 for(var radius=60.0; radius>1

问题 I want to use WebGL to make a little 3D gallery of Flickr photo streams. It looks like WebGL only allows square images that's dimensions are a power of two to be used as textures. I need to be able to display images of any proportion and dimension. I can see that if I copy the image data into another image that is the nearest square dimension and then use texture coordinates to make it display right. The problem is, and correct me if I am wrong, that I can't do that image manipulation in

问题 I have managed to isolate the problem in this code: var gl; _main_web = function() { gl = document.getElementById("canvas").getContext("experimental-webgl"); gl = WebGLDebugUtils.makeDebugContext(gl, function (err, funcName, args) { throw(WebGLDebugUtils.glEnumToString(err) + " was caused by call to " + funcName); } ); vert_shader = gl.createShader(gl.VERTEX_SHADER); gl.shaderSource(vert_shader,"attribute vec4 vertex;attribute vec2 uv; void main(void) {gl_Position = vertex;}\n"); gl

问题 I would like to create an export as OBJ or STL link for a parametric Three.js mesh object. Just like the export option on http://www.3dtin.com Any advice would be appreciated. 回答1: To get mesh in .obj format I use this simple function: THREE.saveGeometryToObj = function (geometry) { var s = ''; for (i = 0; i < geometry.vertices.length; i++) { s+= 'v '+(geometry.vertices[i].x) + ' ' + geometry.vertices[i].y + ' '+ geometry.vertices[i].z + '\n'; } for (i = 0; i < geometry.faces.length; i++) { s

问题 I intend to create a simple photo editor in JS. My main question is, is it possible to create filters that render in real-time? For example, adjusting brightness and saturation. All I need is a 2D image where I can apply filters using the GPU. All the tutorials I've read are very complex and don't really explain what the API mean. Please point me in the right direction. Thanks. 回答1: You can make a custom pixel shader for each operation you're intending to use. Just learn some GLSL and follow

问题 Can anybody produce a clean "for dummies" example of HTML for using STLLoader.js to display ASCII (not binary) .stl object files in a web page? Result should let users manipulate object in current HTML5 browsers and with no fancy visuals beyond a grayscale object surface and background. STLLoader.js might need the help of three.js or three.min.js but I wouldn't know. STLLoader.js contains below usage example but did not include an HTML wrapper. Usage example inside STLLoader.js /** * Usage: *

问题 Closed. This question is off-topic. It is not currently accepting answers. Want to improve this question? Update the question so it's on-topic for Stack Overflow. Closed 2 years ago . Is there some kind of WebGL manual that lists all the functions etc. ? I tried Google but found nothing. 回答1: These two resources helped me a lot Mozilla Devloper Pages Great blog with lessons I followed! 回答2: WebGL Cheat Sheet http://web.archive.org/web/20120314072005/http://www.nihilogic.dk/labs/webgl_cheat