WebGL | 易学教程

Calculate near/far plane vertices using THREE.Frustum

阅读更多关于 Calculate near/far plane vertices using THREE.Frustum

问题 I need some help to deal with THREE.Frustum object. My problem: I need to calculate near/far plane vertices; I've taken a look at these tutorials http://www.lighthouse3d.com/tutorials/view-frustum-culling/view-frustums-shape/ http://www.lighthouse3d.com/tutorials/view-frustum-culling/geometric-approach-extracting-the-planes/ and I've sketched this function implementing exactly (I hope so) the procedure explained (just to get top-left/right vertices, assuming the camera can only look left and

WebGL shaders: maximum number of varying variables

阅读更多关于 WebGL shaders: maximum number of varying variables

问题 From the OpenGL ES spec section 2.10.4 (Shader Variables: Varying Variables): The number of interpolators available for processing varying variables is given by the implementation-dependent constant MAX_VARYING_VECTORS . This value represents the number of four-element floating-point vectors that can be interpolated; varying variables declared as matrices or arrays will consume multiple interpolators. When a program is linked, any varying variable written by a vertex shader, or read by a

Why WebGL 'clear' draw to front buffer?

阅读更多关于 Why WebGL 'clear' draw to front buffer?

问题 Why no need for swap-buffers or glFinish? <!DOCTYPE html> <html> <head> <title>Game v.0.0</title> <script> var gl = null; function startGame() { { var canvas = document.getElementById('gameCanvas'); var glNames = ["webgl", "experimental-webgl", "webkit-3d", "moz-webgl"]; for (var glNameI = 0; glNameI < glNames.length; ++glNameI) try { gl = canvas.getContext(glNames[glNameI]); if (gl) break; } catch(e) {} if(!gl) { canvas.outerHTML = "<a>WebGL NOT SUPPORTED? :(</a>"; return; } } window

THREEJS : Vertex Color Baking

阅读更多关于 THREEJS : Vertex Color Baking

问题 When coloring a mesh using vertex coloration, how does one save the colors as a texture? For example, if a mesh is colored based on its normals (similar to this example), how can one create a .png for the texture? For this purpose, it can be assumed that this mesh has texture coordinates. 来源： https://stackoverflow.com/questions/27697456/threejs-vertex-color-baking

bufferData - usage parameter differences

阅读更多关于 bufferData - usage parameter differences

问题 While reading specification at Khronos, I found: bufferData(ulong target, Object data, ulong usage) 'usage' parameter can be: STREAM_DRAW, STATIC_DRAW or DYNAMIC_DRAW My question is, which one should I use? What are the advantages, what are the differences? Why would I choose to use some other instead STATIC_DRAW? Thanks. 回答1: For 'desktop' OpenGL, there is a good explanation here: http://www.opengl.org/wiki/Buffer_Object Basically, usage parameter is a hint to OpenGL/WebGL on how you intend

Enabling WebGL support for Android WebView

阅读更多关于 Enabling WebGL support for Android WebView

问题 I need to display WebGL graphics in my webview. Is there any way to modify Android WebView to enable WebGL. If yes, How? 回答1: WebGL was not supported in WebViews before Android Lollipop. In KitKat, Android switched to Chromium as the native WebView implementation, but it is locked to Chromium 33, with no WebGL. In Lollipop, WebView is updated via the Play Store, and now supports WebGL. (source: https://developer.chrome.com/multidevice/webview/overview) Trying to extend WebView to support it

What does `precision mediump float` mean?

阅读更多关于 What does `precision mediump float` mean?

问题 In the learningwebgl tutorial1 I've found an interesting line in the fragment shader. precision mediump float; I've found an article about it here, but I still can't understand what does it mean? And if I remove this line, nothing changes. Everything is the same. So what does precision mediump float mean? 回答1: This determines how much precision the GPU uses when calculating floats. highp is high precision, and of course more intensive than mediump (medium precision) and lowp (low precision).

How do I clean up and unload a WebGL canvas context from GPU after use?

阅读更多关于 How do I clean up and unload a WebGL canvas context from GPU after use?

问题 How do you clean up a WebGL context program and unload the program, buffers and everything from the GPU and dom-element? I'd like to make sure we're not littering. Also it'd be nice to reuse the canvas if possible (and I don't know if it'd be 2d or webgl context). 回答1: You can just lose every reference to your gl context and all gl objects and the canvas and remove the canvas from the DOM. Unfortunately, because JavaScript is garbage collected there's no knowing when the browser will actually

How to detect collision in three.js?

阅读更多关于 How to detect collision in three.js?

问题 I am using three.js. I have two mesh geometries in my scene. If these geometries are intersected (or would intersect if translated) I want to detect this as a collision. How do I go about performing collision detection with three.js? If three.js does not have collision detection facilities, are there other libraries I might use in conjuction with three.js? 回答1: In Three.js, the utilities CollisionUtils.js and Collisions.js no longer seem to be supported, and mrdoob (creator of three.js)

Antialiasing not working in Three.js

阅读更多关于 Antialiasing not working in Three.js

问题 I am new to three.js and have starting working with it a lot recently. I really enjoy it and I have created some incredible things. However, I'm unsure why but when setting antialiasing to true I see no difference. renderer = new THREE.WebGLRenderer({ antialiasing: true }); I have searched for possible solutions, yet I can't seem to find or understand why this doesn't work. Is there something I am missing or need to in order to get antialiasing to work? EDIT: Links that helped me fix this