Skip to content
Snippets Groups Projects
Commit d3fd2850 authored by LEE WON WOO's avatar LEE WON WOO
Browse files

check

parents
Branches master
No related tags found
No related merge requests found
Pipeline #1443 failed
01_HelloAPI/01_HelloAPI/HelloAPI.png

11.1 KiB

:Title:
HelloAPI
:ShortDescription:
Draw a triangle to the screen using hardware acceleration.
:FullDescription:
A basic tutorial that guides the user, step-by-step, through the process of initializing a window using :API:, drawing a triangle in it using hardware acceleration, and then terminating the window.
:Controls:
- Esc - Close the application
:APIS:
WebGL
var gl;
function testGLError(functionLastCalled) {
/*
gl.getError returns the last error that occurred using WebGL, not necessarily the status of the last called function. The user
has to check after every single WebGL call or at least once every frame. Usually this would be for debugging only, but for this
example is is enabled always.
*/
var lastError = gl.getError();
if (lastError != gl.NO_ERROR) {
alert(functionLastCalled + " failed (" + lastError + ")");
return false;
}
return true;
}
function initialiseGL(canvas) {
try {
// Try to grab the standard context. If it fails, fallback to experimental
gl = canvas.getContext("webgl") || canvas.getContext("experimental-webgl");
gl.viewport(0, 0, canvas.width, canvas.height);
}
catch (e) {
}
if (!gl) {
alert("Unable to initialise WebGL. Your browser may not support it");
return false;
}
return true;
}
var shaderProgram;
function initialiseBuffer() {
/* Concept: Vertices
When rendering a polygon or model to screen, WebGL has to be told where to draw the object, and more fundamentally what shape
it is. The data used to do this is referred to as vertices, points in 3D space which are usually collected into groups of three
to render as triangles. Fundamentally, any advanced 3D shape in WebGL is constructed from a series of these vertices - each
vertex representing one corner of a polygon.
*/
/* Concept: Buffer Objects
To operate on any data, WebGL first needs to be able to access it. The GPU maintains a separate pool of memory it uses independent
of the CPU. Whilst on many embedded systems these are in the same physical memory, the distinction exists so that they can use and
allocate memory without having to worry about synchronising with any other processors in the device.
To this end, data needs to be uploaded into buffers, which are essentially a reserved bit of memory for the GPU to use. By creating
a buffer and giving it some data we can tell the GPU how to render a triangle.
*/
var vertexData = [
-0.5, -0.6, -0.5, 1.0,0.0,0.0,1.0, //front face
0.5, 0.6, -0.5, 1.0,0.0,0.0,1.0, //front face
-0.5, 0.6, -0.5, 1.0,0.0,0.0,1.0, //front face
-0.5, -0.6, -0.5, 1.0,0.0,0.0,1.0, //front face
0.5, -0.6, -0.5, 1.0,0.0,0.0,1.0, //front face
0.5, 0.6, -0.5, 1.0,0.0,0.0,1.0, //front face
-0.5, 0.6, -0.5, 0.0,0.0,1.0,1.0, //back face
0.5, 0.6, -0.5, 0.0,0.0,1.0,1.0, //back face
-0.5, -0.6, -0.5, 0.0,0.0,1.0,1.0, //back face
0.5, 0.6, -0.5, 0.0,0.0,1.0,1.0, //back face
0.5, -0.6, -0.5, 0.0,0.0,1.0,1.0, //back face
-0.5, -0.6, -0.5, 0.0,0.0,1.0,1.0, //back face
];
// Generate a buffer object
gl.vertexBuffer = gl.createBuffer();
// Bind buffer as a vertex buffer so we can fill it with data
gl.bindBuffer(gl.ARRAY_BUFFER, gl.vertexBuffer);
/*
Set the buffer's size, data and usage
Note the last argument - gl.STATIC_DRAW. This tells the driver that we intend to read from the buffer on the GPU, and don't intend
to modify the data until we've done with it.
*/
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertexData), gl.STATIC_DRAW);
return testGLError("initialiseBuffers");
}
function initialiseShaders() {
/* Concept: Shaders
WebGL uses what are known as shaders to determine how to draw objects on the screen. Instead of the fixed function
pipeline in early OpenGL or OpenGL ES 1.x, users can now programmatically define how vertices are transformed on screen, what
data is used where, and how each pixel on the screen is coloured.
These shaders are written in GL Shading Language ES: http://www.khronos.org/registry/gles/specs/2.0/GLSL_ES_Specification_1.0.17.pdf
which is usually abbreviated to simply "GLSL ES".
Each shader is compiled on-device and then linked into a shader program, which combines a vertex and fragment shader into a form
that the OpenGL ES implementation can execute.
*/
/* Concept: Fragment Shaders
In a final buffer of image data, each individual point is referred to as a pixel. Fragment shaders are the part of the pipeline
which determine how these final pixels are coloured when drawn to the framebuffer. When data is passed through here, the positions
of these pixels is already set, all that's left to do is set the final colour based on any defined inputs.
The reason these are called "fragment" shaders instead of "pixel" shaders is due to a small technical difference between the two
concepts. When you colour a fragment, it may not be the final colour which ends up on screen. This is particularly true when
performing blending, where multiple fragments can contribute to the final pixel colour.
*/
var fragmentShaderSource = '\
attribute highp vec4 my\
varting highp vec4 color; \
void main(void) \
{ \
gl_FragColor = vec4(1.0, 1.0, 0.66, 1.0); \
}';
//알파는 투명도가 아니라 불투명도다.
// Create the fragment shader object
gl.fragShader = gl.createShader(gl.FRAGMENT_SHADER);
// Load the source code into it
gl.shaderSource(gl.fragShader, fragmentShaderSource);
// Compile the source code
gl.compileShader(gl.fragShader);
// Check if compilation succeeded
if (!gl.getShaderParameter(gl.fragShader, gl.COMPILE_STATUS)) {
// It didn't. Display the info log as to why
alert("Failed to compile the fragment shader.\n" + gl.getShaderInfoLog(gl.fragShader));
return false;
}
/* Concept: Vertex Shaders
Vertex shaders primarily exist to allow a developer to express how to orient vertices in 3D space, through transformations like
Scaling, Translation or Rotation. Using the same basic layout and structure as a fragment shader, these take in vertex data and
output a fully transformed set of positions. Other inputs are also able to be used such as normals or texture coordinates, and can
also be transformed and output alongside the position data.
*/
/*백터를 4개라고 하고 4개만 넣으면 0과 1을 채운다. 마지막이 1이됨.
4바이4메트릭스와 곱샘을 하려면 백터가 4개 짜리 벡터여야함. */
// Vertex shader code
var vertexShaderSource = '\
attribute highp vec4 myVertex; \
uniform mediump mat4 transformationMatrix; \
void main(void) \
{ \
gl_Position = transformationMatrix * myVertex; \
}';
// Create the vertex shader object
gl.vertexShader = gl.createShader(gl.VERTEX_SHADER);
// Load the source code into it
gl.shaderSource(gl.vertexShader, vertexShaderSource);
// Compile the source code
gl.compileShader(gl.vertexShader);
// Check if compilation succeeded
if (!gl.getShaderParameter(gl.vertexShader, gl.COMPILE_STATUS)) {
// It didn't. Display the info log as to why
alert("Failed to compile the vertex shader.\n" + gl.getShaderInfoLog(gl.vertexShader));
return false;
}
// Create the shader program
gl.programObject = gl.createProgram();
// Attach the fragment and vertex shaders to it
gl.attachShader(gl.programObject, gl.fragShader);
gl.attachShader(gl.programObject, gl.vertexShader);
// Bind the custom vertex attribute "myVertex" to location 0
gl.bindAttribLocation(gl.programObject, 0, "myVertex");
// Link the program
gl.linkProgram(gl.programObject);
// Check if linking succeeded in a similar way we checked for compilation errors
if (!gl.getProgramParameter(gl.programObject, gl.LINK_STATUS)) {
alert("Failed to link the program.\n" + gl.getProgramInfoLog(gl.programObject));
return false;
}
/* Use the Program
Calling gl.useProgram tells WebGL that the application intends to use this program for rendering. Now that it's installed into
the current state, any further gl.draw* calls will use the shaders contained within it to process scene data. Only one program can
be active at once, so in a multi-program application this function would be called in the render loop. Since this application only
uses one program it can be installed in the current state and left there.
*/
gl.useProgram(gl.programObject);
return testGLError("initialiseShaders");
}
var clear_color=0.0;
function renderScene() {
/*
Set the clear colour
At the start of a frame, generally you clear the image to tell WebGL that you're done with whatever was there before and want to
draw a new frame. In order to do that gowever, WebGL needs to know what colour to set in the image's place. gl.clearColor
sets this value as 4 floating point values between 0.0 and 1.0, as the Red, Green, Blue and Alpha channels. Each value represents
the intensity of the particular channel, with all 0.0 being transparent black, and all 1.0 being opaque white. Subsequent calls to
gl.clear with the colour bit will clear the framebuffer to this vlaue.
The functions gl.clearDepth and gl.clearStencil allow an application to do the same with depth and stencil values respectively.
*/
gl.clearColor(0.2, 0.2, 0.2,1.0);
clear_color+=0.01;
/*
Clear the colour buffer
gl.clear is used here with the colour buffer to clear the colour. It can also be used to clear the depth or stencil buffer using
gl.DEPTH_BUFFER_BIT or gl.STENCIL_BUFFER_BIT, respectively.
*/
var rot_z=0.0;
gl.clear(gl.COLOR_BUFFER_BIT);
// Get the location of the transformation matrix in the shader using its name
var matrixLocation = gl.getUniformLocation(gl.programObject, "transformationMatrix");
// Matrix used to specify the orientation of the triangle on screen
var transformationMatrix = [
1.0, 0.0, 0.0, 0.0,
0.0, 1.0, 0.0, 0.0,
0.0, 0.0, 1.0, 0.0,
0.0, 0.0, 0.0, 1.0
];
rot_z+=0.1
transformationMatrix[0]=Math.cos(rot_z);
transformationMatrix[5]=Math.cos(rot_z);
transformationMatrix[1]=Math.cos(rot_z);
transformationMatrix[4]=Math.cos(rot_z);
// Pass the identity transformation matrix to the shader using its location
gl.uniformMatrix4fv(matrixLocation, gl.FALSE, transformationMatrix);
if (!testGLError("gl.uniformMatrix4fv")) {
return false;
}
// Enable the user-defined vertex array
gl.enableVertexAttribArray(0);
// Set the vertex data to this attribute index, with the number of floats in each position
gl.vertexAttribPointer(0, 3, gl.FLOAT, gl.FALSE, 28, 0);
// Enable the user-defined vertex array
gl.enableVertexAttribArray(1);
// Set the vertex data to this attribute index, with the number of floats in each position
gl.vertexAttribPointer(0, 3, gl.FLOAT, gl.FALSE, 28, 12);
if (!testGLError("gl.vertexAttribPointer")) {
return false;
}
/*
Draw the triangle
gl.drawArrays is a draw call, and executes the shader program using the vertices and other state set by the user. Draw calls are the
functions which tell WebGL when to actually draw something to the framebuffer gived the current state.
gl.drawArrays causes the vertices to be submitted sequentially from the position given by the "first" argument until it has processed
"count" vertices. Other draw calls exist, notably gl.drawElements which also accepts index data to allow the user to specify that
some vertices are accessed multiple times, without copying the vertex multiple times.
Others include versions of the above that allow the user to draw the same ovhect multiple times with slightly different data, and
a version of gl.drawElements which allows a user to restrict the actuial indices accessed.
*/
gl.drawArrays(gl.TRIANGLES, 0, 12);
if (!testGLError("gl.drawArrays")) {
return false;
}
return true;
}
function main() {
var canvas = document.getElementById("helloapicanvas");
if (!initialiseGL(canvas)) {
return;
}
if (!initialiseBuffer()) {
return;
}
if (!initialiseShaders()) {
return;
}
// Render loop
requestAnimFrame = (function () {
return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame ||
function (callback) {
window.setTimeout(callback, 1000, 60);
};
})();
(function renderLoop() {
if (renderScene()) {
// Everything was successful, request that we redraw our scene again in the future
requestAnimFrame(renderLoop);
}
})();
}
<html>
<head>
<title>WebGLHelloAPI</title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<script type="text/javascript" src="WebGLHelloAPI.js">
</script>
</head>
<body onload="main()">
<canvas id="helloapicanvas" style="border: none;" width="800" height="600"></canvas>
</body>
</html>
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment