CPPAlien · June 16, 2022 08:29
diff --git a/webgl-first-example.html b/webgl-first-example.html
 <html>
  <body>
    <canvas id="c" width="400" height="300"></canvas>
  </body>
  <script id="vertex-shader-2d" type="notjs">
    attribute vec4 a_position;

    void main() {
      gl_Position = a_position;
    }
  </script>

  <script id="fragment-shader-2d" type="notjs">
    precision mediump float;

    void main() {
      gl_FragColor = vec4(1, 0, 0.5, 1);
    }
  </script>

  <script>
    const canvas = document.querySelector("#c");
    const gl = canvas.getContext("webgl");

    // 创建 shader
    function createShader(gl, type, source) {
      const shader = gl.createShader(type);
      gl.shaderSource(shader, source);
      gl.compileShader(shader);
      const sucess = gl.getShaderParameter(shader, gl.COMPILE_STATUS);
      if (sucess) {
        return shader;
      }
      console.log(gl.getShaderInfoLog(shader));
      gl.deleteShader(shader);
    }

    const vertexShaderSource = document.querySelector("#vertex-shader-2d").text;
    const fragmentShaderSource = document.querySelector("#fragment-shader-2d").text;

    const vertexShader = createShader(gl, gl.VERTEX_SHADER, vertexShaderSource);
    const fragmentShader = createShader(gl, gl.FRAGMENT_SHADER, fragmentShaderSource);

    // 使用 shader 创建 program
    function createProgram(gl, vertexShader, fragmentShader) {
      const program = gl.createProgram();
      gl.attachShader(program, vertexShader);
      gl.attachShader(program, fragmentShader);
      gl.linkProgram(program);

      const success = gl.getProgramParameter(program, gl.LINK_STATUS);
      if (success) {
        return program;
      }
      console.log(gl.getProgramInfoLog(program));
      gl.deleteProgram(program);
    }
    const program = createProgram(gl, vertexShader, fragmentShader);
    gl.useProgram(program);

    // 创建 buffer, gl.ARRAY_BUFFER 是一个绑定点，意味着在这个点标记的空间塞上这些内容
    const positionBuffer = gl.createBuffer();
    gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
    const positions = [
      0, 0,
      0, 0.5,
      0.7, 0,
    ];
    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(positions), gl.STATIC_DRAW);


    // 赋予 a_position 如何从 gl.ARRAY_BUFFER 取值的方法
    const positionAttributeLocation = gl.getAttribLocation(program, "a_position");
    gl.enableVertexAttribArray(positionAttributeLocation)

    const size = 2; //每次取两个
    const type = gl.FLOAT; // 32bit 的浮点
    const normalize = false; // 不需要 normalize
    const stride = 0; // 是否跨步，0时为 size * sizeof(type)
    const offset = 0; // 从这个 buffer 的那个位置区

    gl.vertexAttribPointer(
      positionAttributeLocation, size, type, normalize, stride, offset
    )

    // 开始绘制，3个点画一个三角形
    const primitiveType = gl.TRIANGLES;
    const drawOffset = 0;
    const count = 3;
    gl.drawArrays(primitiveType, drawOffset, count);
  </script>
 </html>
	<html>
	<body>
	<canvas id="c" width="400" height="300"></canvas>
	</body>
	<script id="vertex-shader-2d" type="notjs">
	attribute vec4 a_position;

	void main() {
	gl_Position = a_position;
	}
	</script>

	<script id="fragment-shader-2d" type="notjs">
	precision mediump float;

	void main() {
	gl_FragColor = vec4(1, 0, 0.5, 1);
	}
	</script>

	<script>
	const canvas = document.querySelector("#c");
	const gl = canvas.getContext("webgl");

	// 创建 shader
	function createShader(gl, type, source) {
	const shader = gl.createShader(type);
	gl.shaderSource(shader, source);
	gl.compileShader(shader);
	const sucess = gl.getShaderParameter(shader, gl.COMPILE_STATUS);
	if (sucess) {
	return shader;
	}
	console.log(gl.getShaderInfoLog(shader));
	gl.deleteShader(shader);
	}

	const vertexShaderSource = document.querySelector("#vertex-shader-2d").text;
	const fragmentShaderSource = document.querySelector("#fragment-shader-2d").text;

	const vertexShader = createShader(gl, gl.VERTEX_SHADER, vertexShaderSource);
	const fragmentShader = createShader(gl, gl.FRAGMENT_SHADER, fragmentShaderSource);

	// 使用 shader 创建 program
	function createProgram(gl, vertexShader, fragmentShader) {
	const program = gl.createProgram();
	gl.attachShader(program, vertexShader);
	gl.attachShader(program, fragmentShader);
	gl.linkProgram(program);

	const success = gl.getProgramParameter(program, gl.LINK_STATUS);
	if (success) {
	return program;
	}
	console.log(gl.getProgramInfoLog(program));
	gl.deleteProgram(program);
	}
	const program = createProgram(gl, vertexShader, fragmentShader);
	gl.useProgram(program);

	// 创建 buffer, gl.ARRAY_BUFFER 是一个绑定点，意味着在这个点标记的空间塞上这些内容
	const positionBuffer = gl.createBuffer();
	gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
	const positions = [
	0, 0,
	0, 0.5,
	0.7, 0,
	];
	gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(positions), gl.STATIC_DRAW);


	// 赋予 a_position 如何从 gl.ARRAY_BUFFER 取值的方法
	const positionAttributeLocation = gl.getAttribLocation(program, "a_position");
	gl.enableVertexAttribArray(positionAttributeLocation)

	const size = 2; //每次取两个
	const type = gl.FLOAT; // 32bit 的浮点
	const normalize = false; // 不需要 normalize
	const stride = 0; // 是否跨步，0时为 size * sizeof(type)
	const offset = 0; // 从这个 buffer 的那个位置区

	gl.vertexAttribPointer(
	positionAttributeLocation, size, type, normalize, stride, offset
	)

	// 开始绘制，3个点画一个三角形
	const primitiveType = gl.TRIANGLES;
	const drawOffset = 0;
	const count = 3;
	gl.drawArrays(primitiveType, drawOffset, count);
	</script>
	</html>