8Observer8 Posted January 11 Author Share Posted January 11 My Snake2D game in pure WebGL1, Rollup, JS, FreeTexturePacker, WebAudioAPI, and HTML5/CSS for GUI: https://8observer8.github.io/webgl10-js/boomers-snake2d-webgl1-js/ Quote Link to comment Share on other sites More sharing options...
8Observer8 Posted January 15 Author Share Posted January 15 (edited) To create a desktop application from WebGL, you can rewrite it to OpenGL. Python is one of the easiest languages to build desktop applications. Drawing Box2D physics engine colliders with b2Draw, OpenGL1, PyQt6 and Python The example shows how to draw colliders using b2Draw. Uses OpenGL version 1 for simplicity. pyBox2D works with Python 3.8. Download and install Python 3.8 from here: https://www.python.org/downloads/ Install the required packages with this command from CMD: pip install Box2D PyQt6 PyOpenGL Download the source code: https://github.com/8Observer8/edit-gravity-debug-drawer-opengl1-pyqt6 Go to your project folder and type this command to run the application: python main.py (or double click on main.py) Install the very useful isort module (pip install isort), which allows you to sort plugins alphabetically with the command: isort . (dot means to sort in all files in the current directory) The Notepad++ code editor has syntax highlighting for Python, JavaScript, HTML, C++, and more by default. There is a plugin (https://github.com/danielscherzer/NotepaddPP-glsl-integration) for syntax highlighting GLSL (OpenGL Shading Language). You can make the working directory the directory of the current file, which will open in the left pane. To do this, right-click on the file in the editor tab and select "Open into" -> "Open Containing Folder as Workspace". You can invoke the CMD (console) on Windows from Notapad++ by opening a code file in the editor, right-clicking on the file in the editor tab and selecting "Open into" -> "Open Containing Folder in cmd". Edited January 17 by 8Observer8 Quote Link to comment Share on other sites More sharing options...
Nikhil Sharma Posted February 2 Share Posted February 2 Here are two examples of using WebGL to create simple graphics in a web browser: Drawing a Triangle: <!DOCTYPE html> <html> <head> <script src="https://cdn.jsdelivr.net/npm/[email protected]/build/three.js"></script> <script> // Set up the scene const scene = new THREE.Scene(); const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 ); const renderer = new THREE.WebGLRenderer(); renderer.setSize(window.innerWidth, window.innerHeight); document.body.appendChild(renderer.domElement); // Create the triangle const geometry = new THREE.Geometry(); geometry.vertices.push( new THREE.Vector3(-1, -1, 0), new THREE.Vector3(0, 1, 0), new THREE.Vector3(1, -1, 0) ); geometry.faces.push(new THREE.Face3(0, 1, 2)); const material = new THREE.MeshBasicMaterial({ color: 0xff0000 }); const triangle = new THREE.Mesh(geometry, material); scene.add(triangle); // Render the scene camera.position.z = 5; renderer.render(scene, camera); </script> </head> <body> </body> </html> Rotating a Cube: <!DOCTYPE html> <html> <head> <script src="https://cdn.jsdelivr.net/npm/[email protected]/build/three.js"></script> <script> // Set up the scene const scene = new THREE.Scene(); const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 ); const renderer = new THREE.WebGLRenderer(); renderer.setSize(window.innerWidth, window.innerHeight); document.body.appendChild(renderer.domElement); // Create the cube const geometry = new THREE.BoxGeometry(1, 1, 1); const material = new THREE.MeshBasicMaterial({ color: 0xff0000 }); const cube = new THREE.Mesh(geometry, material); scene.add(cube); // Render the scene camera.position.z = 5; renderer.render(scene, camera); const render = function () { requestAnimationFrame(render); cube.rotation.x += 0.01; cube.rotation.y += 0.01; renderer.render(scene, camera); }; render(); </script> </head> <body> </body> </html> These examples show the basics of setting up a scene, creating objects, and rendering them in a web browser using Three.js. Quote Link to comment Share on other sites More sharing options...
8Observer8 Posted February 3 Author Share Posted February 3 (edited) @Nikhil Sharma sorry but this topic for pure WebGL and OpenGL examples. If you want you can create another topic for Three.js examples. Edited February 3 by 8Observer8 Quote Link to comment Share on other sites More sharing options...
8Observer8 Posted February 9 Author Share Posted February 9 Translated a platformer with self-written physics from Olga28 to WebGL Demo in browser: https://8observer8.github.io/webgl10-js/olga28s-platformer-2d/ Controls: left/right arrows and up arrow - jump. Forum topic: https://www.cyberforum.ru/javascript-canvas/thread3075879.html Right-click in Chrome and select "Translate to English" Quote Link to comment Share on other sites More sharing options...
8Observer8 Posted February 9 Author Share Posted February 9 (edited) Calculation of points of a five-pointed star. Sandbox demo on WebGL and JavaScript: https://plnkr.co/edit/W49ndxcQemMgkAoP I made the video: https://www.youtube.com/watch?v=0fu4X8xbOuY Edited February 9 by 8Observer8 Quote Link to comment Share on other sites More sharing options...
8Observer8 Posted February 21 Author Share Posted February 21 I have a slight angle offset between the object and the borders of the colliders: https://github.com/Lusito/box2d.ts/issues/36#issuecomment-1438368875 - PlayCode: https://playcode.io/1211513 - Plunker: https://plnkr.co/edit/zTthXbGVITITERkL Quote Link to comment Share on other sites More sharing options...
8Observer8 Posted March 3 Author Share Posted March 3 Some progress in pure WebGL. Placed tiles and colliders in Tiled. Packed tiles and sprites into one texture atlas using Free Texture Packer. Physics at OimoPhysics. Drawn with pure WebGL 1.0 and linear algebra with glMatrix Demo in browser: https://8observer8.github.io/webgl10-js/mario-2d-jumps-oimophysics-webgl-js/ Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.