WebGL

rotating a sphere a to b point on itself

女生的网名这么多〃 提交于 2019-12-10 19:47:26
问题 Im trying to figure out how to rotate a sphere from point A on itself to point b on itself. I found some Unity3d code: Quaternion rot = Quaternion.FromToRotation (pointA, pointB); sphere.transform.rotation *= rot; //Multiply rotations to get the resultant rotation via http://answers.unity3d.com/questions/21921/rotate-point-a-on-sphere-to-point-b-on-sphere.html but I can't figure out how to implement it in Three.js. Here's my code: var s = sphere mesh var va = 1st start vector var vb = 2nd end

three.js: Cannot display obj file using THREE.OBJLoader

戏子无情 提交于 2019-12-10 19:43:57
问题 I am having problems loading an obj file using the example code. I have no issue when loading the example file male02.obj however when I insert my file the object isn't displayed. I have had the same problem when using using the Python converter script and the JSONLoader. Here is all of the code for the OBJLoader <!doctype html> <html lang="en"> <head> <title>three.js webgl - loaders - OBJ loader</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, user-scalable

How to get the 2d dimensions of the object being drawn for hit test on webgl after model view transform

╄→尐↘猪︶ㄣ 提交于 2019-12-10 19:42:51
问题 I follow webgl fundamentals and draw 2d object and use matrices to scale vertices and render. Before render I pass width/height that set as vertices to render a quad. This defines the size of the object. But in the vertex shader I apply transformation to these vertices like so: in vec2 aPosition; in vec2 aTexCoord; out vec2 vQuadCoord; uniform mat3 uMatrix; void main() { vec2 position = (uMatrix * vec3(aPosition, 1)).xy; vQuadCoord = aTexCoord; gl_Position = vec4(position, 0, 1); } This

Render to 3D texture webgl2

Deadly 提交于 2019-12-10 19:02:57
问题 I read here that it should be possible to render to a 3D texture in WebGL2 by using multiple render targets and attaching each layer of the 3d texture as a layer to the render target. However I can't seem to get it to work, no errors but the values of the texture doesn't change between the reads and is just empty. The texture has gl.RGBA8 as internal format, gl.RGBA as format and a size of 64x64x64 What am I doing wrong? This is what I tried so far (pseudo code): this.fbo = gl

WebGL: glsl attributes issue, getProgramParameter returns wrong number of attributes

こ雲淡風輕ζ 提交于 2019-12-10 18:19:57
问题 I'm making a simple WebGL demo. I have a simple vertex shader that takes two attributes and some uniforms. Here is the code: attribute vec3 v_position; attribute vec3 v_normal; uniform mat4 mvMatrix; uniform mat4 pMatrix; uniform mat3 normalMatrix; uniform vec3 lightPosition; // Color to fragment program varying vec3 transformedNormal; varying vec3 lightDir; void main(void) { // Get surface normal in eye coordinates transformedNormal = normalMatrix * v_normal; // Get vertex position in eye

webglcontextcreationerror event: is it triggered synchronously?

自古美人都是妖i 提交于 2019-12-10 17:46:23
问题 Is the webglcontextcreationerror event triggered synchronously or asynchronously? For example does canvas.addEventListener("webglcontextcreationerror", function() { console.log("Error"); }); var context = canvas.getContext("webgl"); console.log("After creation"); in the case of error output "After creation" "Error" or "Error" "After creation" ? I am unsure how to force this event to find out the answer myself. 回答1: NB : This is not a per spec answer, but only from a single UA test, so it may

WebGL: Declining support for OES_texture_float on Android

纵然是瞬间 提交于 2019-12-10 17:29:59
问题 Does anybody know what the deal is with declining support for the WebGL extension OES_texture_float on Android over the years? https://webglstats.com/webgl/extension/OES_texture_float?platforms=000000000010000400 Is this a data collection error of some sort, or is the support really declining? If you take Android out of the filter then `OES_texture_float is supported on basically 100% of the other mainstream mobile and desktop platforms: https://webglstats.com/webgl/extension/OES_texture

2d Context vs WebGL for Rendering Video

亡梦爱人 提交于 2019-12-10 17:16:08
问题 I am currently using the CanvasRenderingContext2D.drawImage() to draw video coming from a RTC mediastream to a canvas. Unfortunately, this takes up considerable CPU resources. Would it be more performant to do this using a WebGLRenderingContext ? (Hardware acceleration?) If yes, how exactly does one handle this, preferably without creating an in-between video element? 回答1: No need for 2d Context use WebGL for rendering video if you are already in 3d space. "Unfortunately, this takes up

Get some trounble when using drawBuffers in WebGL2

南笙酒味 提交于 2019-12-10 16:44:38
问题 I want to combine my deferred renderer and forward renderer together. In order to share the same depth buffer, I use a single frame buffer object with 4 color attachments, COLOR_ATTACHMENT0-2 for G-buffer rendering, COLOR_ATTACHMENT3 for deferred shading and forward rendering, here's the pesudo code: //**Gbufffer part** Bind G-Buffer FBO gl.drawBuffers([gl.COLOR_ATTACHMENT0, gl.COLOR_ATTACHMENT1, gl.COLOR_ATTACHMENT2]); draw the G buffer //**Lighting part** Bind Lighting buffer FBO //*

WebGL : How do make part of an object transparent?

别来无恙 提交于 2019-12-10 15:55:38
问题 I have a 3D ball in the browser , now I want to dig a hole on it to see its back. How can I make it possiable ? For example, I want the white triangle part of the cube could be transparent(I mean we could see the background behind the cube). I've tried to change the alpha in fragment shader(the area in the code is a square not triangle, doesn't matter): <script id="shader-fs-alpha" type="x-shader/x-fragment"> precision mediump float; varying vec4 vColor; uniform float uAlpha; void main(void)