Andrew Cooke | Contents | Latest | RSS | Previous | Next

C[omp]ute

Welcome to my blog, which was once a mailing list of the same name and is still generated by mail. Please reply via the "comment" links.

Always interested in offers/projects/new ideas. Eclectic experience in fields like: numerical computing; Python web; Java enterprise; functional languages; GPGPU; SQL databases; etc. Based in Santiago, Chile; telecommute worldwide. CV; email.

Personal Projects

Choochoo Training Diary

Last 100 entries

Surprise Paradox; [Books] Good Author List; [Computing] Efficient queries with grouping in Postgres; [Computing] Automatic Wake (Linux); [Computing] AWS CDK Aspects in Go; [Bike] Adidas Gravel Shoes; [Computing, Horror] Biological Chips; [Books] Weird Lit Recs; [Covid] Extended SIR Models; [Art] York-based Printmaker; [Physics] Quantum Transitions are not Instantaneous; [Computing] AI and Drum Machines; [Computing] Probabilities, Stopping Times, Martingales; bpftrace Intro Article; [Computing] Starlab Systems - Linux Laptops; [Computing] Extended Berkeley Packet Filter; [Green] Mainspring Linear Generator; Better Approach; Rummikub Solver; Chilean Poetry; Felicitations - Empowerment Grant; [Bike] Fixing Spyre Brakes (That Need Constant Adjustment); [Computing, Music] Raspberry Pi Media (Audio) Streamer; [Computing] Amazing Hack To Embed DSL In Python; [Bike] Ruta Del Condor (El Alfalfal); [Bike] Estimating Power On Climbs; [Computing] Applying Azure B2C Authentication To Function Apps; [Bike] Gearing On The Back Of An Envelope; [Computing] Okular and Postscript in OpenSuse; There's a fix!; [Computing] Fail2Ban on OpenSuse Leap 15.3 (NFTables); [Cycling, Computing] Power Calculation and Brakes; [Hardware, Computing] Amazing Pockit Computer; Bullying; How I Am - 3 Years Post Accident, 8+ Years With MS; [USA Politics] In America's Uncivil War Republicans Are The Aggressors; [Programming] Selenium and Python; Better Walking Data; [Bike] How Fast Before Walking More Efficient Than Cycling?; [COVID] Coronavirus And Cycling; [Programming] Docker on OpenSuse; Cadence v Speed; [Bike] Gearing For Real Cyclists; [Programming] React plotting - visx; [Programming] React Leaflet; AliExpress Independent Sellers; Applebaum - Twilight of Democracy; [Politics] Back + US Elections; [Programming,Exercise] Simple Timer Script; [News] 2019: The year revolt went global; [Politics] The world's most-surveilled cities; [Bike] Hope Freehub; [Restaurant] Mama Chau's (Chinese, Providencia); [Politics] Brexit Podcast; [Diary] Pneumonia; [Politics] Britain's Reichstag Fire moment; install cairo; [Programming] GCC Sanitizer Flags; [GPU, Programming] Per-Thread Program Counters; My Bike Accident - Looking Back One Year; [Python] Geographic heights are incredibly easy!; [Cooking] Cookie Recipe; Efficient, Simple, Directed Maximisation of Noisy Function; And for argparse; Bash Completion in Python; [Computing] Configuring Github Jekyll Locally; [Maths, Link] The Napkin Project; You can Masquerade in Firewalld; [Bike] Servicing Budget (Spring) Forks; [Crypto] CIA Internet Comms Failure; [Python] Cute Rate Limiting API; [Causality] Judea Pearl Lecture; [Security, Computing] Chinese Hardware Hack Of Supermicro Boards; SQLAlchemy Joined Table Inheritance and Delete Cascade; [Translation] The Club; [Computing] Super Potato Bruh; [Computing] Extending Jupyter; Further HRM Details; [Computing, Bike] Activities in ch2; [Books, Link] Modern Japanese Lit; What ended up there; [Link, Book] Logic Book; Update - Garmin Express / Connect; Garmin Forerunner 35 v 230; [Link, Politics, Internet] Government Trolls; [Link, Politics] Why identity politics benefits the right more than the left; SSH Forwarding; A Specification For Repeating Events; A Fight for the Soul of Science; [Science, Book, Link] Lost In Math; OpenSuse Leap 15 Network Fixes; Update; [Book] Galileo's Middle Finger; [Bike] Chinese Carbon Rims; [Bike] Servicing Shimano XT Front Hub HB-M8010; [Bike] Aliexpress Cycling Tops; [Computing] Change to ssh handling of multiple identities?; [Bike] Endura Hummvee Lite II; [Computing] Marble Based Logic; [Link, Politics] Sanity Check For Nuclear Launch; [Link, Science] Entropy and Life

© 2006-2017 Andrew Cooke (site) / post authors (content).

Switching from Triangles to Indexed Vertices in WebGL

From: andrew cooke <andrew@...>

Date: Tue, 13 Mar 2012 00:19:37 -0300

In WebGL you can draw data in two ways, calling drawArrays() or
drawElements().

The first of these expects you to load a buffer with a series of triangles,
described by the coordinates of their vertices.  The triangles can be in a
strip or fan, to save repeating some points, but even so, for a complex shape,
you start to need to repeat points.

So it can be more efficient to use the second approach, which uses two
buffers: the first contains *unique* vertices and the second contains indices
(think pointers) into the first to describe the triangles.  In this way, no
vertices are repeated (the issue is not so much memory, but avoiding un-needed
calls to the vertex shader, I think).

And you can find descriptions of the two approaches on the web, but it's not
clear exactly what you do to move between the two.  So here's what is
necessary:

 1 - instead of storing triangle vertices in an ARRAY_BUFFER, store the unique
     vertices.

 2 - allocate and load an ELEMENT_ARRAY_BUFFER for the indices.

 3 - don't change the use of the vertex attribute on the shader (you still
     need to enable it and associate it with the ARRAY_BUFFER).

 4 - bind to the ELEMENT_ARRAY_BUFFER and call drawElements.

I'm not sure how helpful the following code will be because a lot is hidden
behind my support library, but the two versions are present here (drawArrays
is commented out):

        program = wgl.getProgram('shader-fs', 'shader-vs'),
        vertices = wgl.newBuffer(gl.ARRAY_BUFFER),
        indices = wgl.newBuffer(gl.ELEMENT_ARRAY_BUFFER),
        vertex = program.getAttribute('vertex'),

        draw = function () {
            wgl.clear();
//            vertices.bindIn(vertex.attrIn(
//                wgl.bindTriangleVertices,
//                wgl.drawTriangleVertices
//            ));
            vertices.bindIn(vertex.attrIn(wgl.bindTriangleVertices));
            indices.bindIn(vertex.attrIn(wgl.drawTriangleIndices));
        };

//    vertices.bindIn(wgl.addVertices(heights.allTriangles()));
    vertices.bindIn(wgl.addVertices(heights.allTriangleVertices()));
    indices.bindIn(wgl.addIndices(heights.allTriangleIndices()));

    gl.uniformMatrix4fv(program.getUniform('mvp'), 
                        false, wgl.getMvp(2.5, -2, 7));
    gl.clearColor(1.0, 1.0, 1.1, 1.0);
    gl.enable(gl.DEPTH_TEST);

    draw();

Andrew

Comment on this post