Viewing Program

Program Data

Program thumbnail for "{props.program.title}"

Title	3D Rainbow R2D2
ID	6055238375522304
Created	4 years ago, 1609306951975
Updated	3 years ago, 1629761927222
Code	<!DOCTYPE html> <!-- Use WASD, Space Bar, Shift, and the mouse to move In order to make this project, I had to convert an OBJ file to vertex data of this model with another program I made for my computer which I wrote in C++. I then had to take that vertex data and write this program which uses WebGL to display it. The vertex data is hosted here: https://cdn.jsdelivr.net/gh/TheAmazingBrianPowell/R2D2-Verticies/vertexPoints.js because there are far too many points to display in this editor and not have it destroy the program, and this is similar with the texture coordinates and textures rgb values. I do not in any way take credit for this model, I downloaded the model and textures from here: https://clara.io/view/1571df52-a48a-45a9-aeb3-9b2197a90fd6 however, all code written in this program is by me. You can sub to me here (don't worry, I won't be mad if you don't): https://www.khanacademy.org/computer-programming/sub-to-blobfish-and-an-animation/6028896647938048 Thanks for viewing! Update log: * added diffuse texture * added shading animation * fixed texture pixelation * added illumination texture (lights) * added lights turning on and off --> <html> <head> <title>3D Rainbow R2D2</title> <style> body { margin:0px; overflow:hidden; } svg { position:absolute; left:calc(50% - 20px); top:calc(50% - 20px); width:100px; height:100px; } #stats { position:fixed; color:white; font-size:10px; bottom:5px; left:5px; } </style> </head> <body> <svg> <rect x = "0" y = "10" width="20" height = "1" style="fill:rgb(255,255,255);"/> <rect x = "10" y = "0" width="1" height = "20" style="fill:rgb(255,255,255);"/> </svg> <p id = "stats"></p> <canvas id="glCanvas" width = "700" height="600"></canvas> <script src="https://cdnjs.cloudflare.com/ajax/libs/gl-matrix/2.8.1/gl-matrix-min.js"></script> <script src="https://cdn.jsdelivr.net/gh/TheAmazingBrianPowell/R2D2-Verticies/vertexPoints.js"></script> <script src="https://cdn.jsdelivr.net/gh/TheAmazingBrianPowell/R2D2-Verticies/texcoords.js"></script> <script src="https://cdn.jsdelivr.net/gh/TheAmazingBrianPowell/R2D2-Verticies/theTextureLarge.js"></script> <script src="https://cdn.jsdelivr.net/gh/TheAmazingBrianPowell/R2D2-Verticies/illumination2.js"></script> <script id="vertex-shader" type="x-shader/x-vertex"> attribute vec4 aVertexPosition; attribute vec2 a_texcoord; uniform mat4 uModelViewMatrix; uniform mat4 uProjectionMatrix; varying vec3 position; varying vec2 v_texcoord; uniform float time; varying float fogDepth; void main() { gl_Position = uProjectionMatrix * uModelViewMatrix * aVertexPosition; position = vec3(sin(time) * aVertexPosition.x - cos(time) * aVertexPosition.x ,aVertexPosition.y,cos(time)aVertexPosition.z + sin(time)aVertexPosition.z); v_texcoord = a_texcoord; fogDepth = -(uModelViewMatrix * aVertexPosition).z; } </script> <script id="fragment-shader" type="x-shader/x-fragment"> #ifdef GL_FRAGMENT_PRECISION_HIGH precision highp float; #else precision mediump float; #endif varying vec3 position; varying vec2 v_texcoord; varying float fogDepth; uniform sampler2D texture; uniform sampler2D texture2; uniform int isOn; void main() { if(isOn == 0) { gl_FragColor = mix(mix(vec4(sin(position.x / 10.0), sin(position.y / 10.0), sin(position.z / 10.0), 1.0), texture2D(texture, v_texcoord),0.7), vec4(vec3(0.0), 1.0), smoothstep(fogDepth,0.0,10.0)) + texture2D(texture2, v_texcoord); } else { gl_FragColor = mix(mix(vec4(sin(position.x / 10.0), sin(position.y / 10.0), sin(position.z / 10.0), 1.0), texture2D(texture, v_texcoord),0.7), vec4(vec3(0.0), 1.0), smoothstep(fogDepth,0.0,10.0)); } } </script> <script> // this enables javascript strict mode (its not necessary or anything) "use strict"; // get the elements from the html var stats = document.getElementById("stats"); var canvas = document.getElementById('glCanvas'); // object for storing what keys are pressed var keys = {}; document.body.addEventListener("keydown", function(e) { e.preventDefault(); keys[e.key.toLowerCase()] = true; }); document.body.addEventListener("keyup", function(e) { keys[e.key.toLowerCase()] = false; }); // clear all previous animation frames. This is KA specific so the program doesn't crash on reload var id = window.requestAnimationFrame(function() {}); while(id--) { window.cancelAnimationFrame(id); } // start webGL context in our canvas and check to make sure it was successful var gl = canvas.getContext('webgl', {preserveDrawingBuffer: true, antialias:false}); if (!gl) { alert('Unable to initialize WebGL. Your browser may not support it.'); } // stores data and methods about the player var player = { x: 0, y: -7, z: -20, r: { x: 0, y: 0, }, width: 1, height: 2, depth: 1, move: function() { // TODO: diagonal movement is faster than lateral if(keys.w \|\| keys.ArrowUp) { player.z+=Math.cos(player.r.y)/10; player.x-=Math.sin(player.r.y)/10; } else if(keys.s \|\| keys.ArrowDown) { player.z-=Math.cos(player.r.y)/10; player.x+=Math.sin(player.r.y)/10; } if(keys.a \|\| keys.ArrowLeft) { player.z+=Math.sin(player.r.y)/10; player.x+=Math.cos(player.r.y)/10; } else if(keys.d \|\| keys.ArrowRight) { player.z-=Math.sin(player.r.y)/10; player.x-=Math.cos(player.r.y)/10; } if(keys[" "]) { player.y-=0.05; } if(keys.shift) { player.y+=0.05; } } }; // call our initShaderProgram function to make a new glsl program var program = initShaderProgram("vertex-shader", "fragment-shader"); // use our glsl program for drawing gl.useProgram(program); // get attribute locations from vertex shader var vertexPosition = gl.getAttribLocation(program, 'aVertexPosition'); var texcoordLocation = gl.getAttribLocation(program, "a_texcoord"); // get uniform locations from shaders var projectionMatrixLoc = gl.getUniformLocation(program, 'uProjectionMatrix'); var modelViewMatrixLoc = gl.getUniformLocation(program, 'uModelViewMatrix'); var isOn = gl.getUniformLocation(program, 'isOn'); var timeLoc = gl.getUniformLocation(program, 'time'); var texture1 = gl.getUniformLocation(program, "texture"); var texture2 = gl.getUniformLocation(program, "texture2"); gl.uniform1i(texture1, 0); gl.uniform1i(texture2, 1); var Shape = function() { this.color = Array.from(arguments).slice(-3); this.pointAmount = arguments[0].length; this.posBuffer = gl.createBuffer(); gl.bindBuffer(gl.ARRAY_BUFFER, this.posBuffer); gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(arguments[0]), gl.STATIC_DRAW); if(arguments[1]) { this.texBuffer = gl.createBuffer(); gl.bindBuffer(gl.ARRAY_BUFFER, this.texBuffer); gl.enableVertexAttribArray(texcoordLocation); } gl.vertexAttribPointer(texcoordLocation, 2, gl.FLOAT, false, 0, 0); gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(arguments[1]), gl.STATIC_DRAW); gl.pixelStorei(gl.UNPACK_ALIGNMENT, 1); gl. pixelStorei(gl. UNPACK_FLIP_Y_WEBGL, true); var texture = gl.createTexture(); gl.activeTexture(gl.TEXTURE0); gl.bindTexture(gl.TEXTURE_2D, texture); gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGB, 819, 819, 0, gl.RGB, gl.UNSIGNED_BYTE, diffuseTexture); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE); var illuminationT = gl.createTexture(); gl.activeTexture(gl.TEXTURE1); gl.bindTexture(gl.TEXTURE_2D, illuminationT); gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGB, 819, 819, 0, gl.RGB, gl.UNSIGNED_BYTE, illumination); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE); }; Shape.prototype.draw = function() { gl.bindBuffer(gl.ARRAY_BUFFER, this.posBuffer); gl.vertexAttribPointer(vertexPosition, 3, gl.FLOAT, false, 0, 0); gl.drawArrays(gl.TRIANGLES, 0, this.pointAmount / 3); }; // lock the pointer on mouse clicked document.body.addEventListener("mousedown", function() { if(document.pointerLockElement !== canvas && document.mozPointerLockElement !== canvas) { canvas.requestPointerLock = canvas.requestPointerLock \|\| canvas.mozRequestPointerLock; canvas.requestPointerLock(); } }); // update player rotation on mousemove and if pointer is locked! document.body.addEventListener("mousemove", function(e) { if(document.pointerLockElement === canvas \|\| document.mozPointerLockElement === canvas) player.r.y+=e.movementX/500; if(document.pointerLockElement === canvas \|\| document.mozPointerLockElement === canvas) player.r.x+=e.movementY/500; if(player.r.x > Math.PI) player.r.x = Math.PI; if(player.r.x < -Math.PI) player.r.x = -Math.PI; }); // create a projection matrix for a perpective view var projectionMatrix = mat4.create(); mat4.perspective(projectionMatrix, 0.78539816339, gl.canvas.clientWidth / gl.canvas.clientHeight, 0.1, 100.0); // when the window loads, start the rendering window.addEventListener("load", function() { window.requestAnimationFrame(render) }); // update the content (html text, canvas drawing) var then = 0; var shape = new Shape(vertexPoints,texcoordArray); // this updates the content on the canvas var time = 0; function drawScene() { gl.clearColor(0.0, 0.0, 0.0, 1.0); gl.clearDepth(1); gl.enable(gl.DEPTH_TEST); gl.depthFunc(gl.LEQUAL); gl.enable(gl.CULL_FACE); gl.clear(gl.COLOR_BUFFER_BIT \| gl.DEPTH_BUFFER_BIT); // use vertex attribute array with the shaders with the indices element array gl.enableVertexAttribArray(vertexPosition); //gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, buffers.indices); // gl.bindBuffer(gl.ARRAY_BUFFER, buffers.position); // gl.vertexAttribPointer(vertexPosition, 3, gl.FLOAT, false, 0, 0); // gl.bindBuffer(gl.ARRAY_BUFFER, buffers.texture); // gl.vertexAttribPointer(texcoordLocation, 2, gl.FLOAT, false, 0, 0); player.move(); // create a new matrix for camera transformations // TODO: camera object var modelViewMatrix = mat4.create(); // set camera location mat4.rotate(modelViewMatrix, modelViewMatrix, player.r.x, [1.0, 0.0, 0.0]); mat4.rotate(modelViewMatrix, modelViewMatrix, player.r.y, [0.0, 1.0, 0.0]); mat4.translate(modelViewMatrix, modelViewMatrix, [player.x, player.y, player.z]); mat4.scale(modelViewMatrix, modelViewMatrix, [0.1,0.1,0.1]); // TODO: projection matrix could be combined with modelViewMatrix gl.uniformMatrix4fv(projectionMatrixLoc, false, projectionMatrix); gl.uniformMatrix4fv(modelViewMatrixLoc, false, modelViewMatrix); gl.uniform1f(timeLoc, time); gl.uniform1i(isOn, (time & 4) / 4); time+=0.01; shape.draw(); } // shader compiler and linker functions function initShaderProgram(vs, fs) { var vsSource = document.getElementById(vs).textContent; var fsSource = document.getElementById(fs).textContent; var vertexShader = loadShader(gl.VERTEX_SHADER, vsSource); var fragmentShader = loadShader(gl.FRAGMENT_SHADER, fsSource); var shaderProgram = gl.createProgram(); gl.attachShader(shaderProgram, vertexShader); gl.attachShader(shaderProgram, fragmentShader); gl.linkProgram(shaderProgram); gl.detachShader(shaderProgram, vertexShader); gl.deleteShader(vertexShader); gl.detachShader(shaderProgram, fragmentShader); gl.deleteShader(fragmentShader); if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) { console.error('Unable to initialize the shader program: ' + gl.getProgramInfoLog(shaderProgram)); return null; } return shaderProgram; } function loadShader(type, source) { var shader = gl.createShader(type); gl.shaderSource(shader, source); gl.compileShader(shader); if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) { console.error('An error occurred compiling the shaders: ' + gl.getShaderInfoLog(shader)); gl.deleteShader(shader); return null; } return shader; } function render(m) { if(drawScene) { drawScene(); } if(stats) { stats.innerHTML = "<p>FPS = " + Math.round(1000 / (m - then) * 10) / 10 + "<br>x:" + player.x + "<br>y:" + player.y + "<br>z:" + player.z + "<br>rotY:" + player.r.y; } then = m; window.requestAnimationFrame(render); } </script> </body> </html>
Folds
Fork	false
Key	ag5zfmtoYW4tYWNhZGVteXIXCxIKU2NyYXRjaHBhZBiAgJ3j0ObgCgw
Votes	96
Spin-Offs	2
Type	WEBPAGE
Width	400
Height	600
User Flagged	false
Origin Scratchpad	null
Hidden From Hotlist	false
Restricted Posting	true
By Child	false
Author Nick	BLOBFISH
Author Name	BL0BF1SH
Author ID	kaid_1078961532334567178377280
Author Profile Access	COACH

Archive Data

Added	10 months ago, 1709835015211
Updated	10 months ago, 1709835015211
Source Deleted	unknown