WebGL

问题 I can't seem to find any texture format with more than 32 bit (GL.RGBA). Is this not supported by WebGL ? 回答1: By 32bit you mean where each element is 32bit itself or each element is 8bits and in sum they are 32 bits (8 bits of red, 8 bits of green, 8 bits of blue, 8 bits of alpha)? In any case there are extensions for 32bit float formats in WebGL so 32bits of red, 32bits of green, 32bits of blue, 32bits of alpha which is 128bit texture format. Those extensions are OES_texture_float. Let's

问题 I wrote two simple WebGL demos which use a 512x512 image as texture. But the result is not what I want. I know the solution is to use projective texture mapping(or any other solutions?) but I have no idea how to implement it in my simple demos. Anyone can help? The results are as follows(both of them are incorrect): Codes of demos are here: https://github.com/jiazheng/WebGL-Learning/tree/master/texture note: Both the model and texture could not be modified in my case. 回答1: In order to get

问题 I'm implementing simple ray tracing for spheres in a fragment shader and I'm currently working on the function that computes color for a diffusely shaded sphere. Here is the code for the function: vec3 shadeSphere(vec3 point, vec4 sphere, vec3 material) { vec3 color = vec3(1.,2.,3.); vec3 N = (point - sphere.xyz) / sphere.w; vec3 diffuse = max(dot(Ldir, N), 0.0); vec3 ambient = material/5; color = ambient + Lrgb * diffuse * max(0.0, N * Ldir); return color; } I'm getting errors on the two

问题 I have a web application that manipulates a 3D model on the server and allows the user to view the model. Using Java is a hard requirement for the web application, but the way the WebGL viewer interfaces with the application is still to be implemented. What is the recommended format/method to export 3D models from Java to something easily usable in WebGL? You can assume I use the Java 3D library on the server side and Three.js on the client side. 回答1: My preferred pipeline is export to JSON

问题 I am trying to achieve something i.e. a scrolling texture one after the other same as a marquee in HTML that just scrolls the text. Here's is what I have done so far : Fiddle , if you load it you will see first texture scrolling correctly and the second texture just comes over it after sometime(I kept 10 seconds for this). But ideally, it should behave like one after the other, for eg: if "This is a test" is a marquee, then they come one after the other. Similarly , "Image1 must be followed

问题 I guess it's basic stuff, but can't find any solution. Say, I have 2 objects and want to display only their overlapping parts (i.e. their intersection). Any hints? 回答1: Take a look at: Constructive Solid Geometries. Intro here: http://learningthreejs.com/blog/2011/12/10/constructive-solid-geometry-with-csg-js/ 回答2: One way is to turn on the stencil. Draw the first object, updating the stencil buffer, then draw the second object with the stencil test set to only draw where the first object set

问题 I'm looking at this example: http://threejs.org/examples/webgl_custom_attributes.html and notice that the custom displacement attribute gets filled by vertices.length for ( var v = 0; v < vertices.length; v++ ) { values[ v ] = 0; noise[ v ] = Math.random() * 5; } My question is, how does this relate to the number of normals, uvs and tangents? When i export my model from 3ds max, i have more UVs than vertices. I need to assign tangents per this UV number because they are different at seams. I

问题 I'm trying to use WebGL and would like to mix some different types into one buffer of bytes. I understand TypedArrays serve this purpose but it's not clear if I can mix types with them (OpenGL vertex data is often floats mixed with unsigned bytes or integers). In my test I want to pack 2 floats into a UInt8Array using set() , but it appears to just place the 2 floats into the first 2 elements of the UInt8Array . I would expect this to fill the array of course since we have 8 bytes of data. Is

问题 I want to get texture from webgl just like i can use getImageData() when the canvas context is 2d. how can i get texture form webgl context? 回答1: I know three possibilities. Important! For all these methods you must set preserveDrawingBuffer = true with webgl. To data url First one is high level method toDataURL and its origin is javascript canvas.toDataURL(type, encoderOptions); You can use this for example if you want to allow your client to do some app "screenshot" Following two methods

问题 I'm running into a hard-to-debug issue using WebGL. I was implementing a WebGL backend for the CraftyJS game framework. Everything works absolutely fine on OSX, Linux, and Android, but when a collaborator tested on windows there was an important error -- rotated sprites rendered unrotated! I was able to replicate this across IE, Chrome, and Firefox. An example of the type of vertex program I'm using, which simply renders a colored rectangle: attribute vec2 aPosition; attribute vec3