FilesExpand file tree

master

/

color-triangles.js

Copy path

Blame

More file actions

Blame

More file actions

Latest commit

 

History

History

History

102 lines (75 loc) · 3.08 KB

master

/

color-triangles.js

Copy path

Top

File metadata and controls

• Code
• Blame

102 lines (75 loc) · 3.08 KB

Raw

Copy raw file

Download raw file

Open symbols panel

Edit and raw actions

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

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

88

89

90

91

92

93

94

95

96

97

98

99

100

//////////////////////////////////////////////////////////////////

//

// Add an additional color array to the VbO

// Note the pixel colors are interploated from the vertex colors by the

// fragment shader as a default behavior

//

// Han-Wei Shen (shen.94@osu.edu)

//

var gl;

var shaderProgram;

function initGL(canvas) {

try {

gl = canvas.getContext("experimental-webgl");

gl.viewportWidth = canvas.width;

gl.viewportHeight = canvas.height;

} catch (e) {

}

if (!gl) {

alert("Could not initialise WebGL, sorry :-(");

}

}

//f ************** Initialize VBO *************** -->

var squareVertexPositionBuffer;

var squareVertexColorBuffer;

function initBuffers() {

squareVertexPositionBuffer = gl.createBuffer();

gl.bindBuffer(gl.ARRAY_BUFFER, squareVertexPositionBuffer);

vertices = [

0.5, 0.5, 0.0,

-0.5, 0.5, 0.0,

0.5, -0.5, 0.0,

-0.5, -0.5, 0.0

];

gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);

squareVertexPositionBuffer.itemSize = 3; // 3 coordinates per vertex

squareVertexPositionBuffer.numItems = 4; // 4 vertices in the buffer

squareVertexColorBuffer = gl.createBuffer();

gl.bindBuffer(gl.ARRAY_BUFFER, squareVertexColorBuffer);

var colors = [

1.0, 0.0, 0.0,

0.0, 1.0, 0.0,

0.0, 0.0, 1.0,

1.0, 0.0, 0.0,

];

gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(colors), gl.STATIC_DRAW);

squareVertexColorBuffer.itemSize = 3;

squareVertexColorBuffer.numItems = 4;

}

function drawScene() {

var offset, stride;

gl.viewport(0, 0, gl.viewportWidth, gl.viewportHeight);

gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);

offset = 0; stride = 0;

gl.bindBuffer(gl.ARRAY_BUFFER, squareVertexPositionBuffer);

gl.vertexAttribPointer(shaderProgram.vertexPositionAttribute, squareVertexPositionBuffer.itemSize, gl.FLOAT, false, stride, offset);

gl.bindBuffer(gl.ARRAY_BUFFER, squareVertexColorBuffer);

gl.vertexAttribPointer(shaderProgram.vertexColorAttribute, squareVertexColorBuffer.itemSize, gl.FLOAT, false, offset, stride);

gl.drawArrays(gl.TRIANGLE_STRIP, offset, squareVertexPositionBuffer.numItems);

}

function webGLStart() {

var canvas = document.getElementById("code02-canvas");

initGL(canvas);

initShaders();

shaderProgram.vertexPositionAttribute = gl.getAttribLocation(shaderProgram, "aVertexPosition");

gl.enableVertexAttribArray(shaderProgram.vertexPositionAttribute);

shaderProgram.vertexColorAttribute = gl.getAttribLocation(shaderProgram, "aVertexColor");

gl.enableVertexAttribArray(shaderProgram.vertexColorAttribute);

initBuffers();

gl.clearColor(1.0, 1.0, 0.0, 1.0);

drawScene();

}

function BG(red, green, blue) {

gl.clearColor(red, green, blue, 1.0);

drawScene();

}