WebGL

Deploy WebGL applications as native iOS or Android applications?

时光毁灭记忆、已成空白 提交于 2019-12-20 08:07:29
问题 Does anyone know of a way in which you can deploy a WebGL app as a native iOS or Android app? Commercial middleware is acceptable, although an open project would be preferable. Thanks. 回答1: As an extension to Joris' answer (which appears to be based on the work of Nathan de Vries), the following is the code I needed to enable WebGL within the iOS 5.0 SDK: Somewhere near the top of your view controller implementation: @interface UIWebView() - (void)_setWebGLEnabled:(BOOL)newValue; @end

Canvas toDataURL() returns blank image

烈酒焚心 提交于 2019-12-20 07:51:27
问题 I'm using glfx.js to edit my image but when I'm trying to get that image's data using the toDataURL() function I get a blank image (width the same size as the original image). The strange thing is that in Chrome the script works perfect. What I want to mention is that the image is loaded in canvas using the onload event: img.onload = function(){ try { canvas = fx.canvas(); } catch (e) { alert(e); return; } // convert the image to a texture texture = canvas.texture(img); // draw and update

Implementing a 32-bit heightmap vertex shader in threejs

帅比萌擦擦* 提交于 2019-12-20 06:57:43
问题 I am attempting to repurpose the heightmap shader example found here into one that will work with 32-bits of precision instead of 8. The work-in-progress code is on github: https://github.com/bgourlie/three_heightmap The height map is being generated in .NET. The heights are within 0f...200f and converted into a 32-bit color value (Unity's Color struct) using the following method: private static Color DepthToColor(float height) { var depthBytes = BitConverter.GetBytes(height); int enc =

Implementing a 32-bit heightmap vertex shader in threejs

安稳与你 提交于 2019-12-20 06:52:30
问题 I am attempting to repurpose the heightmap shader example found here into one that will work with 32-bits of precision instead of 8. The work-in-progress code is on github: https://github.com/bgourlie/three_heightmap The height map is being generated in .NET. The heights are within 0f...200f and converted into a 32-bit color value (Unity's Color struct) using the following method: private static Color DepthToColor(float height) { var depthBytes = BitConverter.GetBytes(height); int enc =

How to use the three.js SSAO shader?

元气小坏坏 提交于 2019-12-20 03:23:06
问题 I'm trying to render a scene with the SSAO post-processing shader. There aren't any errors but I can't see any difference between the scene rendered with and without the SSAO pass. I initialize the renderer like this: // Create WebGL Renderer var renderParameters = { antialias: false, alpha: false, clearColor: 0xFFFFFF }; renderer = new THREE.WebGLRenderer(renderParameters); renderer.autoClear = false; renderer.setSize(viewportWidth, viewportHeight); // Create render targets

Color Gradient for Three.js line

走远了吗. 提交于 2019-12-20 02:56:17
问题 I only can find THREE.LineBasicMaterial(). Is there a way to have a simple color gradient from point a to point b? 回答1: You can use Vertex & fragment shaders for change color for vertices[0] and vertices[1]. (Line points) See http://mrdoob.github.com/three.js/examples/webgl_custom_attributes_lines.html 来源: https://stackoverflow.com/questions/11589274/color-gradient-for-three-js-line

Is it ever reasonable to do computations outside of main in an OpenGL shader?

耗尽温柔 提交于 2019-12-20 02:52:52
问题 I have some vertex shader code somewhat like the following (this is a bit of simplified example): attribute vec2 aPosition; attribute vec4 aColor; varying lowp vec4 vColor; uniform vec4 uViewport; mat4 viewportScale = mat4(2.0 / uViewport.z, 0, 0, 0, 0, -2.0 / uViewport.w, 0,0, 0, 0,1,0, -1,+1,0,1); void main() { vec2 pos = aPosition; gl_Position = viewportScale * vec4(pos, 0, 1); vColor = vec4(aColor.rgb*aColor.a, aColor.a); } In particular, the viewportScale matrix is calculated from the

Three.js as background of website possible?

你离开我真会死。 提交于 2019-12-19 21:46:24
问题 I've been looking at using three.js for a fun experiment on a site. I would like to use a current experiment (for which I already have the code for) and use it as a background for my site. Anybody know how to do this? I saw it done here: http://janjorissen.be/ Three JS API: https://github.com/mrdoob/three.js/wiki/API-Reference 回答1: usually i use iframe for that. Thus you dont have conflict with the base page. <style> iframe { z-index : -9999; position: absolute; top : 0; left : 0; width : 100

Repeated textures are severely distorted/shaking when rotating camera

社会主义新天地 提交于 2019-12-19 18:57:34
问题 I originally asked this question on gamedev, but none of the answers helped to solve problem, and I still have no clue what is the real cause. I didn't see anything about re-posting questions across SE in FAQs, so I can only hope this is okay. Moreover, in the retrospect the question is probably more related to graphics programming in general than just game development. Edit 1 begins The behaviour of the original post applies only to Windows XP and Windows 7, browsers Firefox and Chrome. On

Threejs: why is wireframe thickness not adjusting for me?

情到浓时终转凉″ 提交于 2019-12-19 12:00:28
问题 I am unable to create thick wireframes. Using the following code: new THREE.MeshBasicMaterial( { color: new THREE.Color( 'rgb(100,100,100)' ), emissive: new THREE.Color( 'rgb(23,23,23)' ), shading: THREE.FlatShading, wireframeLinewidth: 10, wireframe: true }) I get the following result: no matter what number I use the lines are always 1px thick. I've noticed that the same is true for threejs api demos page: is this a known bug? is there any work around? 回答1: The maximum required thickness of