WebGL

问题 I have a texture of size 800x600. How do I scale it on a webgl <canvas> at another size and keep the original aspect ratio? Assuming that the drawing buffer and the canvas have the same dimensions. 回答1: Given the WebGL only cares about clipsapce coordinates you can just draw a 2 unit quad (-1 to +1) and scale it by the aspect of the canvas vs the aspect of the image. In other words const canvasAspect = canvas.clientWidth / canvas.clientHeight; const imageAspect = image.width / image.height;

问题 I have a texture of size 800x600. How do I scale it on a webgl <canvas> at another size and keep the original aspect ratio? Assuming that the drawing buffer and the canvas have the same dimensions. 回答1: Given the WebGL only cares about clipsapce coordinates you can just draw a 2 unit quad (-1 to +1) and scale it by the aspect of the canvas vs the aspect of the image. In other words const canvasAspect = canvas.clientWidth / canvas.clientHeight; const imageAspect = image.width / image.height;

问题 I have a texture of size 800x600. How do I scale it on a webgl <canvas> at another size and keep the original aspect ratio? Assuming that the drawing buffer and the canvas have the same dimensions. 回答1: Given the WebGL only cares about clipsapce coordinates you can just draw a 2 unit quad (-1 to +1) and scale it by the aspect of the canvas vs the aspect of the image. In other words const canvasAspect = canvas.clientWidth / canvas.clientHeight; const imageAspect = image.width / image.height;

问题 I'm trying to rotate a 2d image's matrix inside the vertex shader. I want the 2d image to rotate around what I think would be the z axis. However The closes I've ever gotten is: Here is my matrix inside my shader that I apply translation and scaling on: mat4 worldPosTrans = mat4(vec4(scale.x * cos(rotateZ), 0, 0, 0), vec4(0, scale.y, 0, 0), vec4(0, 0, scale.z, 0), vec4(translation, 1)); This is a slightly changed version from something that was supposed to rotate everything: mat4

问题 I have a canvas with webGL-drawings, created by Blend4Web framework. I tried to save image using toDataURL() : image= $('canvas')[0].toDataURL(); All platforms works perfect, except iOS (iphone & ipad) I know about webGL aspects: Canvas toDataURL() returns blank image only in Firefox, preserveDrawingBuffer is enabled. Also, I know about limitations in iOS: iOS HTML5 Canvas toDataURL, but canvas is small, even 100×500px images are blank (it is 0,05MP, limit is 3MP). I use toDataURL() to send

问题 I have a canvas with webGL-drawings, created by Blend4Web framework. I tried to save image using toDataURL() : image= $('canvas')[0].toDataURL(); All platforms works perfect, except iOS (iphone & ipad) I know about webGL aspects: Canvas toDataURL() returns blank image only in Firefox, preserveDrawingBuffer is enabled. Also, I know about limitations in iOS: iOS HTML5 Canvas toDataURL, but canvas is small, even 100×500px images are blank (it is 0,05MP, limit is 3MP). I use toDataURL() to send

问题 I've been looking for a way to store floats on WebGL textures. I've found some solutions on the internet, but those only deal with floats on the [0..1) range. I'd like to be able to store arbitrary floats, and, for that, such a function would need to be extended to also store the exponent (on the first byte, say). I don't quite understand how those work, though, so it is not obvious how to do so. In short: What is an efficient algorithm to pack a float into 4 bytes? 回答1: It's ungodly slow,

问题 How do I write a shader to draw a polygon in solid color and it's border in a different color. Basically I have a hexagons map in 3d and I need to be able to outline each hexagon with a black border, if user requests so. Would also be nice if I could control border width. Thanks. 回答1: Off the top of my head, one way would be to create a your hex with a 7th vertex in the center 1---2 /\ /\ / \ / \ 6----0----3 \ / \ / \/ \/ 5---4 Add texture coordinates where point 0 has UV = { 0, 0 } and

问题 Is there any way to change the opacity/alpha of all hierarchy (branch) rather than per each mesh material? 回答1: No. You can, however, use object.traverse() to set the opacity of an object's material and it's children. mesh.traverse( function( node ) { if( node.material ) { node.material.opacity = 0.5; node.material.transparent = true; } }); three.js r.56 来源： https://stackoverflow.com/questions/15214543/three-js-change-the-opacity-of-an-entire-branch

问题 What I'm looking is a flash alternative for mobile phones using html5. I was looking into SVG and it seems the only way to get hardware acceleration is to use CSS transforms on it. But CSS transforms aren't enough, I want to animate the actual nodes that make up a vector (ie, points on a path) so I could get more sophisticated character animation. To do this I was looking at some gui based editors. I checked what adobe has been up to and they seem to have killed Edge Animate and rebranded