WebGL

Three.js combining StereoEffect with FXAA ShaderPass

由 给你一囗甜甜゛ 提交于 2019-12-06 08:10:30
I have created a Google Cardboard scene using Three.js StereoEffect effect = new THREE.StereoEffect(renderer); effect.render(scene, camera); Now I want to run it through the FXAA Shader to smooth the output. I know I can do this using the EffectComposer: renderScene = new THREE.RenderPass(scene, camera); effectFXAA = new THREE.ShaderPass(THREE.FXAAShader); effectFXAA.uniforms['resolution'].value.set(1 / (window.innerWidth * dpr), 1 / (window.innerHeight * dpr)); effectFXAA.renderToScreen = true; composer = new THREE.EffectComposer(renderer); composer.setSize(window.innerWidth * dpr, window

ThreeJS. How to implement ZoomALL and make sure a given box fills the canvas area?

由 放肆的年华 提交于 2019-12-06 07:56:49
问题 I am looking for a function to ensure that a given box or sphere will be visible in a WebGL canvas, and that it will fit the canvas area. I am using a perspective camera and the camera already points to the middle of the object. I understand that this could be achieved by changing the FOV angle or by moving the camera along the view axis. Any idea how this could be achieved with ThreeJS ? 回答1: This is how I finally implemented it: var camera = new THREE.PerspectiveCamera(35,1,1, 100000); var

ThreeJS Texture is pixelated when seen from distance

由 心已入冬 提交于 2019-12-06 07:32:36
问题 I was playing with webGL and ThreeJS, then I've got the following issue: Textures with large images gets pixelated when seen from distance. Check the example: http://jsfiddle.net/4qTR3/1/ Below is the code: var scene = new THREE.Scene(); var camera = new THREE.PerspectiveCamera(40, window.innerWidth / window.innerHeight, 10, 7000); var light = new THREE.PointLight(0xffffff); light.position.set(0, 150, 100); scene.add(light); var light2 = new THREE.AmbientLight(0x444444); scene.add(light2);

How does ShaderToy load sounds into a texture

由 跟風遠走 提交于 2019-12-06 07:20:08
问题 I've been trying to do the same things shadertoy does for passing audio frequency/waveform into the shader with three.js. https://www.shadertoy.com/view/Xds3Rr In this example it seems that IQ is putting frequency/waveform audio data into an image and then sampling that as a texture in the shader. How would I create that audio texture in Javascript? To be clear I don't need help loading the texture uniform into the shader. I just don't know how to create the audio texture from an audio file.

How does WebGL set values in the depth buffer?

由 拜拜、爱过 提交于 2019-12-06 06:24:59
问题 In OpenGL, depth buffer values are calculated based on the near and far clipping planes of the scene. (Reference: Getting the true z value from the depth buffer) How does this work in WebGL? My understanding is that WebGL is unaware of my scene's far and near clipping planes. The near and far clipping planes are used to calculate my projection matrix, but I never tell WebGL what they are explicitly so it can't use them to calculate depth buffer values. How does WebGL set values in the depth

Drawing lines in three.js using CanvasRenderer makes smoother lines than WebGLRenderer

由 半世苍凉 提交于 2019-12-06 06:11:45
I've been stuck with an issue with three.js' CanvasRenderer rendering lines a lot smoother than the WebGLRenderer. It appears as if the WebGLRenderer doesn't apply antialiasing. When I take the three.js canvas - lines - random example from http://mrdoob.github.io/three.js/examples/canvas_lines.html , I see this using the CanvasRenderer: When changing the following line renderer = new THREE.CanvasRenderer(); to renderer = new THREE.WebGLRenderer({antialias: true}); , I see this: As you can see, the WebGL clearly has inferior quality. What am I doing wrong? I have been looking at the same

How Might I organize vertex data in WebGL for a frame-by-frame (very specific) animated program?

由 泄露秘密 提交于 2019-12-06 05:50:29
I have been working on an animated graphics project with very specific requirements, and after quite a bit of searching and test coding, I have figured that I could take several approaches, but the Khronos and MDN documentation I have been reading coupled with other posts I have seen here don't answer all of my questions regarding my particular project. In the meantime, I have written short test programs (setting infrastructure for testing). Firstly, I should describe the project: The main object drawn to the screen is a simple quad surrounded by a black outline (LINE_LOOP or LINES will do,

How Do I Export OBJ From Three.js geometry that is being displaced by GLSL shader?

由 ぃ、小莉子 提交于 2019-12-06 05:31:19
问题 I attempted to use the following code I found on Stack Overflow to export an OBJ from geometry in a Three.js scene. The geometry is being displaced by a GLSL shader so the displacement of vertices doesn't seem to export with the geometry. When I import the OBJ into Blender I only get the flat plane that is not displaced. You can inspect a working version of the displacement at http://kineticvideo.co How do I export an OBJ while using a GLSL shader to displace the geometry? Please help. I was

Switch shader program in WebGL

由 笑着哭i 提交于 2019-12-06 05:17:31
问题 I have an existing WebGL renderer (too much code to be useful to share) which used to be very simple: it only had one vertex shader, one fragment shader, and one shader program with both. It was for rendering quads. I'm trying to extend it to have a second shader program it switches to and from, for rendering point sprites. It has its own vertex attribute array, and a second vertex shader, fragment shader and shader program. I can't seem to switch between the two properly: I keep getting

three.js - zoom in/out complete tube geometry

由 一笑奈何 提交于 2019-12-06 05:12:41
I've created a tube geometry with data of 200 points loaded from external javascript file in JSON format. Please find the below code. <!DOCTYPE html> <html lang="en"> <head> <title>3d Model using HTML5 and three.js</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"> <style> body { font-family: Monospace; background-color: #f0f0f0; margin: 0px; overflow: hidden; } </style> </head> <body> <input type="button" value="plot" onClick="return plotPath();" /> <script src="three.min.js" type="text/javascript"><
订阅 WebGL