Comments (1)
Here's working code:
import * as twgl from 'https://twgljs.org/dist/5.x/twgl-full.module.js';
function renderTriangle(el) {
const vs = `
attribute vec4 position;
void main() {
gl_Position = position;
}
`;
const fs = `
precision mediump float;
void main() {
// gl_FragColor is a special variable a fragment shader
// is responsible for setting
gl_FragColor = vec4(1, 0, 0.5, 1); // return redish-purple
}
`;
const gl = twgl.getWebGLContext(el);
const programInfo = twgl.createProgramInfo(gl, [vs, fs]);
const arrays = {
position: {
numComponents: 2,
data: [
0, 0,
0, 0.5,
0.7, 0,
],
}
};
gl.clearColor(0, 0, 0, 0);
gl.clear(gl.COLOR_BUFFER_BIT);
const bufferInfo = twgl.createBufferInfoFromArrays(gl, arrays);
// const positionAttributeLocation = gl.getAttribLocation(programInfo.program, "position");
twgl.resizeCanvasToDisplaySize(gl.canvas);
gl.viewport(0, 0, gl.canvas.width, gl.canvas.height);
gl.useProgram(programInfo.program);
// gl.enableVertexAttribArray(positionAttributeLocation);
twgl.setBuffersAndAttributes(gl, programInfo, bufferInfo);
// gl.vertexAttribPointer(
// positionAttributeLocation, 2, gl.FLOAT, false, 0, 0);
twgl.drawBufferInfo(gl, bufferInfo, gl.TRIANGLES, 3, 0);
// gl.drawArrays(gl.TRIANGLES, 0, 3);
}
renderTriangle(document.getElementById('c2'));
Live: https://jsgist.org/?src=4f95e62f8d18a568856dbc45462675ce
All I had to do was change the this 6
twgl.drawBufferInfo(gl, bufferInfo, gl.TRIANGLES, 6, 0);
to a 3
twgl.drawBufferInfo(gl, bufferInfo, gl.TRIANGLES, 3, 0);
normally I'd leave it off
twgl.drawBufferInfo(gl, bufferInfo);
gl.TRIANGLES
is the default and if you don't pass a count it will take it from bufferInfo.numElements wi
from twgl.js.
Related Issues (20)
- Dynamically changing attribute values, does it require to create bufferinfo everytime
- Last framebuffer's attached texture is empty? HOT 3
- Incorrect sentence structure.
- GPGPU particles example performance HOT 5
- resizeCanvasToDisplaySize in a web worker sets the width and height to 0 HOT 2
- Should not update the number of elements too HOT 1
- Inconsistent `type` type in `createAttribsFromArrays` HOT 8
- Defer checking shader compile status HOT 8
- Unsetting a texture in webgl2 HOT 3
- gl.useProgram(program); HOT 1
- bindTransformFeedbackInfo with offset HOT 3
- Get the jsdoc into the tsd HOT 2
- Incorrect TypeScript types of `createAugmentedTypedArray` HOT 2
- TEXTURE_COMPARE_MODE and sampler2DShadow HOT 4
- twgl-base package.json refers to non-existent `module` file HOT 2
- Cubemap uses only first texture HOT 3
- Rendering objects using drawObjectList causes skybox to not be rendered HOT 6
- `opt_locations` of createProgramInfo is missing from typescript bindings HOT 2
- webgpu support ? HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from twgl.js.