WebGL

Why is my webgl shader not changing pixel fragments correctly?

由 拜拜、爱过 提交于 2019-12-12 02:57:47
问题 I'm trying to get position of a fragment and change the color at positions, but when I try to do it, I get a weird effect where they don't want to be changed completely. Notice how there is a cyan color, but that part should be transparent. It seems like there's some weird rounding happening, and I'm not sure how to fix it. What is happening here? void main() { vec4 c0 = vec4(0,1,0,1); c0.a *= step(132.0,gl_FragCoord.x); gl_FragColor = c0; } 回答1: You need to show more code. Did you enable

Resize WebGL context in iOS

由 ╄→гoц情女王★ 提交于 2019-12-12 02:55:44
问题 iOS WebGL has a bug, which can be reproduced with following HTML: <html> <head> <title>Resize WebGL</title> <meta name="viewport" content="width=device-width, user-scalable=no"> </head> <body> <input type="button" id="resizeButton" value="resize"><br> <canvas id="chart" style="width:100px; height:100px; border:1px solid #000;"> <script> var canvas = document.getElementById('chart'); var gl = null; function resetGL() { var devicePixelRatio = 2; // Warning: overrides window.devicePixelRatio var

webgl colors and alpha

由 [亡魂溺海] 提交于 2019-12-12 02:55:43
问题 I have a problem with colors and alpha in webgl. A part of my JavaScript-Program: gl.clearColor(0.0, 0.0, 0.0, 1.0); gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT); And my fragment-shader: precision highp float; void main(void) { float c = 0.5; float a = 0.7; if(gl_FragCoord.x < 310.0) // left color gl_FragColor = vec4(c, c, c, 1.0); else if(gl_FragCoord.x > 330.0) // right color gl_FragColor = vec4(c, c , c , a); else gl_FragColor = vec4(c / a, c / a, c / a, 1.0); // middle color } I am

Having trouble changing color by pressing left or right button

由 那年仲夏 提交于 2019-12-12 02:35:29
问题 I'm having trouble changing change the color when you from left to right button. Holding down the left mouse button and moving it inside the canvas should draw a trajectory of the mouse in motion of red dots and blue dots for when you hold down the right mouse button. Problem is: once you drawn with the left button and go the right button it changes the color drawn by left button, and vise versa. Need help or hints on how to fix this. Thank you. javascript: // Vertex shader program var

Three.js/WebGL and 2D Canvas — Passing getImageData() array into Three.DataTexture()

由 只愿长相守 提交于 2019-12-12 02:19:24
问题 I'm new to WebGL (and 3D graphics in general) and am using three.js. What I want to do is create multiple textures from a 2D canvas, and use them to render multiple meshes, each with a different texture. If I just pass the canvas to a new THREE.Texture() prototype, the texture will change to whatever the canvas currently is. So all my objects have the same texture. My solution was to store each canvas array using getImageData() and create a new texture by passing that data to a new THREE

Touch events and intersections with crosswalk / three.js on Android 4.0.4 device

由 烂漫一生 提交于 2019-12-12 01:58:07
问题 I have a crosswalk WebGL_Sample based app that behave correctly on all XDK emulators (I am not using XDK, just testing the EMU's) when I try to touch / intersect a Cube with Three.js's "raycaster.intersectObjects". The problem is that if I shoot it on a real LGP920 running ICS, touch-sliding events are working (like for the sample's sliding cube) but touch-clicking are not whereas, again, everything works fine on EMU's... Any clue about what is happening ? here is what I use (the array

WebGL: smoothly fade lines out of canvas

由 独自空忆成欢 提交于 2019-12-12 01:48:59
问题 I'm a beginner at WebGL programming. I've made a web application in Three.JS that draws a sin wave onto a canvas with occasional noise. After they've been drawn, I fade them away. The final effect looks something like this: I'm trying to make the application in WebGL because of speed issues with Three.JS. I am able to draw one plain sin wave in WebGL but don't know how to achieve the same effect where I can draw a single wave, keep it in the buffer somehow, and fade it away. This is what I

Measure WebGL texture load in ms

由 偶尔善良 提交于 2019-12-12 01:47:21
问题 How can i measure WebGL texture load in milliseconds? Right now I have an array of images that will be renderd out as a map using a game loop and im interested in capturing the time it takes for WebGL to load every texture image in milliseconds. I wonder how that can be done to measure this because JavaScript is not synchronous with WebGL. 回答1: The only way to measure any timing in WebGL is to figure out how much work you can do in a certain amount of time. Pick a target speed, say 30fps, use

Raycasting against 'subscenes' in three.js

由 半世苍凉 提交于 2019-12-12 01:38:31
问题 So I am working with the webgl_interactive_cubes.html in the three.js examples, and I have a relatively simple question: Is it possible to test for intersection of a ray with the children of an object. for example, if I do something like: for ( var i = 0; i < 2000; i ++ ) { var object = new THREE.Mesh( geometry, new THREE.MeshLambertMaterial( { color: Math.random() * 0xffffff } ) ); scene.add( object ); } When I call var intersects = raycaster.intersectObjects( scene.children ); It will

Shift texture on sphere Three.js

由 雨燕双飞 提交于 2019-12-12 01:05:44
问题 I have a sphere with a map on it using Three.js , the image dimensions are 1024*2048. Here is the issue : I have CircleGeometries on my sphere indicating some places of interest, but when I just load the image on sphere it isn't well placed, and my points of interest aren't above the right country. the idea is to rotate a bit my map so it fits the points of interest, but I can't get it to work. I tried to use texture.offset.x = 0.5; Math.PI / (2 * Math.PI) = 0.5 as I want to rotate half a
订阅 WebGL