Computer Graphics Lab1

Lab1

1.test.html+triangle.js

绘制一个红色的三角形

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
<!--test.html-->
<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
		<title>Chapter 1. First WebGL Demo</title>
		<!-- 顶点着色器和片元着色器代码 -->
		<script id="vertex-shader" type="x-shader/x-vertex">
			#version 300 es
			in vec4 vPosition;
			void main()
			{
				gl_Position = vPosition;
			}
		</script>
		<script id="fragment-shader" type="x-shader/x-fragment">
			#version 300 es
			precision mediump float;
			out vec4  fColor;
			void main()
			{
				fColor = vec4( 1.0, 0.0, 0.0, 1.0 );
			}
		</script>
		<!-- 一组相关的JS库 -->
		<script type="text/javascript" src="common/webgl-utils.js"></script>
		<script type="text/javascript" src="common/initShaders.js"></script>
		<script type="text/javascript" src="common/glMatrix-0.9.5.min.js"></script>
		<!-- 绘制三角形的JS代码 -->
		<script type="text/javascript" src="js/triangle.js"></script>
	</head>
	<body>
		<canvas id="triangle-canvas" style="border:none;" width="500" height="500"></canvas>
	</body>
</html>
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
39
40
41
42
// triangle.js
"use strict";

var gl;
var points;

window.onload = function init(){
	var canvas = document.getElementById( "triangle-canvas" );
	gl = canvas.getContext("webgl2");
	if( !gl ){
		alert( "WebGL isn't available" );
	}

	// 三个顶点定义
	points = new Float32Array([
		-1.0, -1.0, 
		 0.0,  1.0, 
		 1.0, -1.0, 
	]);

	// 设置视口和背景色
	gl.viewport( 0, 0, canvas.width, canvas.height );
	gl.clearColor( 1.0, 1.0, 1.0, 1.0 );

	// 初始化着色器并传递顶点数据
	var program = initShaders( gl, "vertex-shader", "fragment-shader" );
	gl.useProgram( program );
	var bufferId = gl.createBuffer();
	gl.bindBuffer( gl.ARRAY_BUFFER, bufferId );
	gl.bufferData( gl.ARRAY_BUFFER, points, gl.STATIC_DRAW );

	var vPosition = gl.getAttribLocation( program, "vPosition" );
	gl.vertexAttribPointer( vPosition, 2, gl.FLOAT, false, 0, 0 );
	gl.enableVertexAttribArray( vPosition );

	render();
}

function render(){
	gl.clear( gl.COLOR_BUFFER_BIT );
	gl.drawArrays( gl.TRIANGLES, 0, 3 );// 绘制三角形
}

test.html页面链接

2.taska.html+triangle.js

在test.html的基础上，改动片元着色器中的输出颜色变量

1
2
3
4
5
6
<!--taska.html-->
void main()
{
    fColor = vec4( 0.0, 1.0, 0.0, 1.0 );// 将三角形颜色设置绿色
    //fColor = vec4( 0.0, 0.0, 1.0, 1.0 );// 将三角形颜色设置为蓝色
}

taska.html页面链接

3.taskb.html+square.js

绘制一个紫色的四边形

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
39
40
41
42
43
44
45
46
47
48
49
// square.js
window.onload = function init(){
	var canvas = document.getElementById( "square-canvas" );
	gl = canvas.getContext("webgl2");
	if( !gl ){
		alert( "WebGL isn't available" );
	}

	// Four Vertices
	var points = new Float32Array([
		-1.0, -1.0,
		 1.0, -1.0,
		 1.0,  1.0,
		-1.0,  1.0,
	]);

	var colors=new Float32Array([
		1.0, 1.0, 0.0, 1.0,
	]);

	gl.viewport( 0, 0, canvas.width/2, canvas.height/2);
	gl.clearColor( 1.0, 1.0, 1.0, 1.0 );

	var program = initShaders( gl, "vertex-shader", "fragment-shader" );
	gl.useProgram( program );

	var bufferId = gl.createBuffer();
	gl.bindBuffer( gl.ARRAY_BUFFER, bufferId );
	gl.bufferData( gl.ARRAY_BUFFER, points, gl.STATIC_DRAW );

	var vPosition = gl.getAttribLocation( program, "vPosition" );
	gl.vertexAttribPointer( vPosition, 2, gl.FLOAT, false, 0, 0 );
	gl.enableVertexAttribArray( vPosition );
	
	var cBuffer = gl.createBuffer();
	gl.bindBuffer(gl.ARRAY_BUFFER, cBuffer);
	gl.bufferData(gl.ARRAY_BUFFER, colors, gl.STATIC_DRAW);

	var vColor = gl.getAttribLocation(program, "vColor");
	gl.vertexAttribPointer(vColor, 4, gl.FLOAT, false, 0, 0);
	gl.enableVertexAttribArray(vColor);
	
	render();
}

function render(){
	gl.clear( gl.COLOR_BUFFER_BIT );
	gl.drawArrays( gl.TRIANGLE_FAN, 0, 4 );
}

taskb.html页面链接

4.taskc.html+trisquare.js

