WebGL

问题 I have a really simple scene which has one .dae mesh in it, and a 7000*7000 plane underneath the mesh. I'd like it to be lit by a high SpotLight , so the mesh throws a shadow on the ground. But, something seems to be broken! No matter how high I put the SpotLight , it never lights up the plane! Also, it lights the mesh up only a little, while it is in a small square (perimeter). You can see the situation here: As soon as I move the mesh (a monster) around, it wont be lit anymore. This is how

问题 Before I used a samplerCube to render the cube This is my previous fragmentShader code "uniform samplerCube tCubeTgt;", "varying vec3 posTgt;", "void main() {", "vec4 reflectedColorTgt = textureCube( tCubeTgt, vec3( -posTgt.x, posTgt.yz ) );", "gl_FragColor = reflectedColorTgt ;", "}" Now I want to use 6 sampler2D to render a cube. what should I do 回答1: Why? In any case looking up how cube mapping works there's a function and table in the OpenGL ES 2.0 spec showing how cube mapping works

问题 I want to rotate the camera around the x-axis on the y-z plane while looking at the (0, 0, 0) point. It turns out the lookAt function behaves weird. When after rotating 180°, the geometry jump to another side unexpectedly. Could you please explain why this happens, and how to avoid it? You can see the live demo on jsFiddle: http://jsfiddle.net/ysmood/dryEa/ class Stage constructor: -> window.requestAnimationFrame = window.requestAnimationFrame or window.webkitRequestAnimationFrame or window

问题 I'm using three textures in my WebGL program, and I get a striped/overlapping effect. The first texture I bind is OK, but sequential textures get the effect. Here's my vertex data format (x,y,z,s,t,textureIndex,textureName) -5.0 0.0 -5.0 0.0 0.0 1 WL01 -5.0 0.0 5.0 0.0 1.0 1 WL01 5.0 0.0 5.0 1.0 1.0 1 WL01 -5.0 0.0 -5.0 0.0 0.0 1 WL01 5.0 0.0 -5.0 1.0 0.0 1 WL01 5.0 0.0 5.0 1.0 1.0 1 WL01 -1.0 1.0 -4.0 0.0 1.0 2 WL02 -1.0 0.0 -4.0 0.0 0.0 2 WL02 -0.0 0.0 -4.0 1.0 0.0 2 WL02 -1.0 1.0 -4.0 0.0

问题 I am looking on how to implement something similar than this work: https://vimeo.com/9121195 . But with explicitly attributing colors to each metaball from an array of given colors. As far as I can see, this is done entirely from the shader side in this example but I was wondering if this could not be implemented with Threejs and marchingcubes. By creating a new THREE.ShaderMaterial I assume I can pass positions of each metaball to the shader and then evaluate the distance of each vertex with

问题 I'm trying to pass some non-texture values to a pixel shader in a texture and i'm running into a weird problem where sampler2d returns vec4(0.0) when the texture's alpha value is zero, regardless of the value of the other 3 bytes. this isn't a premultiplied alpha thing, or a blending thing, it doesn't happen when the alpha's byte value is 1 through 255, just zero. if you run the code below you'll see a 2x2 texture in the small 2d canvas being rendered into the large 3d canvas. all 4 pixels

问题 I have a vertex shader as such void main (){ vec4 wPos = modelMatrix * vec4( position , 1. ); vWorldPosition = wPos.xyz; float mask = step( 0., dot( cameraDir, normalize(normalMatrix * aNormal) ) ); gl_PointSize = mask * uPointSize; gl_Position = projectionMatrix * viewMatrix * wPos; } I'm not entirely sure how to test the performance of the shader, and exclude other factors like overdraw. I imagine a point of size 1, arranged in a grid in screen space without any overlap would work?

问题 Earlier this year I wrote an experimental PhoneGap plugin called WebGLGap. In theory it could enable WebGL support in PhoneGap apps by forwarding all the JS calls to the plugin code. Unfortunately I abandoned it because the bridge between Javascript and the plugin was a huge bottleneck: everything (including vertex data) was stringified in to a giant string, passed to the plugin, then parsed back to JSON to be read by the native plugin code. Obviously this made it pretty useless. However I'm

问题 I'm new to WebGL and I'm trying to create a black ring in the middle of this green circle without making additional circles. I believe I can do this by making the normal of those triangles go the other way but I'm not sure exactly how to do this. My friend suggested changing the texture coordinates but I don't really understand how this would help. Can anyone shine some light on these ideas and possible intuition? _______HTML File__________ <!DOCTYPE html> <html> <head> <script id="vertex

问题 I have a 'choose file' button I want to use for loading a client side file instead of loading from the server path in loader.load() on line 86. I'm guessing I need to use File API but haven't figured out how after looking at this solution. Existing web page that loads file from server path in line 86: <!DOCTYPE html> <html> <head> <style> body { background-color:#fea47c; } div { position:relative; left:200px; top:0px; background-color: #eeeeee; border:1px solid black; width:550px; height