WebGL 模板

1
2
3
4
5
6
7
8

body {
  margin: 0;
}
canvas {
  width: 100vw;
  height: 100vh;
  display: block;
}

1
2

<canvas id="canvas"></canvas>
<script src="https://webglfundamentals.org/webgl/resources/webgl-utils.js"></script>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

var vertexShader = `
  attribute vec4 a_Position;
  void main(){
    gl_Position = a_Position;
    gl_PointSize = 100.0;
  }

`

var fragmentShader = `
  void main(){
    gl_FragColor = vec4(1.0,0.5,1.0,1.0);

  }
`

function main(){
  var canvas = document.getElementById("canvas")
  var gl = canvas.getContext("webgl", {
  antialias: false,
  depth: false,
});
  const program = webglUtils.createProgramFromSources(gl, [vertexShader, fragmentShader]);
  var a_Position = gl.getAttribLocation(program,"a_Position");
  gl.vertexAttrib3f(a_Position,0.5,0,0);
  if(a_Position < 0){
    console.log("Can't find position")
  }

  gl.useProgram(program);
  gl.clearColor(0,0,0,1.0)
  gl.clear(gl.COLOR_BUFFER_BIT)
  gl.drawArrays(gl.POINTS,0,1);
  console.log("Hello world")
}

main()