WebGL

Three.js Map material showing warnings despite updating buffers

强颜欢笑 提交于 2019-12-24 14:40:34
问题 I'm trying to load an OBL object and, on pre-specified containers (plains) display a texture. However, after I load an object, I start getting the following errors: THREE.WebGLRenderer 58 XHR finished loading: "http://localhost:8000/original-material/room2/soba-5-2.obj". about to traverse... about to add to scene WebGLRenderingContext: GL ERROR :GL_INVALID_OPERATION : glDrawElements: attempt to access out of range vertices in attribute 0 WebGL: too many errors, no more errors will be reported

Do I have to create separate buffers per webgl program?

别来无恙 提交于 2019-12-24 13:50:37
问题 Do I have to create separate webglbuffers if I have two programs or can I use the same ones in each? this.program = gl.createProgram(); gl.attachShader(this.program, vs); gl.attachShader(this.program, fs); gl.linkProgram(this.program); //gl.useProgram(this.program); this.cellProgram = gl.createProgram(); gl.attachShader(this.cellProgram, cvs); gl.attachShader(this.cellProgram, cfs); gl.linkProgram(this.cellProgram); //gl.useProgram(this.cellProgram); this.texCoordBuffer = gl.createBuffer();

Custom shader - Three.js

六月ゝ 毕业季﹏ 提交于 2019-12-24 12:33:03
问题 I am trying to use a custom shader with Three.js. I tried to do it like the many examples, but it doesn't work. My code is: var vertex = "void main(){vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );gl_Position = projectionMatrix * mvPosition;}"; var fragment = "precision highp float;void main(void){gl_FragColor = vec4(0.0,1.0,0.0,1.0);}"; material = new THREE.ShaderMaterial({ vertexShader: vertex, fragmentShader: fragment }); var mesh = new THREE.Mesh(geometry,material); …and

How to render geojson with three.js and d3.js

瘦欲@ 提交于 2019-12-24 12:02:49
问题 I use three.js r49, d3.v2.js and d3-threeD.js i want to render my city(Mashhad) with three.js but i got a problem i can render europian countries with these codes but i cant render with existing json file. d3.js Ref d3-threeD.js Ref these are my codes: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>GEO Bar</title> <link rel="stylesheet" href=""> <script type="text/javascript" src="./scripts/jquery-1.7.2.js"></script> <script

cross-domain image for three.js (canvas/webGL), proxy?

ぐ巨炮叔叔 提交于 2019-12-24 10:45:59
问题 I realize this may not be possible... I've been scouring around and trying out different things to no avail, but I thought it might merit a post before giving up... I'm putting together an app that uses three.js (webGL) and I would like to give the user the option to input a URL to any image on the web and use that to texture a 3D object in the web app. This would be no problem if not for the whole cross-domain security issue. I know there are supposed to be some work arounds for CORS

On the browser, how to plot 100k series with 64-128 points each?

巧了我就是萌 提交于 2019-12-24 10:38:22
问题 I want to graph about 120k series, each of them having 64 points (down sampled, 128-512 points if using the real sampling rate, which is even larger) I have attempted to do it with dygraph but it seems to be very slow if i use more than 1000 series. I have attempted to use vanilla WebGL, it drew really fast, but than my problem was getting the mouse's click and than deciding which series it was - any strategies on this? (I believe its called unprojecting?) - since there are 100k+ series,

GLSL shader for texture cubic projection

拜拜、爱过 提交于 2019-12-24 10:17:59
问题 I am trying to implement a texture cubic projection inside my WebGL shader, like in the picture below: What I tried so far: I am passing the bounding box of my object (the box in the middle of the picture) as follows: uniform vec3 u_bbmin; uniform vec3 u_bbmax; ... so the eight vertexes of my projection box are: vec3 v1 = vec3(u_bbmin.x, u_bbmin.y, u_bbmin.z); vec3 v2 = vec3(u_bbmax.x, u_bbmin.y, u_bbmin.z); vec3 v3 = vec3(u_bbmin.x, u_bbmax.y, u_bbmin.z); ...other combinations vec3 v8 = vec3

WebGL: drawArrays: attribs not setup correctly

我怕爱的太早我们不能终老 提交于 2019-12-24 10:09:45
问题 Here's my vertex shader: attribute vec3 aVertexPosition; attribute vec4 aVertexColor; attribute float type; uniform mat4 uMVMatrix; uniform mat4 uPMatrix; varying vec4 vColor; void main(void) { gl_Position = uPMatrix * uMVMatrix * vec4(aVertexPosition, 1.0); vColor = aVertexColor; if(type > 0.0) { } else { } } What I want to do is pretty simple, just capture a float value named type and use it for logic operates. The problem is, when I try to use it in Javascript, the error comes:

Convert Adobe 3D-pdf to WebGL?

若如初见. 提交于 2019-12-24 09:51:34
问题 Is there a way to convert an Adobe 3D-pdf file to WebGL? I searched the web but couldn't find a method. Adobe 3d pdf files have the disadvantage that they can only be viewed directly in the browser in Internet Explorer (and maybe on Safari -don't know), but if you use Firefox or Chrome, you need to download the file and open it in Acrobat. Moreover you need to activate it, sometimes adapt security settings... Whilst WebGL works directly in modern browsers. The export to 3d pdf is from Amira.

How to load external shader in javascript?

冷暖自知 提交于 2019-12-24 09:09:50
问题 I want to load the fragment shader from an external file, but it dont works. (after the shader is loaded, the alertbox don't appear.) var fs = document.createElement('script'); fs.setAttribute("type","x-shader/x-fragment"); fs.setAttribute("src", "shader.fs"); fs.onload = function() {alert('done');} document.getElementsByTagName("head")[0].appendChild(fs); 回答1: Storing a shader in a script tag is simply a convention that several WebGL tutorials picked up to give the shader a simple place to