WebGL

Developer
Joseph1401
Size
2,710 Kb
Views
32,384
  1. WebGL Previews
  2. WebGL HTML Codes
  3. WebGL JS Codes

How do I make an webgl?

What is a webgl? How do you make a webgl? This script and codes were developed by Joseph1401 on 16 September 2022, Friday.

WebGL Previews
IQ Test

WebGL - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>WebGL</title>
</head>
<body> <canvas id="glcanvas" width="640" height="480"> Your browser doesn't appear to support the <code>&lt;canvas&gt;</code> element. </canvas>
<script id="shader-fs" type="x-shader/x-fragment"> void main(void) { gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0); }
</script>
<script id="shader-vs" type="x-shader/x-vertex"> attribute vec3 aVertexPosition; uniform mat4 uMVMatrix; uniform mat4 uPMatrix; void main(void) { gl_Position = uPMatrix * uMVMatrix * vec4(aVertexPosition, 1.0); }
</script> <script src='https://code.jquery.com/jquery-2.2.4.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

WebGL - Script Codes JS Codes

var gl;
$(function(){ var canvas = document.getElementById('glcanvas'); gl = initWebGL(canvas); if(!gl){ return; } gl.clearColor(0.0,0.0,0.0,1.0); gl.enable(gl.DEPTH_TEST); gl.depthFunc(gl.LEAUAL); gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT); gl.viewport(0, 0, canvas.width, canvas.height); initShaders(); // Here's where we call the routine that builds all the objects // we'll be drawing. initBuffers(); // Set up to draw the scene periodically. setInterval(drawScene, 15);
})
function getShader(gl, id, type){ var shaderScript, theSource, currentChild, shader; shaderScript = document.getElementById(id); if(!shaderScript){ return null; } theSource = shaderScript.text; if(!type){ if(shaderScript.type == 'x-shader/x-fragment'){ type = gl.FRAGMENT_SHADER; } else if(shaderScript.type == 'x-shader/x-vertex'){ type = gl.VERTEX_SHADER; } else{ return null; } } shader = gl.createShader(type); gl.shaderSource(shader, theSource); gl.complieShader(shader); if(!gl.getShaderParameter(shader, gl.COMPILE_STATUS)){ alert("An error occurred compiling the shaders: " + gl.getShaderInfoLog(shader)); gl.deleteShader(shader); return null; } return shader;
}
function initWebGL(canvas){ gl = null; gl = canvas.getContext('webgl') || canvas.getContext('experimental-webgl'); if(!gl){ alert("NO WEBGL SUPPORT ON BROWSER"); } return gl;
}
function initShaders(){ var fragmentShader = getShader(gl, 'shader-fs'); var vertexShader = getShader(gl,'shader-vs'); var shaderProgram = gl.createProgram(); gl.attachShader(shaderProgram , vertexShader); gl.attachShader(shaderProgram , fragmentShader); gl.linkProgram(shaderProgram); if(!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)){ alert(gl.getProgramInfoLog +"SHADER NOT INIT"); } gl.useProgram(shaderProgram); vertexPositionAttribute = gl.getAttribLocation(shaderProgram, 'aVertexPosition'); gl.enableVertexAttribArray(vertexPositionAttribute);
}
var horizAspect = 480.0/640.0;
function initBuffers() { squareVerticesBuffer = gl.createBuffer(); gl.bindBuffer(gl.ARRAY_BUFFER, squareVerticesBuffer); var vertices = [ 1.0, 1.0, 0.0, -1.0, 1.0, 0.0, 1.0, -1.0, 0.0, -1.0, -1.0, 0.0 ]; gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);
}
function drawScene() { gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT); perspectiveMatrix = makePerspective(45, 640.0/480.0, 0.1, 100.0); loadIdentity(); mvTranslate([-0.0, 0.0, -6.0]); gl.bindBuffer(gl.ARRAY_BUFFER, squareVerticesBuffer); gl.vertexAttribPointer(vertexPositionAttribute, 3, gl.FLOAT, false, 0, 0); setMatrixUniforms(); gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
}
WebGL - Script Codes
WebGL - Script Codes
Home Page Home
Developer Joseph1401
Username jmills4122
Uploaded September 16, 2022
Rating 3
Size 2,710 Kb
Views 32,384
Do you need developer help for WebGL?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Joseph1401 (jmills4122) Script Codes
Name
TicTacToe
Diagonal menu Test
Collections Viewer
Button Stuff
TODO
Bianary
Tree Processor
Quote Generator
A Pen by Joseph1401
Current Weather
Create amazing art & images with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!