# Create 3D Graphics in JavaScript Using WebGL
_by Keith Peters_
In this course, we’ll get started creating content with WebGL without any frameworks. You’ll write raw JavaScript code and shaders in GLSL. This intro course covers setting up WebGL in an HTML application and learning the basics of 3d vertices, shaders, drawing modes, animation, interaction and transformations.
Each lesson's code is in its corresponding lesson folder. Plunks are drawn from the lesson's branch.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
</head>
<body>
<canvas id="canvas" width="600" height="600"></canvas>
<script src="lib/script.js"></script>
</body>
</html>
var gl,
shaderProgram;
initGL();
createShaders();
draw();
function initGL() {
var canvas = document.getElementById("canvas");
console.log(canvas);
gl = canvas.getContext("webgl");
gl.viewport(0, 0, canvas.width, canvas.height);
gl.clearColor(1, 1, 1, 1);
}
function createShaders() {
var vs = "";
vs += "void main(void) {";
vs += " gl_Position = vec4(0.5, 0.5, 0.0, 1.0);";
vs += " gl_PointSize = 100.0;";
vs += "}";
var vertexShader = gl.createShader(gl.VERTEX_SHADER);
gl.shaderSource(vertexShader, vs);
gl.compileShader(vertexShader);
var fs = "";
fs += "void main(void) {";
fs += " gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);";
fs += "}";
var fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
gl.shaderSource(fragmentShader, fs);
gl.compileShader(fragmentShader);
shaderProgram = gl.createProgram();
gl.attachShader(shaderProgram, vertexShader);
gl.attachShader(shaderProgram, fragmentShader);
gl.linkProgram(shaderProgram);
gl.useProgram(shaderProgram);
}
function draw() {
gl.clear(gl.COLOR_BUFFER_BIT);
gl.drawArrays(gl.POINTS, 0, 1);
}