| Andrew Cooke | Contents | Latest | RSS | Twitter | 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

Lepl parser for Python.

Colorless Green.

Photography around Santiago.

SVG experiment.

Professional Portfolio

Calibration of seismometers.

Data access via web services.

Cache rewrite.

Extending OpenSSH.

C-ORM: docs, API.

Last 100 entries

Calling C From Fortran 95; Bjork DJ Set; Z3 Example With Python; Week 1; Useful Guide To Starting With IJulia; UK Election + Media; Review: Reinventing Organizations; Inline Assembly With Julia / LLVM; Against the definition of types; Dumb Crypto Paper; The Search For Quasi-Periodicity...; Is There An Alternative To Processing?; CARDIAC (CARDboard Illustrative Aid to Computation); The Bolivian Case Against Chile At The Hague; Clear, Cogent Economic Arguments For Immigration; A Program To Say If I Am Working; Decent Cards For Ill People; New Photo; Luksic And Barrick Gold; President Bachelet's Speech; Baltimore Primer; libxml2 Parsing Stream; configure.ac Recipe For Library Path; The Davalos Affair For Idiots; Not The Onion: Google Fireside Chat w Kissinger; Bicycle Wheels, Inertia, and Energy; Another Tax Fraud; Google's Borg; A Verion That Redirects To Local HTTP Server; Spanish Accents For Idiots; Aluminium Cans; Advice on Spray Painting; Female View of Online Chat From a Male; UX Reading List; S4 Subgroups - Geometric Interpretation; Fucking Email; The SQM Affair For Idiots; Using Kolmogorov Complexity; Oblique Strategies in bash; Curses Tools; Markov Chain Monte Carlo Without all the Bullshit; Email Para Matias Godoy Mercado; The Penta Affair For Idiots; Example Code To Create numpy Array in C; Good Article on Bias in Graphic Design (NYTimes); Do You Backup github?; Data Mining Books; SimpleDateFormat should be synchronized; British Words; Chinese Govt Intercepts External Web To DDOS github; Numbering Permutations; Teenage Engineering - Low Price Synths; GCHQ Can Do Whatever It Wants; Dublinesque; A Cryptographic SAT Solver; Security Challenges; Word Lists for Crosswords; 3D Printing and Speaker Design; Searchable Snowden Archive; XCode Backdoored; Derived Apps Have Malware (CIA); Rowhammer - Hacking Software Via Hardware (DRAM) Bugs; Immutable SQL Database (Kinda); Tor GPS Tracker; That PyCon Dongle Mess...; ASCII Fluid Dynamics; Brandalism; Table of Shifter, Cassette and Derailleur Compatability; Lenovo Demonstrates How Bad HTTPS Is; Telegraph Owned by HSBC; Smaptop - Sunrise (Music); Equation Group (NSA); UK Torture in NI; And - A Natural Extension To Regexps; This Is The Future Of Religion; The Shazam (Music Matching) Algorithm; Tributes To Lesbian Community From AIDS Survivors; Nice Rust Summary; List of Good Fiction Books; Constructing JSON From Postgres (Part 2); Constructing JSON From Postgres (Part 1); Postgres in Docker; Why Poor Places Are More Diverse; Smart Writing on Graceland; Satire in France; Free Speech in France; MTB Cornering - Where Should We Point Our Thrusters?; Secure Secure Shell; Java Generics over Primitives; 2014 (Charlie Brooker); How I am 7; Neural Nets Applied to Go; Programming, Business, Social Contracts; Distributed Systems for Fun and Profit; XML and Scheme; Internet Radio Stations (Curated List); Solid Data About Placebos; Half of Americans Think Climate Change Is a Sign of the Apocalypse; Saturday Surf Sessions With Juvenile Delinquents; Ssh, tty, stdout and stderr; Feathers falling in a vacuum; Santiago 30m Bike Route

© 2006-2015 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