WebGL | 易学教程

How to load a text file in JavaScript?

阅读更多关于 How to load a text file in JavaScript?

问题 I'm creating a simple WebGL project and need a way to load in models. I decided to use OBJ format so I need a way to load it in. The file is (going to be) stored on the server and my question is: how does one in JS load in a text file and scan it line by line, token by token (like with streams in C++)? I'm new to JS, hence my question. The easier way, the better. UPDATE: I used your solution, broofa, but I'm not sure if I did it right. I load the data from a file in forEach loop you wrote but

WebGL: Why does transparent canvas show clearColor color component when alpha is 0?

阅读更多关于 WebGL: Why does transparent canvas show clearColor color component when alpha is 0?

问题 Here's a simple spike showing my problem: <html> <head> <title>Clear Color</title> <style type="text/css"> #stage { background-color: rgba(127,127,127,1); } </style> </head> <body> <canvas id="stage" width="100", height="100"></canvas> <script type="text/javascript"> var options = { alpha: true, premultipliedAlpha: true }; var ctx = document.getElementById("stage").getContext("webgl", options); ctx.clearColor(1, 0, 0, 0); ctx.enable(ctx.BLEND); ctx.blendFuncSeparate( ctx.SRC_ALPHA, ctx.ONE

Why does this WebGL framebuffer usage throw FRAMEBUFFER_UNSUPPORTED?

阅读更多关于 Why does this WebGL framebuffer usage throw FRAMEBUFFER_UNSUPPORTED?

问题 I'm trying to create a WebGL pick buffer; Can anyone see what I'm doing wrong here? I'm getting "Incomplete framebuffer: FRAMEBUFFER_UNSUPPORTED" on Mozilla/5.0 (X11; Linux x86_64; rv:2.0b3pre) Gecko/20100724 Minefield/4.0b3pre and Chrome 5.0.375.99. Must be obvious and staring right at me but I cant see it. It's apparently valid, has a texture..but "unsupported"? var gl = canvas.context; var frameBuf = gl.createFramebuffer(); var renderBuf = gl.createRenderbuffer(); var pickTexture = gl

数百个 HTML5 例子学习 HT 图形组件 – 3D 建模篇

阅读更多关于数百个 HTML5 例子学习 HT 图形组件 – 3D 建模篇

http://www.hightopo.com/demo/pipeline/index.html 《数百个 HTML5 例子学习 HT 图形组件 – WebGL 3D 篇》里提到 HT 很多情况下不需要借助 3Ds Max 和 Blender 等专业 3D 建模工具也能做出很多效果，例如 http://www.hightopo.com/guide/guide/core/3d/examples/example_3droom.html 这个 3D 电信机房监控例子整个都是通过 HT 提供的 API 构建而成：不过这个例子中的模型都比较规矩，也就消防栓由一个球 + 圆通构成，其他图形通过 HT 提供的基本 Node 以及 Shape 对象即可搞定：但这并不意味着 API 只能做简单的模型，《 HT for Web 建模手册》中介绍的 HT 建模插件可以让有想象力的同学做出各种不可思议的效果。例如这个餐座椅的例子： http://www.hightopo.com/guide/guide/plugin/modeling/examples/example_custommodel.html 对于这个餐座椅的例子，特别是一些不规则的花盆、酒杯、圣诞树和那颗爱心，很多人好奇我们是怎么搞出来的。其实蛮简单，就用了《 HT for Web 建模手册》中的 createRingModel 和

passing a webgl canvas to CanvasRenderingContext2D.drawImage()

阅读更多关于 passing a webgl canvas to CanvasRenderingContext2D.drawImage()

问题 I am trying to copy the contents of one canvas to another. The source canvas has a webgl context. The destination canvas has a 2d context. My code looks like: destinationContext.drawImage(sourceCanvas, 0, 0); This works in Firefox and IE, but it does not work in Chrome. Why not? Thanks! 回答1: Here's some working code. const gl = document.querySelector("#a").getContext("webgl"); const ctx = document.querySelector("#b").getContext("2d"); // put a rectangle in the webgl canvas gl.enable(gl

ImageUtils.loadTexture with callback in Canvas Renderer

阅读更多关于 ImageUtils.loadTexture with callback in Canvas Renderer

问题 i'm using three.js revision 53 when loading a texture in Canvas Renderer (IE on Win7) and adding a callback for the onLoad event, the texture is not getting displayed. When i remove the callback function, the texture is getting displayed as expected: // NOT WORKING with callback added var material = new THREE.MeshBasicMaterial({ map: THREE.ImageUtils.loadTexture('text_build.png', {}, function() { //do something }) }); var plane = new THREE.Mesh(new THREE.PlaneGeometry(135, 135), material);

Three.js - apply shader to blur a geometry

阅读更多关于 Three.js - apply shader to blur a geometry

问题 Been learning ThreeJS over the past day or so however I'm struggling with Shaders. I'm trying to blur a geometry i have. I tried using Depth Of Field with the examples found on the Three.js site but it made my foreground objects slightly blurry too. So I'm hoping to single out one object and just blur that. Now I have a mesh that i created with a LambertMaterial basically like so: var material = new THREE.MeshLambertMaterial({ color: 0x5c5c5c, emissive: 0x000000, shading: THREE.FlatShading,

WebGL - Rotating object in the direction it is travelling

阅读更多关于 WebGL - Rotating object in the direction it is travelling

问题 In this example: http://deeplogic.info/project/webGL/ How can I rotate the object in the direction in which it is travelling? 回答1: To get rotation around z for an object moving in the direction (x, y) you can use the Math.atan2(y,x) method. It'll return an angle in radians. The OpenGL convention prior to ES 2 was to work in degrees, but nowadays it's up to whatever code you have to push transformations to the vertex shader. You'll probably want to convert though, in which case just multiply

The collada model looks strange (three.js)

阅读更多关于 The collada model looks strange (three.js)

问题 The collada model looks strange in three.js. A screenshot: The code is very simple, nothing special: loader.load( 'models/police_car.dae', function ( collada ) { dae = collada.scene; init(); }); I downloaded the model from google sketchup warehouse. [link] I have no idea what is the problem, because I'm new in three.js. Should I call a function to fix it? Thanks in advance, 回答1: I think this is happening because the back faces are not being rendered. COLLADA has no way to specify whether a

Overlay canvas (WebGL) with canvas (three.js)

阅读更多关于 Overlay canvas (WebGL) with canvas (three.js)

问题 I have two canvases. The first is supposed to be the background and it's content is rendered via raw WebGL (3D). The second canvas is supposed to overlay the first one and is mainly transparent. It's content is rendered via three.js (3D content). Unfortunately the second canvas is not drawn on top of the first one, but next to it. How can I draw the second canvas above the first one with transparent three.js scene background? Update : I integrated gaitat's idea. However it's still not working