WebGL

Exporting a simple model with texture from Blender to three.js

由 夙愿已清 提交于 2019-12-18 15:00:32
问题 Note: I want to avoid modifying the model in the javascript code and do all the model design inside Blender. Note #2: While this question is long, it is actually a basic problem (title says it all). The below is "walk-through" to the problem. I am trying export Blender models to threejs.org as DAE model but have problem with models with texture (I have tried JSON and OBJ+MTL format too): To make things simpler, here are the steps I perform (and fail) to add texture to simple "Startup file"

Better to multiply matrices in javascript or a shader?

由 半腔热情 提交于 2019-12-18 13:26:13
问题 I've been looking at several webgl examples. Consider MDN's tutorial. Their vertex shader multiplies the vertex by a perspective matrix and a world position matrix: gl_Position = uPMatrix * uMVMatrix * vec4(aVertexPosition, 1.0); But the uMVMatrix is itself the product of several transforms (translation, rotation, etc) calculated in javascript with the help of some matrix libraries. It seems like it would be faster to calculate their products directly in the shader; surely that's faster than

Canvas has been tainted by cross-origin data via local chrome:// extension URL

由 女生的网名这么多〃 提交于 2019-12-18 12:42:05
问题 I am working on a google chrome extension and I am trying to load an image that is bundled with the extension into a canvas. var canvas = document.createElement('canvas'); canvas.width = 470; canvas.height = 470; var context = canvas.getContext('2d'); var image = new Image(); image.addEventListener('load', function(){ //process }); image.src = chrome.extension.getURL("asset/gotcha.png"); When I execute the code in a content script I am getting: Unable to get image data from canvas because the

Quality of Three.js shadow in Chrome/MacOS?

由 跟風遠走 提交于 2019-12-18 12:24:04
问题 I am experimenting with a simple Three.js scene (novice in this area). I am using the Three.js WebGLRenderer and have set up a plane, a cube that casts shadows and a directional light source. The result is shown in the image. How do I: 1. Increase the quality of the shadow rendering? 2. Get rid of the jagged edges? I have set the antialiasing to true but it does not seem to help in any browser ... renderer = new THREE.WebGLRenderer({ antialias: true}); 回答1: You can do two things. First set a

Three.js - depthWrite vs depthTest for transparent canvas texture map on THREE.Points

由 蹲街弑〆低调 提交于 2019-12-18 11:59:14
问题 Question Is there a significant difference between depthWrite: false and depthTest: false ? Does using depthTest offer a performance advantage? Is there any sacrifice in functionality choosing one or the other? Original problem I wanted to render a THREE.Points object with translucent circles as each point. I used a THREE.Texture loaded from a canvas element and passed it to the map property on the THREE.PointsMaterial . The transparency did not completely work, some circles overlapped fine

canvas vs. webGL vs. CSS 3d -> which to choose? [closed]

由 限于喜欢 提交于 2019-12-18 10:42:27
问题 Closed . This question is opinion-based. It is not currently accepting answers. Want to improve this question? Update the question so it can be answered with facts and citations by editing this post. Closed 4 years ago . For basic 3d web application i.e. a few cubes, rotation and translation in 3d space - which is better to choose? CSS 3d seems the easiest, but is not supported on IE9 or on the roadmap for IE10, and offers less control than the other options. Canvas & WebGL seems way more

How to create sphere using multiple objects

由 心已入冬 提交于 2019-12-18 09:37:58
问题 I have to draw sphere using multiple squares(i am also allowed to use triangles even, but i found some existing code for help in square, so i used it). I have successfully drawn multiple squares (5000).But i don't have to use any inbuit function to create sphere . My code is below : <!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> <head> <script class="WebGL"> var gl; function createProgram(gl, vertexShader, fragmentShader) { var vs = gl.createShader(gl.VERTEX_SHADER); gl

WebGL/Javascript: Object transformations with multiple objects

由 故事扮演 提交于 2019-12-18 09:24:36
问题 I want to draw several objects and then transform them by selecting the specific one with a keyboard index. Let's say 1-5. I loaded the canvas. I initialized the webgl-context. I defined vertex/fragment shaders and bound them to a program, which I "used" ( gl.useProgram("program") ). And then I initialized a VertexBuffer (it's an own function). There I defined the vertices for a cube and bound that buffer. In the same function I defined my cone vertices and I bound it to a different buffer.

How to implement MeshNormalMaterial in THREE.js by GLSL?

由 故事扮演 提交于 2019-12-18 05:12:32
问题 I want to implement a shader like MeshNormalMaterial, but I have no idea how to convert normal to color. In THREE.js: My test1: varying vec3 vNormal; void main(void) { vNormal = abs(normal); gl_Position = matrix_viewProjection * matrix_model * vec4(position, 1.0); } varying vec3 vNormal; void main(void) { gl_FragColor = vec4(vNormal, 1.0); } My test2: varying vec3 vNormal; void main(void) { vNormal = normalize(normal) * 0.5 + 0.5; gl_Position = matrix_viewProjection * matrix_model * vec4

THREE.JS Shadow on opposite side of light

由 怎甘沉沦 提交于 2019-12-18 04:45:12
问题 I used THREE.js r49 create 2 cube geometry with a directional light to cast shadow on them and got result as in the following picture. I noticed that the shadow in the green circle should not be appeared, since the directional light is behind both of the cube. I guess that this is the material issue, I've tried changing various material parameters as well as change the material type itself, but the result still the same. I also tested the same code with r50 and r51 and got the same result.
订阅 WebGL