From 7dfb983176c49697b913151bca0d36cc61363d68 Mon Sep 17 00:00:00 2001 From: Konstantin8105 Date: Sun, 6 May 2018 11:07:26 +0300 Subject: [PATCH 1/3] add example 2D --- .gitignore | 2 + examples/README.md | 8 +++ examples/Simple2D/webgl.go | 110 +++++++++++++++++++++++++++++++++++ examples/Simple2D/webgl.html | 11 ++++ 4 files changed, 131 insertions(+) create mode 100644 .gitignore create mode 100644 examples/README.md create mode 100644 examples/Simple2D/webgl.go create mode 100644 examples/Simple2D/webgl.html diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..4e57eef --- /dev/null +++ b/.gitignore @@ -0,0 +1,2 @@ +*.js +*.js.map diff --git a/examples/README.md b/examples/README.md new file mode 100644 index 0000000..70372dc --- /dev/null +++ b/examples/README.md @@ -0,0 +1,8 @@ +# Examples + +1. `Simple2D` in according to [www.tutorialspoint.com](https://www.tutorialspoint.com/webgl/webgl_sample_application.htm) + + +# Links + +* [The WebGL API: 2D and 3D graphics for the web](https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API) diff --git a/examples/Simple2D/webgl.go b/examples/Simple2D/webgl.go new file mode 100644 index 0000000..a52e683 --- /dev/null +++ b/examples/Simple2D/webgl.go @@ -0,0 +1,110 @@ +package main + +import ( + "github.com/gopherjs/gopherjs/js" + "github.com/gopherjs/webgl" +) + +func main() { + // Step1: Prepare the canvas and get WebGL context + + document := js.Global.Get("document") + canvas := document.Call("getElementById", "my_Canvas") + + attrs := webgl.DefaultAttributes() + attrs.Alpha = false + + gl, err := webgl.NewContext(canvas, attrs) + if err != nil { + js.Global.Call("alert", "Error: "+err.Error()) + } + + // Step2: Define the geometry and store it in buffer objects + + vertices := [6]float32{-0.5, 0.5, -0.5, -0.5, 0.0, -0.5} + + // Create a new buffer object + vertex_buffer := gl.CreateBuffer() + + // Bind an empty array buffer to it + gl.BindBuffer(gl.ARRAY_BUFFER, vertex_buffer) + + // Pass the vertices data to the buffer + gl.BufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW) + + // Unbind the buffer + gl.BindBuffer(gl.ARRAY_BUFFER, nil) + + /* Step3: Create and compile Shader programs */ + + // Vertex shader source code + vertCode := `attribute vec2 coordinates;` + + `void main(void) {` + ` gl_Position = vec4(coordinates,0.0, 1.0);` + `}` + + //Create a vertex shader object + vertShader := gl.CreateShader(gl.VERTEX_SHADER) + + //Attach vertex shader source code + gl.ShaderSource(vertShader, vertCode) + + //Compile the vertex shader + gl.CompileShader(vertShader) + + //Fragment shader source code + fragCode := `void main(void) {` + `gl_FragColor = vec4(0.0, 0.0, 0.0, 0.1);` + `}` + + // Create fragment shader object + fragShader := gl.CreateShader(gl.FRAGMENT_SHADER) + + // Attach fragment shader source code + gl.ShaderSource(fragShader, fragCode) + + // Compile the fragment shader + gl.CompileShader(fragShader) + + // Create a shader program object to store combined shader program + shaderProgram := gl.CreateProgram() + + // Attach a vertex shader + gl.AttachShader(shaderProgram, vertShader) + + // Attach a fragment shader + gl.AttachShader(shaderProgram, fragShader) + + // Link both programs + gl.LinkProgram(shaderProgram) + + // Use the combined shader program object + gl.UseProgram(shaderProgram) + + /* Step 4: Associate the shader programs to buffer objects */ + + //Bind vertex buffer object + gl.BindBuffer(gl.ARRAY_BUFFER, vertex_buffer) + + //Get the attribute location + coord := gl.GetAttribLocation(shaderProgram, "coordinates") + + //point an attribute to the currently bound VBO + gl.VertexAttribPointer(coord, 2, gl.FLOAT, false, 0, 0) + + //Enable the attribute + gl.EnableVertexAttribArray(coord) + + /* Step5: Drawing the required object (triangle) */ + + // Clear the canvas + gl.ClearColor(0.5, 0.5, 0.5, 0.9) + + // Enable the depth test + gl.Enable(gl.DEPTH_TEST) + + // Clear the color buffer bit + gl.Clear(gl.COLOR_BUFFER_BIT) + + // Set the view port + gl.Viewport(0, 0, 300, 300) + + // Draw the triangle + gl.DrawArrays(gl.TRIANGLES, 0, 3) +} diff --git a/examples/Simple2D/webgl.html b/examples/Simple2D/webgl.html new file mode 100644 index 0000000..e7037af --- /dev/null +++ b/examples/Simple2D/webgl.html @@ -0,0 +1,11 @@ + + + + + WebGL Demo 2D + + + + + + From f11d7369be0fef15d00143bb2e9af101b45c23b9 Mon Sep 17 00:00:00 2001 From: Konstantin8105 Date: Sun, 6 May 2018 11:15:13 +0300 Subject: [PATCH 2/3] add picture --- examples/README.md | 1 + examples/Simple2D/simple2d.png | Bin 0 -> 1350 bytes 2 files changed, 1 insertion(+) create mode 100644 examples/Simple2D/simple2d.png diff --git a/examples/README.md b/examples/README.md index 70372dc..ca605c4 100644 --- a/examples/README.md +++ b/examples/README.md @@ -2,6 +2,7 @@ 1. `Simple2D` in according to [www.tutorialspoint.com](https://www.tutorialspoint.com/webgl/webgl_sample_application.htm) +![Simple2D](./Simple2D/simple2d.png) # Links diff --git a/examples/Simple2D/simple2d.png b/examples/Simple2D/simple2d.png new file mode 100644 index 0000000000000000000000000000000000000000..584fbc1032b8fd779a863c56f0b6f4579ce85b7b GIT binary patch literal 1350 zcmeAS@N?(olHy`uVBq!ia0y~yVAKF&RSuv4L(wM%X&}Xt?&#~tz_78O`%fY(kgt&J z5#-CjP^HGe(9pub@Czu^@PdJ%)PRBERRRNp)eHs(@q#(K0&Rd2OiAAEE)4(M`_JqL z@;LL|+=_uT$hu?()5NuBK!ODxks!eYF#eG3bRNiHFY)wsWq-uV#=&i}tznNdP>8dv zz%iYHf%!ks)G!A9*-B4UzApB-ly#M;*PDCj0M zZfRh>#3bgy9Wi`46$LLnzrA~_YkTsZ?YCudDeq&QeW&M5zh!+r;PTSjOTXCMknM~Oh;=EVtRMe`4^LSNtuLittE1H(IqTN~3+w{um zg*{89UcC%B6vX?rOe20}Tb0d}bwK5Er^0~B`Bk-n%G-;kW@$KTgsyBeYB2&bT{Qw% zwiUH}nv$jAso}e_ZBxr8Ak$aFb7kA7mLecCP{S3dw$%v84ApQ1s%@>>AL4w{$u@q~ z!kmS1`d0&X1@uqP(uiNN-P?4E!IjHPrA|q_dK$#Ll;>*!PxHXjro=IEp!b`bq&ly3=ORe4XjK}wGE7|3=Gtxzo2T!%}>cptHjh`Vh+*3Ya9zK v)EFc{HU#IVm6RtIr849K?a(a-+LfADoRMF0V%i5Upc)2GS3j3^P6 Date: Mon, 7 May 2018 21:24:37 +0300 Subject: [PATCH 3/3] after review --- {examples => example}/README.md | 0 {examples => example}/Simple2D/simple2d.png | Bin {examples => example}/Simple2D/webgl.go | 34 ++++++++++++-------- {examples => example}/Simple2D/webgl.html | 0 4 files changed, 20 insertions(+), 14 deletions(-) rename {examples => example}/README.md (100%) rename {examples => example}/Simple2D/simple2d.png (100%) rename {examples => example}/Simple2D/webgl.go (77%) rename {examples => example}/Simple2D/webgl.html (100%) diff --git a/examples/README.md b/example/README.md similarity index 100% rename from examples/README.md rename to example/README.md diff --git a/examples/Simple2D/simple2d.png b/example/Simple2D/simple2d.png similarity index 100% rename from examples/Simple2D/simple2d.png rename to example/Simple2D/simple2d.png diff --git a/examples/Simple2D/webgl.go b/example/Simple2D/webgl.go similarity index 77% rename from examples/Simple2D/webgl.go rename to example/Simple2D/webgl.go index a52e683..f490fcc 100644 --- a/examples/Simple2D/webgl.go +++ b/example/Simple2D/webgl.go @@ -35,23 +35,29 @@ func main() { // Unbind the buffer gl.BindBuffer(gl.ARRAY_BUFFER, nil) - /* Step3: Create and compile Shader programs */ + // Step3: Create and compile Shader programs // Vertex shader source code - vertCode := `attribute vec2 coordinates;` + - `void main(void) {` + ` gl_Position = vec4(coordinates,0.0, 1.0);` + `}` + vertCode := ` + attribute vec2 coordinates; + void main(void) { + gl_Position = vec4(coordinates,0.0, 1.0); + }` - //Create a vertex shader object + // Create a vertex shader object vertShader := gl.CreateShader(gl.VERTEX_SHADER) - //Attach vertex shader source code + // Attach vertex shader source code gl.ShaderSource(vertShader, vertCode) - //Compile the vertex shader + // Compile the vertex shader gl.CompileShader(vertShader) - //Fragment shader source code - fragCode := `void main(void) {` + `gl_FragColor = vec4(0.0, 0.0, 0.0, 0.1);` + `}` + // Fragment shader source code + fragCode := ` + void main(void) { + gl_FragColor = vec4(0.0, 0.0, 0.0, 0.1); + }` // Create fragment shader object fragShader := gl.CreateShader(gl.FRAGMENT_SHADER) @@ -77,21 +83,21 @@ func main() { // Use the combined shader program object gl.UseProgram(shaderProgram) - /* Step 4: Associate the shader programs to buffer objects */ + // Step 4: Associate the shader programs to buffer objects - //Bind vertex buffer object + // Bind vertex buffer object gl.BindBuffer(gl.ARRAY_BUFFER, vertex_buffer) - //Get the attribute location + // Get the attribute location coord := gl.GetAttribLocation(shaderProgram, "coordinates") - //point an attribute to the currently bound VBO + // Point an attribute to the currently bound VBO gl.VertexAttribPointer(coord, 2, gl.FLOAT, false, 0, 0) - //Enable the attribute + // Enable the attribute gl.EnableVertexAttribArray(coord) - /* Step5: Drawing the required object (triangle) */ + // Step5: Drawing the required object (triangle) // Clear the canvas gl.ClearColor(0.5, 0.5, 0.5, 0.9) diff --git a/examples/Simple2D/webgl.html b/example/Simple2D/webgl.html similarity index 100% rename from examples/Simple2D/webgl.html rename to example/Simple2D/webgl.html