WebGL

Blank texture in webGL

由 99封情书 提交于 2019-12-23 04:23:02
问题 I have simple quad, and very simple shader (see below). I load image needed for texture, process it, get uniform place in shader program, and send it, the way that has been explained in "learning webgl" examples. I tested everything and used webGL inspector to see the textures I've been using and the problem is that quad is whole black. In fragment shader, the line: gl_FragColor = texture2D( uSampler, vUV); actually always sets the fragment color to (0,0,0,1). So it's like "blank" texture, or

Draw points on click in webGL

由 陌路散爱 提交于 2019-12-23 03:46:06
问题 I am a newbie, I am trying to draw a point of size 10, in WebGL, every time on MouseClick. At the point where I click. But Due to some logical error, it behaves a bit differently, it draws two points on click. Also I pass the colour black. It sometimes draws point of different colour(like green). <html> <head> <meta charset="utf-8"> <script id="vertex" type="x-shader"> attribute vec2 aVertexPosition; attribute vec4 vColor; varying vec4 fColor; void main() { gl_Position = vec4(aVertexPosition,

Shaders : Best practice to store them

由 ╄→гoц情女王★ 提交于 2019-12-23 03:35:22
问题 I am learning webgl with lessons from this site. To store the shaders, the author declares them in a <script> tag : <script id="shader-vs" type="x-shader/x-vertex"> attribute vec3 aVertexPosition; uniform mat4 uMVMatrix; uniform mat4 uPMatrix; void main(void) { gl_Position = uPMatrix * uMVMatrix * vec4(aVertexPosition, 1.0); } </script> Then uses some javascript code to retrieve them: function getShader(gl, id) { var shaderScript = document.getElementById(id); if (!shaderScript) { return null

Implementing depth testing for semi-transparent objects

由 ε祈祈猫儿з 提交于 2019-12-23 03:03:22
问题 I've been carefully trolling the internet for the past two days to understand depth testing for semi-transparent objects. I've read multiple papers/tutorials on the subject and in theory I believe I understand how it works. However none of them give me actual example code. I have three requirements for my depth testing of semi-transparent objects: It should be order independant. It should work if two quads of the same objects are intersection each other. Both semi-transparent. Imagine a grass

Three.js reuse geometry for faceColors and vertexColors

由 安稳与你 提交于 2019-12-23 02:37:15
问题 I want the same object to be rendered twice, once on-screen and once off-screen. The on-screen mesh has a geometry and a MeshLambertMaterial. This material has vertexColors: THREE.VertexColors . The off-screen mesh has the same geometry and a MeshBasicMeterial with vertexColors: THREE.FaceColors . During initial setup each faceColor is set to a unique color. Each vertexColor is set to a single color (Later these vertexcolors can change by "painting" on the object). Then I want to render both

Threejs: PointCloudMaterial size compared to ShaderMaterial gl_PointSize with size attenuation

由 与世无争的帅哥 提交于 2019-12-23 01:11:36
问题 I am curious to know what the relationship is between gl_PointSize and the size property within PointCloudMaterial . When I create a PointCloud with PointCloudMaterial and set the size property to 1 , the size of the particles are far larger than when creating a PointCloud with a ShaderMaterial and setting the size parameter for the vertex shader to 1 . I also account for size attenuation like in the PointCloudMaterial shader: <script type="x-shader/x-vertex" id="particle_vs"> uniform float

Three.js limit and scale mouse controls to canvas size

由 纵然是瞬间 提交于 2019-12-23 00:32:18
问题 I've been playing around with Three.js for a little while, I'm currently handling mouse dragging the same way as in the draggable cubes example of three.js, with Trackball Controls to operate the camera, however these controls both seem to work on the assumption that I use the whole browser window for my application. Is there any way to scale (and restrict) these mouse controls to my canvas? EDIT: Here is a code sample showing the mouse events for dragging objects (it's actually pretty much

CSS3DObject is Always in Front of WebGL Mesh

由 旧街凉风 提交于 2019-12-22 21:45:38
问题 I am mixing the CSS3D Renderer with WebGL Renderer to add HTML elements in 3D space to a WebGL scene. The CSS3DObject is in front of WebGL Meshes even though the WebGL Renderer has a higher z-index. Here is the jsfiddle http://jsfiddle.net/kd9Tc/ This is what the scene looks like. Note the back view. Whenever the CSS3DObject hits a mesh, I would like the correct depth to be displayed. I believe that this has something to do with the z-buffer or depth . I would prefer to have the text on a

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

由 萝らか妹 提交于 2019-12-22 16:29:54
问题 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

SketchUp export obj with textures - how

由 孤者浪人 提交于 2019-12-22 14:16:43
问题 Windows 7 (64bit), SketchUp Make 13.0.4812. Goal: convert SketchUp .skp model to .obj and load to WebGL using three.js. Problem: sketchup exports model to .obj with external textures, and these textures are not loaded by three.js. Question: is it possible to save SketchUp model as one .obj file with textures? 回答1: No, .obj is a simple text format. You can't store textures in .obj. Here is an example on how to load the texture from a separate .jpg file. I copied the important bits: // texture
订阅 WebGL