WebGL | 易学教程

User uploaded textures in three.js

阅读更多关于 User uploaded textures in three.js

问题 Here you will find a jsFiddle adaptation of the problem. I would like to create a 3d web application in which the user is able to select an image file on their local machine: <input id="userImage" type="file"/> When a file is selected, the image is loaded as a parameter in a THREE.ShaderMaterial object. A glsl shader is applied to the image and the result is rendered to a container in the browser: $("#userImage").change(function(){ var texture = THREE.ImageUtils.loadTexture( $("#userImage")

How can I read the depth buffer in WebGL?

阅读更多关于 How can I read the depth buffer in WebGL?

问题 Using the WebGL API, how can I get a value from the depth buffer, or in any other way determine 3D coordinates from screen coordinates (i.e. to find a location clicked on), other than by performing my own raycasting? 回答1: Several years have passed, these days the WEBGL_depth_texture extension is widely available... unless you need to support IE. General usage: Preparation: Query the extension (required) Allocate a separate color and depth texture ( gl.DEPTH_COMPONENT ) Combine both textures

Unity WEBGL设置全屏

阅读更多关于 Unity WEBGL设置全屏

在webgl平台，直接设置 Screen.fullScreen = true;是不可以成功直接全屏的。我们去官网查看webgl的FullScreen讲解。 Due to security concerns, browsers will only allow locking the cursor or going into full-screen mode in direct response to a user-initiated event (like a mouse click or key press). Unfortunately, Unity does not have separate event and rendering loops, so it defers event handling to a point where the browser no longer acknowledges a full-screen or cursor lock request issued from Unity scripting as a direct response to the event which triggered it. As a result, Unity triggers the request on the next user-initiated

Three.js - Uncaught TypeError: undefined is not a function

阅读更多关于 Three.js - Uncaught TypeError: undefined is not a function

问题 I'm getting the Uncaught TypeError: undefined is not a function while using Three.js. The error is being shown for the line where I'm creating a THREE.PerspectiveCamera . The script is window.requestAnimFrame = (function(callback){ return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function(callback){ window.setTimeout(callback, 1000 / 60); }; })(); function animate

Error: WebGL: Exceeded 16 live WebGL contexts for this principal, losing the least recently used one

阅读更多关于 Error: WebGL: Exceeded 16 live WebGL contexts for this principal, losing the least recently used one

问题 I have a JavaScript using the THREE.js package, I made some changes, saw the error, and undid all of the changes I have made. However, the following error remained: Error: WebGL: Exceeded 16 live WebGL contexts for this principal, losing the least recently used one. A google-search did not reveal something useful (16 hits!). Anyone has any idea what is going on? Maybe this error has nothing to do with my script, but with the browser itself? 回答1: In my case, the solution was as simple as

Three.js - Using multiple textures in a single PointCloud

阅读更多关于 Three.js - Using multiple textures in a single PointCloud

问题 I'm trying to use multiple textures in a single PointCloud using a ShaderMaterial. I'm passing a texture array to the shader along with texture index attributes and selecting the appropriate texture to use in the fragment shader. Relevant Setup Code: var particleCount = 100; var uniforms = { textures: { type: 'tv', value: this.getTextures() } }; var attributes = { texIndex: { type: 'f', value: [] }, color: { type: 'c', value: [] }, }; var material = new THREE.ShaderMaterial({ uniforms:

Three.js - Using multiple textures in a single PointCloud

阅读更多关于 Three.js - Using multiple textures in a single PointCloud

billboarding vertices in the vertex shader

阅读更多关于 billboarding vertices in the vertex shader

问题 Code demonstrating issue (comment/uncomment out the gl_Position lines in the vertex shader) var scene; var book; var shaderMaterial; var renderer = new THREE.WebGLRenderer({ antialias: true }); renderer.setClearColor(0x000000); document.body.appendChild(renderer.domElement); var camera = new THREE.PerspectiveCamera(55, 1, 0.1, 40000); window.onresize = function () { renderer.setSize(window.innerWidth, window.innerHeight); camera.aspect = window.innerWidth / window.innerHeight; camera

three.js transparent maps issue

阅读更多关于 three.js transparent maps issue

问题 I'm creating loads of particles (80.000 to be exact) and I have set a transparent map, though, not all particles are transparent. I'm using a transparent PNG image: (it's barely visible but it's there alright) as the material map, though it shows a black background as seen here: If you look closely, some particles blend together well (no overlapping black edges) though some do not. Could it be because there are so many overlapping transparent objects or shouldn't this be an issue? Here's the

How to implement this rotating spiral in WebGL? [closed]

阅读更多关于 How to implement this rotating spiral in WebGL? [closed]

问题 It's difficult to tell what is being asked here. This question is ambiguous, vague, incomplete, overly broad, or rhetorical and cannot be reasonably answered in its current form. For help clarifying this question so that it can be reopened, visit the help center. Closed 8 years ago . Could somebody try to implement given animation into WebGL shader example? It would be great for people learing WebGL like myself. Source: http://dvdp.tumblr.com/post/2664387637/110109 回答1: I've implemented your