Package Exports
- triangle-draw
- triangle-draw/index.js
This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (triangle-draw) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.
Readme
triangle-draw
quickly draw a filled triangle directly onto a RGBA pixel buffer, filled with interpolated vertex colors, or textures.
uses a modified version of npm points-in-triangle
to efficiently enumerate points in the triangle.
you can use this to render basic graphics without involving the GPU.
Installation
npm i triangle-draw
Usage
minimal usage
var td = require('triangle-draw');
//triangle = [[x,y],[x,y],[x,y]]
//color = [255,255,255] for white etc
//buffer = RGBA pixel int array[width*height*4]
//draw solid color triangle
td.drawTriangle(triangle, color, buffer, width, height, edgesOnly=false);
//draw triangle with vertex colors [fill colors are interpolated via barycentric coordinates]
td.drawTriangleColored(triangle, colors, buffer, width, height, edgesOnly=false);
//draw triangle with texture
td.drawTriangleTextured(triangle, uvs, buffer, width, height, textureBuffer, texWidth, texHeight, edgesOnly=false);
//if you have a flattened arr of 2d triangles...
//trianglesArr = [x,y, x,y, x,y, x,y, x,y, x,y ... ]
td.drawTriangle_flat(trianglesArr, triangleIndex, color, buffer, width, height, edgesOnly=false);
td.drawTriangleColored_flat(trianglesArr, triangleIndex, colors, buffer, width, height, edgesOnly=false);
td.drawTriangleTextured_flat(trianglesArr, triangleIndex, uvs, buffer, width, height, textureBuffer, texWidth, texHeight, edgesOnly=false);
//using a depth buffer...
//drawTriangleColored_flat_depth(triArrFlat, triangleIndex, triangleDepths, triangleVertexColors, bufferDepth, w, h, callback, edgesOnly=false)
//set edgesOnly=true to render wireframes...
//here we draw 100 random triangles and display the result with SDL
var td = require('triangle-draw');
var drawTriangleColored = td.drawTriangleColored;
var sdl = require('@kmamal/sdl')
var window = sdl.video.createWindow({ resizable: true })
var { width, height } = window
var stride = width * 4
var buffer = Buffer.alloc(stride * height)
function rndPt2d(){ //create random 2d point
return [
Math.floor(Math.random()*width*1.5-width*0.25),
Math.floor(Math.random()*height*1.5-height*0.25)
]
}
function renderTriangles(){
var numTris = 100;
for(var i=0;i<numTris;i++){
var triangle = [rndPt2d(),rndPt2d(),rndPt2d()];
var colorA = [255,0,0];
var colorB = [0,255,0];
var colorC = [0,0,255];
var colors = [colorA, colorB, colorC];
td.drawTriangleColored(triangle, colors, buffer, width, height);
}
window.render(width, height, stride, 'rgba32', buffer)
}
renderTriangles();
result
Drawing triangles with textures
var imageSync = require('image-sync');
//read the image data
var textureData = imageSync.read('./earth.png'); //{width, height, data, saveAs}
//textureData is flat pixels buffer [r,g,b,a, r,g,b,a ...]
var uvs = [[0,0],[0,1],[1,1]];
td.drawTriangleTextured(triangle, uvs, buffer, width, height, textureData.data, textureData.width, textureData.height);
Result
Texture