WebGL

Drawing many unique triangles with a single draw call (for better performance)?

由 落爺英雄遲暮 提交于 2019-12-11 12:44:42
问题 Here is a fiddle of the simplest case: http://jsfiddle.net/headchem/r28mm/10/ Is there any way to avoid calling this line for every single triangle I wish to draw? gl.drawArrays(gl.TRIANGLES, 0, numItems); As a learning exercise, I'm trying to create a 2D game out of simple colored triangles. I'd like to put several hundred moving triangles on screen each frame, but my framerate is very slow with my current attempts. I suspect it's because of the hundreds of drawArrays() calls I am making

Clipping images in Webgl

由 ╄→гoц情女王★ 提交于 2019-12-11 12:26:58
问题 The 2-D canvas provides an api called draw image : context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height); where sx is the position from where the image clipping starts . http://www.w3schools.com/tags/canvas_drawimage.asp, I am trying to use webgl to render a 2D image using texImage2D . i wanted to check if there is a way to implement clipping with webgl . I am using the following tutorial to render 2d images with webgl. http://webglfundamentals.org/webgl/lessons/webgl-image-processing

JavaScript WebGL RGBA array to screen?

由 那年仲夏 提交于 2019-12-11 11:53:25
问题 I am attempting to render pixels in RGBA format to a WebGL canvas. I have this canvas: <canvas id="cv" width="100" height="100"></canvas> With the following initialization code for a red rectangle to render: var w = 100; var h = 100; var img = new Uint8Array(w * h * 4); for (var i = 0; i < img.length; i += 4) { img[i + 0] = 255; // r img[i + 1] = 0; // g img[i + 2] = 0; // b img[i + 3] = 255; // a } Now I attempt to render this array to the WebGL canvas with the following code: var cv =

webGL : Rotation of a rectangle about a point along Y axis

由 蓝咒 提交于 2019-12-11 11:44:24
问题 Assume I have a rectangle having 4 vertices (x1,y1), (x2,y2) (x3,y3) and (x4,y4) . These vertices are in clockwise order.The rectangle is oriented like (x1,y1) is the top most left side corner and (x3,y3) is the bottom most Right Corner. Now i want to rotate the rectangle around one of the edge i,e along the edge that includes (x2,y2) and (x3,y3).I want to achieve this effect in Shaders by rotating two Vertices (x1,y1) and (x4,y4). My question is What is the formula for Rotating a point (x1

three.js - move camera inside tube geometry

由 大兔子大兔子 提交于 2019-12-11 11:25:18
问题 In a 3d scene tube geometry is built by loading 200 points as JSON data from external javascript file. Below is the complete code: <!DOCTYPE html> <html lang="en"> <head> <title>3d Model using HTML5 and three.js</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"> <style> body { font-family: Monospace; background-color: #f0f0f0; margin: 0px; overflow: hidden; } #Find_panel { position: absolute; right: 5px;

How to render images in WebGL from ArrayBuffer

由 和自甴很熟 提交于 2019-12-11 11:24:04
问题 I am having a image that I am reading in server side and pushing to web browser via AJAX call. I have a requirement where I have to render them line by line using WebGL. For Example : Image is 640X480 where 640 is width and 480 is height. Now the total number of pixels will be 640*480 = 307200 pixels. So, I want to render the whole image in 640(total width) intervals in a loop using WebGL. Now I have texture2D(as per my knowledge) in webgl to do so, but not getting any idea of where to start

JavaScript performance warmup

由 那年仲夏 提交于 2019-12-11 11:07:08
问题 I'm creating a WebGL game and it's really much faster after some time using it. Every time I run it for the first time it's slow and stutters. Would running some CPU intensive code for few seconds first prepare browser to use it's full power? I'm already running ammo.js in a worker which gives an enormous boost, but first few minutes of playing are still much slower. Could this be my laptop strategy to manage power? 回答1: I can think of 4 things: The browsers use a technique called JIT (Just

Three.JS - how to set rotation axis

由 …衆ロ難τιáo~ 提交于 2019-12-11 11:00:53
问题 So I've been playing around with Three.JS (graphics/anim not my strong point) and came up with this, adapted from a tutorial: Here's a JS Fiddle As you can see, I'm almost certainly a 3D animation genius. I digress... My question is: how to get the objects to rotate about their centre - not, as currently, about an extremity? I'm conscious of the particle.rotation.set method but I don't know what values to pass and I can't seem to find this method in the Three.JS documentation. Looking around,

Why is RenderingContext.drawElements clearing the screen before it draws?

由 陌路散爱 提交于 2019-12-11 10:27:00
问题 Is RenderingContext.drawElements correct when it clears the screen before it draws? Consider these screenshots that show a step across a call to drawElements with the object already drawn being erased. 回答1: WebGL effectively clears the screen after the page has been composited. When you're stepping through stuff one line at a time it's going to be composited every time you stop. If you don't want it to be cleared ask for preserveDrawingBuffer: true when you create the WebGL context as in gl =

WebGL shader attribute is not being passed accurately

由 旧巷老猫 提交于 2019-12-11 09:14:33
问题 I'm attempting to adopt the threejs example for wireframes ( https://threejs.org/examples/?q=wire#webgl_materials_wireframe ) using WebGL instancing. This simple reproduction codepen ( https://codepen.io/ubermario/pen/gzByjP?editors=1000 ) shows that a wireframed cube is rendered when a 'center' attribute is passed to the vertex/fragment shaders with THREE.BufferAttribute. However, it is not renedered as wireframe when the 'center' attribute is passed to the same shaders with THREE
订阅 WebGL