绘制三角形和四边形且颜色相同

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
//trisquare.js
window.onload = function init(){
	var canvas = document.getElementById( "trisquare-canvas" );
	gl = canvas.getContext("webgl2");
	if( !gl ){
		alert( "WebGL isn't available" );
	}

	points = new Float32Array([
		-0.5,  0.5,
		-1.0, -0.5,
		 0.0, -0.5,
		 1.0, -0.5,
		 1.0,  0.5,
		 0.0,  0.5
	]);

	gl.viewport( 0, 0, canvas.width, canvas.height );
	gl.clearColor( 1.0, 1.0, 1.0, 1.0 );

	var program = initShaders( gl, "vertex-shader", "fragment-shader" );
	gl.useProgram( program );

	var bufferId = gl.createBuffer();
	gl.bindBuffer( gl.ARRAY_BUFFER, bufferId );
	gl.bufferData( gl.ARRAY_BUFFER, points, gl.STATIC_DRAW );

	var vPosition = gl.getAttribLocation( program, "vPosition" );
	gl.vertexAttribPointer( vPosition, 2, gl.FLOAT, false, 0, 0 );
	gl.enableVertexAttribArray( vPosition );
	render();
}

function render(){
	gl.clear( gl.COLOR_BUFFER_BIT );
	gl.drawArrays( gl.TRIANGLES, 0, 3 );
	gl.drawArrays( gl.TRIANGLE_FAN, 2, 4 );
}

taskc.html页面链接

5.taskd.html+trisquarenc.js

将三角形和四边形设置为不同颜色

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
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
//trisquarenc.js
window.onload = function init() {
    var canvas = document.getElementById("trisquare-canvas");
	gl = canvas.getContext("webgl2");
	if( !gl ){
		alert( "WebGL isn't available" );
	}

    var vertices1 = new Float32Array([
        -0.5, 0.5,
        -1.0, -0.5,
        0.0, -0.5
    ]);

    var vertices2 = new Float32Array([
        0.0, -0.5,
        1.0, -0.5,
        1.0, 0.5,
        1.0, 0.5,
        0.0, 0.5,
        0.0, -0.5
    ]);
	
    gl.viewport(0, 0, canvas.width, canvas.height);
    gl.clearColor(1.0, 1.0, 1.0, 1.0);

    var program1 = initShaders(gl, "vertex-shader", "fragment1-shader");
    gl.useProgram(program1);

    var bufferId1 = gl.createBuffer();
    gl.bindBuffer(gl.ARRAY_BUFFER, bufferId1);
    gl.bufferData(gl.ARRAY_BUFFER, vertices1, gl.STATIC_DRAW);

    var vPosition1 = gl.getAttribLocation(program1, "vPosition");
    gl.vertexAttribPointer(vPosition1, 2, gl.FLOAT, false, 0, 0);
    gl.enableVertexAttribArray(vPosition1);
    render1();

    var program2 = initShaders( gl, "vertex-shader", "fragment2-shader" );
    gl.useProgram( program2 );

    var bufferId2 = gl.createBuffer();
    gl.bindBuffer(gl.ARRAY_BUFFER, bufferId2);
    gl.bufferData(gl.ARRAY_BUFFER, vertices2, gl.STATIC_DRAW);

    var vPosition2 = gl.getAttribLocation( program2, "vPosition" );
    gl.vertexAttribPointer( vPosition2, 2, gl.FLOAT, false, 0, 0 );
    gl.enableVertexAttribArray( vPosition2 );
    render2();
}
function render1() {
    gl.clear(gl.COLOR_BUFFER_BIT);
    gl.drawArrays(gl.TRIANGLES, 0, 3);
}
function render2() {
    gl.drawArrays(gl.TRIANGLES, 0, 6);
}

taskd.html页面链接

6.taske.html+trianglecolor.js

绘制一个颜色渐变的三角形

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
39
40
41
42
43
44
45
46
47
//trianglecolor.js
window.onload = function init(){
	var canvas = document.getElementById( "triangle-canvas" );
	gl = canvas.getContext("webgl2");
	if( !gl ){
		alert( "WebGL isn't available" );
	}

	var vertices = new Float32Array([
		-1.0, -1.0, 
		 1.0, -1.0, 
		 0.0,  1.0, 
	]);

	var vertcolors = new Float32Array([
		1.0, 0.0, 0.0,
		0.0, 1.0, 0.0,
		0.0, 0.0, 1.0
	]);
	gl.viewport( 0, 0, canvas.width, canvas.height );
	gl.clearColor( 1.0, 1.0, 1.0, 1.0 );

	var program = initShaders( gl, "vertex-shader", "fragment-shader" );
	gl.useProgram( program );

	var bufferId = gl.createBuffer();
	gl.bindBuffer( gl.ARRAY_BUFFER, bufferId );
	gl.bufferData( gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW );

	var aPosition = gl.getAttribLocation( program, "aPosition" );
	gl.vertexAttribPointer( aPosition, 2, gl.FLOAT, false, 0, 0 );
	gl.enableVertexAttribArray( aPosition );

	var cbufferId = gl.createBuffer();
	gl.bindBuffer( gl.ARRAY_BUFFER, cbufferId );
	gl.bufferData( gl.ARRAY_BUFFER, vertcolors, gl.STATIC_DRAW );

	var aColor = gl.getAttribLocation( program, "aColor" );
	gl.vertexAttribPointer( aColor, 3, gl.FLOAT, false, 0, 0 );
	gl.enableVertexAttribArray( aColor );

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

taske.html页面链接

以上所有完整代码在我的github库存放

Computer Graphics
#html #javascript #WebGL
Computer Graphics Lab1
https://curreny.github.io/2024/09/12/post1/
作者
Curreny
发布于
2024年9月12日
许可协议