graphics - Animating lots of lines in WebGL -


forest

i'm trying animate scene @ 1280x720, 60 fps, antialiased. there ~500k triangles, 2 each tree branch. can't use gl.lines because angle.

to rough idea performance can expect, made test 1m of random triangles:

<!doctype html> <head>     <title>triangles</title>     <style>         html, body {             background: #000;             height: 100%;             margin: 0;         }          canvas {             width: 1280px;             height: 720px;             position: absolute;             margin: auto;             top: 0;             right: 0;             left: 0;             bottom: 0;         }     </style> </head> <body>     <script>     'use strict';      const trianglecount = 1e6;     const antialias = true;      const generatetriangles = (count, width, height) => {         const coords = new float32array(9 * count);         (var = 0; < coords.length;) {             const x = math.random() * 2 - 1;             const y = math.random() * 2 - 1;             const z = math.random() * 2 - 1;             const theta = math.random() * math.pi;              const ax = 10 * math.cos(theta) / width;             const ay = 10 * math.sin(theta) / height;             const bx = 10 * math.cos(theta + 0.3) / width;             const = 10 * math.sin(theta + 0.3) / height;              coords[i++] = x + ax; coords[i++] = y + ay; coords[i++] = z;             coords[i++] = x + bx; coords[i++] = y + by; coords[i++] = z;             coords[i++] = x - ax; coords[i++] = y - ay; coords[i++] = z;              coords[i++] = x - ax; coords[i++] = y - ay; coords[i++] = z;             coords[i++] = x - bx; coords[i++] = y - by; coords[i++] = z;             coords[i++] = x + ax; coords[i++] = y + ay; coords[i++] = z;         }         return coords;     };      const vertexshadersource = `         precision lowp float;         attribute vec3 aposition;         uniform float uwobble;         void main() {             float p = 1.0 / (0.3 * aposition.z - 1.4 + 0.1 * uwobble);             gl_position = vec4(p * aposition.x, p * aposition.y, aposition.z, 1.0);         }     `;      const fragmentshadersource = `         precision lowp float;         void main() {             float z = gl_fragcoord.z;             gl_fragcolor = vec4(1.2 * z, z * z, z, 1.0);         }     `;      const canvas = document.createelement('canvas');     document.body.appendchild(canvas);     canvas.width = canvas.clientwidth;     canvas.height = canvas.clientheight;     const gl = canvas.getcontext('webgl', {alpha: false, antialias});     const vertexshader = gl.createshader(gl.vertex_shader);     gl.shadersource(vertexshader, vertexshadersource);     gl.compileshader(vertexshader);     const fragmentshader = gl.createshader(gl.fragment_shader);     gl.shadersource(fragmentshader, fragmentshadersource);     gl.compileshader(fragmentshader);     const program = gl.createprogram();     gl.attachshader(program, vertexshader);     gl.attachshader(program, fragmentshader);     gl.linkprogram(program);     gl.useprogram(program);      const avertexposition = gl.getattriblocation(program, 'aposition');     gl.enablevertexattribarray(avertexposition);     const uwobble = gl.getuniformlocation(program, 'uwobble');     gl.uniform1f(uwobble, 1);      const vertices = generatetriangles(trianglecount, canvas.width, canvas.height);     const vertexbuffer = gl.createbuffer();     gl.bindbuffer(gl.array_buffer, vertexbuffer);     gl.bufferdata(gl.array_buffer, vertices, gl.static_draw);     gl.vertexattribpointer(avertexposition, 3, gl.float, false, 0, 0);      const render = (timestamp) => {         requestanimationframe(render);         gl.uniform1f(uwobble, math.sin(0.002 * timestamp));         gl.drawarrays(gl.triangles, 0, vertices.length / 3);     };     window.requestanimationframe(render);     </script> </body>

on macbook iris 1536 mb i'm getting 12 frames per second. there optimizations i'm missing, such alternative ways draw lines, faster antialiasing, magic flags? or limit of 1 can expect average gpu?


Comments

Post a Comment

Popular posts from this blog

get url and add instance to a model with prefilled foreign key :django admin -

Image
i have page in each contest shown in row. each row contains contest id , link other model names have foreign key contest. news model: class news(models.model): title = models.charfield(max_length=50, null=true) description = models.textfield() time = models.timefield( default= datetime.datetime.now().time()) contest = models.foreignkey(contest) i want use admin adding , changing these models. want when user clicks on 'news' has foreign key contest id=1, shows list of news value foreign key. use {% instance in instances %} <tr class="{% cycle 'row1' 'row2' %}"> <td>{{ instance.title }}</td> <td>{{ instance.starttime }}</td> <td>{{ instance.timespan }}</td> <td>{{ instance.date }}</td> <td><a href="/adm...
Read more

css - Make div keyboard-scrollable in jQuery Mobile? -

from can tell, although jquery-mobile-powered pages can contain divs overflow set scroll or auto, , these divs can scrolled one-screen bar or mouse wheel, cannot scrolled using arrow keys, page-up/page-down, or home/end. instead, official "page" div (with data-role="page") absorbs input. perhaps other divs can't acquire focus, i'm not sure. is there way around this? edit: jsfiddle of simple example: https://jsfiddle.net/qogz0shx/ <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.js"> </script> <link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.css"/> <style> #outer { overflow:scroll; height: 50vh; width: 50vw; } #inner { height: 500vh; width: 500vw; } ...
Read more

android - Keyboard hides my half of edit-text and button below it even in scroll view -

i having trouble keyboard covers edit-text , half of button in scroll view. here's layout , please tell me how should resolve problem. many questions on topic none of them s working me. <?xml version="1.0" encoding="utf-8"?> <linearlayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:background="@drawable/bg" android:layout_height="match_parent"> <scrollview android:layout_width="match_parent" android:fillviewport="true" android:layout_height="match_parent"> <relativelayout android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="vertical"> <linearlayout android:layout_width="match_parent" android:layout_height="w...
Read more