rdm/purple-triangle.ijs

## purple-triangle.ijs
webgl_close=: {{ wd'pclose'}}
wd bind{{)n
  pc webgl; cc w webview;
  pmove 0 0 300 300;
  pshow;
  set w html *
<html><head><title>test</title></head>
  <script>
  function run(){
    console.log('hi');
    var canvas= document.querySelector("#c");
    var gl= canvas.getContext("webgl");
    var vshader= createShader(gl, gl.VERTEX_SHADER, "attribute vec4 pos;void main(){gl_Position=pos;}");
    var fshader= createShader(gl, gl.FRAGMENT_SHADER, `
      precision mediump float;
      void main() {
        gl_FragColor= vec4(1,0,0.5,1);
      }`);
    function createShader(gl, typ, src) {
      var shader= gl.createShader(typ);
      gl.shaderSource(shader, src);
      gl.compileShader(shader);
      if (gl.getShaderParameter(shader, gl.COMPILE_STATUS)) return shader;
      console.log(gl.getShaderInfoLog(shader));
      gl.deleteShader(shader);
    }
    var program= gl.createProgram();
    gl.attachShader(program, vshader);
    gl.attachShader(program, fshader);
    gl.linkProgram(program);
    if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
      console.log(gl.getProgramInfoLog(program));
      gl.deleteProgram(program);
    }
    var posAttribLocation= gl.getAttribLocation(program, "pos");
    var posBuffer= gl.createBuffer();
    gl.bindBuffer(gl.ARRAY_BUFFER, posBuffer);
    var positions= [0,0,   0,0.5,   0.7,0,];
    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(positions), gl.STATIC_DRAW);
    gl.viewport(0,0,gl.canvas.width,gl.canvas.height);
    gl.clearColor(0,0,0,0);
    gl.clear(gl.COLOR_BUFFER_BIT);
    gl.useProgram(program);
    gl.enableVertexAttribArray(posAttribLocation);
    gl.bindBuffer(gl.ARRAY_BUFFER, posBuffer);
    gl.vertexAttribPointer(posAttribLocation, 2, gl.FLOAT, false, 0, 0);
    gl.drawArrays(gl.TRIANGLES, 0, 3);
  }
  </script>
</head><body onload="run()">
  <canvas id="c"></canvas>
</body></html>
}}
	webgl_close=: {{ wd'pclose'}}
	wd bind{{)n
	pc webgl; cc w webview;
	pmove 0 0 300 300;
	pshow;
	set w html *
	<html><head><title>test</title></head>
	<script>
	function run(){
	console.log('hi');
	var canvas= document.querySelector("#c");
	var gl= canvas.getContext("webgl");
	var vshader= createShader(gl, gl.VERTEX_SHADER, "attribute vec4 pos;void main(){gl_Position=pos;}");
	var fshader= createShader(gl, gl.FRAGMENT_SHADER, `
	precision mediump float;
	void main() {
	gl_FragColor= vec4(1,0,0.5,1);
	}`);
	function createShader(gl, typ, src) {
	var shader= gl.createShader(typ);
	gl.shaderSource(shader, src);
	gl.compileShader(shader);
	if (gl.getShaderParameter(shader, gl.COMPILE_STATUS)) return shader;
	console.log(gl.getShaderInfoLog(shader));
	gl.deleteShader(shader);
	}
	var program= gl.createProgram();
	gl.attachShader(program, vshader);
	gl.attachShader(program, fshader);
	gl.linkProgram(program);
	if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
	console.log(gl.getProgramInfoLog(program));
	gl.deleteProgram(program);
	}
	var posAttribLocation= gl.getAttribLocation(program, "pos");
	var posBuffer= gl.createBuffer();
	gl.bindBuffer(gl.ARRAY_BUFFER, posBuffer);
	var positions= [0,0, 0,0.5, 0.7,0,];
	gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(positions), gl.STATIC_DRAW);
	gl.viewport(0,0,gl.canvas.width,gl.canvas.height);
	gl.clearColor(0,0,0,0);
	gl.clear(gl.COLOR_BUFFER_BIT);
	gl.useProgram(program);
	gl.enableVertexAttribArray(posAttribLocation);
	gl.bindBuffer(gl.ARRAY_BUFFER, posBuffer);
	gl.vertexAttribPointer(posAttribLocation, 2, gl.FLOAT, false, 0, 0);
	gl.drawArrays(gl.TRIANGLES, 0, 3);
	}
	</script>
	</head><body onload="run()">
	<canvas id="c"></canvas>
	</body></html>
	}}