8Observer8/index.html

## index.html
<!DOCTYPE html>

<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Example</title>
</head>

<body>
    <canvas id="renderCanvas" width="400" height="400"></canvas>

    <script type="importmap">
        {
            "imports": {
                "gl-matrix": "https://cdn.skypack.dev/gl-matrix@3.4.3"
            }
        }
    </script>

    <script type="module">
        import { vec3 } from "gl-matrix";

        const gl = document.getElementById("renderCanvas").getContext("webgl");
        gl.clearColor(0.2, 0.2, 0.2, 1);

        const vertShaderSrc =
            `attribute vec3 aPosition;
            attribute vec2 aTexCoord;
            varying vec2 vTexCoord;
            void main() {
                gl_Position = vec4(aPosition, 1.0);
                vTexCoord = aTexCoord;
            }`;

        const fragShaderSrc =
            `precision mediump float;
            uniform sampler2D uSampler;
            varying vec2 vTexCoord;
            void main() {
                gl_FragColor = texture2D(uSampler, vTexCoord);
            }`;

        const vShader = gl.createShader(gl.VERTEX_SHADER);
        gl.shaderSource(vShader, vertShaderSrc);
        gl.compileShader(vShader);
        // console.log(gl.getShaderInfoLog(vShader));
        const fShader = gl.createShader(gl.FRAGMENT_SHADER);
        gl.shaderSource(fShader, fragShaderSrc);
        gl.compileShader(fShader);
        // console.log(gl.getShaderInfoLog(fShader));
        const program = gl.createProgram();
        gl.attachShader(program, vShader);
        gl.attachShader(program, fShader);
        gl.bindAttribLocation(program, 0, "aPosition");
        gl.bindAttribLocation(program, 1, "aTexCoord");
        gl.linkProgram(program);
        // console.log(gl.getProgramInfoLog(program));
        gl.useProgram(program);

        const vertPositions = [
            -0.5, -0.5, 0,
            0.5, -0.5, 0,
            0, 0.5, 0
        ];
        const vertPosBuffer = gl.createBuffer();
        gl.bindBuffer(gl.ARRAY_BUFFER, vertPosBuffer);
        gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertPositions),
            gl.STATIC_DRAW);
        gl.vertexAttribPointer(0, 3, gl.FLOAT, false, 0, 0);
        gl.enableVertexAttribArray(0);

        const texCoords = [
            0, 1,
            1, 1,
            0.5, 0
        ];
        const texCoordBuffer = gl.createBuffer();
        gl.bindBuffer(gl.ARRAY_BUFFER, texCoordBuffer);
        gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(texCoords),
            gl.STATIC_DRAW);
        gl.vertexAttribPointer(1, 2, gl.FLOAT, false, 0, 0);
        gl.enableVertexAttribArray(1);

        function loadImage(url) {
            return new Promise(resolve => {
                const image = new Image();
                image.onload = () => {
                    resolve(image);
                };
                image.src = url;
            });
        }

        function draw() {
            gl.clear(gl.COLOR_BUFFER_BIT);
            gl.drawArrays(gl.TRIANGLES, 0, 3);
        }

        async function load() {
            const path = "TexturesCom_Wood_ParquetStrip_512_albedo.png";
            const image = await loadImage(path);
            const texture = gl.createTexture();
            gl.bindTexture(gl.TEXTURE_2D, texture);
            gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
            gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
            gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE,
                image);

            draw();
        }

        load();
    </script>
</body>

</html>
	<!DOCTYPE html>

	<html lang="en">

	<head>
	<meta charset="UTF-8">
	<title>Example</title>
	</head>

	<body>
	<canvas id="renderCanvas" width="400" height="400"></canvas>

	<script type="importmap">
	{
	"imports": {
	"gl-matrix": "https://cdn.skypack.dev/gl-matrix@3.4.3"
	}
	}
	</script>

	<script type="module">
	import { vec3 } from "gl-matrix";

	const gl = document.getElementById("renderCanvas").getContext("webgl");
	gl.clearColor(0.2, 0.2, 0.2, 1);

	const vertShaderSrc =
	`attribute vec3 aPosition;
	attribute vec2 aTexCoord;
	varying vec2 vTexCoord;
	void main() {
	gl_Position = vec4(aPosition, 1.0);
	vTexCoord = aTexCoord;
	}`;

	const fragShaderSrc =
	`precision mediump float;
	uniform sampler2D uSampler;
	varying vec2 vTexCoord;
	void main() {
	gl_FragColor = texture2D(uSampler, vTexCoord);
	}`;

	const vShader = gl.createShader(gl.VERTEX_SHADER);
	gl.shaderSource(vShader, vertShaderSrc);
	gl.compileShader(vShader);
	// console.log(gl.getShaderInfoLog(vShader));
	const fShader = gl.createShader(gl.FRAGMENT_SHADER);
	gl.shaderSource(fShader, fragShaderSrc);
	gl.compileShader(fShader);
	// console.log(gl.getShaderInfoLog(fShader));
	const program = gl.createProgram();
	gl.attachShader(program, vShader);
	gl.attachShader(program, fShader);
	gl.bindAttribLocation(program, 0, "aPosition");
	gl.bindAttribLocation(program, 1, "aTexCoord");
	gl.linkProgram(program);
	// console.log(gl.getProgramInfoLog(program));
	gl.useProgram(program);

	const vertPositions = [
	-0.5, -0.5, 0,
	0.5, -0.5, 0,
	0, 0.5, 0
	];
	const vertPosBuffer = gl.createBuffer();
	gl.bindBuffer(gl.ARRAY_BUFFER, vertPosBuffer);
	gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertPositions),
	gl.STATIC_DRAW);
	gl.vertexAttribPointer(0, 3, gl.FLOAT, false, 0, 0);
	gl.enableVertexAttribArray(0);

	const texCoords = [
	0, 1,
	1, 1,
	0.5, 0
	];
	const texCoordBuffer = gl.createBuffer();
	gl.bindBuffer(gl.ARRAY_BUFFER, texCoordBuffer);
	gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(texCoords),
	gl.STATIC_DRAW);
	gl.vertexAttribPointer(1, 2, gl.FLOAT, false, 0, 0);
	gl.enableVertexAttribArray(1);

	function loadImage(url) {
	return new Promise(resolve => {
	const image = new Image();
	image.onload = () => {
	resolve(image);
	};
	image.src = url;
	});
	}

	function draw() {
	gl.clear(gl.COLOR_BUFFER_BIT);
	gl.drawArrays(gl.TRIANGLES, 0, 3);
	}

	async function load() {
	const path = "TexturesCom_Wood_ParquetStrip_512_albedo.png";
	const image = await loadImage(path);
	const texture = gl.createTexture();
	gl.bindTexture(gl.TEXTURE_2D, texture);
	gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
	gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
	gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE,
	image);

	draw();
	}

	load();
	</script>
	</body>

	</html>