Search the Community
Showing results for tags 'webgl1'.
Found 5 results
-
Hello, friends. There was such a task. Start up one! a wave over a sphere, which, as it were, looks like a map of the planet, which (map) in turn is generated from planeBufferGeometry and then these geometries are combined using THREE.BufferGeometryUtils.mergeBufferGeometries(geometries, false); Code of vertex shader: vertexShader:` varying vec2 vUv; uniform float time; void main(){ vUv=uv; vec3 newposition = position + position*sin(position.z*12.)*0.03; gl_Position = projectionMatrix * modelViewMatrix * vec4( newposition, 1. ); } `, The question is how to make only this one "wave", i.e. so that sin does not go over the entire sphere, but only in the middle, for example. And further. How can I change the direction of this "wave", now it comes from the Z coordinate of this sphere, I need it to go from the position I have defined (for example, approximate coordinates of London).
-
My example shows how to use Planck.js with TypeScript in Debug and Release modes: hello-planckjs-webgl10-ts You should install these modules globally: npm i typescript -g npm i browserify -g npm i uglify-js -g Install all packages from `package.json` using the command: `npm i` Comment/Uncomment Debug/Release in `index.html` and `main.ts` (see comments in these files). Use these commands to build the example: `npm run debug` - to set breakpoint in code editors and to publish on PlayGround (like Plunker), for example: Hello Planck.js. WebGL 1.0, TypeScript `npm run release` - to bundle in `bundle.min.js` for production Note. See also: Usage of Ammo.js with TypeScript (Ammo.js is a port of Bullet Physics Engine) package.json { "name": "hello-planckjs-webgl10-ts", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "debug": "tsc -p tsconfigs/tsconfig.debug.json", "compile": "tsc -p tsconfigs/tsconfig.release.json", "bundle": "browserify public/js/main.js -o public/js/bundle.js", "minify": "uglifyjs public/js/bundle.js -o public/js/bundle.min.js", "release": "npm run compile && npm run bundle && npm run minify" }, "keywords": [], "author": "", "license": "ISC", "dependencies": { "gl-matrix": "^3.3.0", "planck-js": "^0.3.23", "requirejs": "^2.3.6" }, "devDependencies": { "@types/requirejs": "^2.1.32" } } public/index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Hello Planck. WebGL 1.0, TypeScript</title> <!-- Debug --> <script data-main="js/RequireConfig" src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.6/require.min.js"></script> <!-- Release --> <!-- <script src="js/bundle.min.js"></script> --> </head> <body> <canvas id="renderCanvas" width="300" height="150"></canvas> <div id="output"></div> <a href="https://github.com/8Observer8/hello-planckjs-webgl10-ts">Source Code on GitHub</a> <br> <a href="https://plnkr.co/edit/MyJOyvRtIDAhpKA5?preview">Playground</a> </body> </html> src/client/main.ts import { mat4 } from "gl-matrix"; import { Vec2 } from "planck-js"; let gl: WebGLRenderingContext; let output: HTMLDivElement; function init() { const canvas = document.getElementById("renderCanvas") as HTMLCanvasElement; gl = canvas.getContext("webgl"); gl.clearColor(0.2, 0.2, 0.2, 1); gl.clear(gl.COLOR_BUFFER_BIT); output = document.getElementById("output") as HTMLDivElement; const vec = Vec2(1, 2); output.innerHTML = `vec = (${vec.x}, ${vec.y})<br>`; const matrix = mat4.create(); output.innerHTML += `matrix = [${matrix}]`; } function main() { init(); } // Debug main(); // Release // window.onload = () => main(); src/client/RequireConfig.ts requirejs.config({ baseUrl: "js", paths: { "gl-matrix": "https://cdn.jsdelivr.net/npm/[email protected]/gl-matrix-min", "planck-js": "https://cdn.jsdelivr.net/npm/[email protected]/dist/planck.min" } }); requirejs(["main"], () => { }); tsconfigs/tsconfig.json { "compilerOptions": { "target": "ES5", "outDir": "../public/js" }, "include": [ "../src/client/**/*.ts" ] } tsconfigs/tsconfig.debug.json { "extends": "./tsconfig.json", "compilerOptions": { "module": "AMD", "sourceMap": true, "types": [ "requirejs", "gl-matrix", "planck-js" ], "moduleResolution": "node" } } tsconfigs/tsconfig.release.json { "extends": "./tsconfig.json", "compilerOptions": { "module": "CommonJS", "sourceMap": false, "types": [ "node" ] }, "exclude": [ "../src/client/RequireConfig.ts" ] } -
My example shows how to use Ammo.js with TypeScript in Debug and Release modes: hello-ammojs-webgl10-ts You should install these modules globally: npm i typescript -g npm i browserify -g npm i uglify-js -g Install all packages from `package.json` using the command: `npm i` Comment/Uncomment Debug/Release in `index.html` and `main.ts` (see comments in these files). Use these commands to build the example: `npm run debug` - to set breakpoint in code editors and to publish on PlayGround (like Plunker), for example: Hello Ammo.js. WebGL 1.0, TypeScript `npm run release` - to bundle in `bundle.min.js` for production Note. See alse: Usage of Planck.js with TypeScript (Planck.js is a port of Box2D Physics Engine) package.json { "name": "hello-ammojs-webgl10-ts", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "debug": "tsc -p tsconfigs/tsconfig.debug.json", "compile": "tsc -p tsconfigs/tsconfig.release.json", "bundle": "browserify public/js/main.js -o public/js/bundle.js", "minify": "uglifyjs public/js/bundle.js -o public/js/bundle.min.js", "release": "npm run compile && npm run bundle && npm run minify" }, "keywords": [], "author": "", "license": "ISC", "dependencies": { "ammo.js": "github:kripken/ammo.js", "requirejs": "^2.3.6" }, "devDependencies": { "@types/requirejs": "^2.1.32", "ammojs-typed": "^1.0.6" } } public/index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Hello Ammo. WebGL 1.0, TypeScript</title> <!-- Debug --> <script data-main="js/RequireConfig" src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.6/require.min.js"></script> <!-- Release --> <!-- <script src="js/bundle.min.js"></script> --> </head> <body> <canvas id="renderCanvas" width="300" height="150"></canvas> <div id="output"></div> <a href="https://github.com/8Observer8/hello-ammojs-webgl10-ts">Source Code on GitHub</a> <br> <a href="https://plnkr.co/edit/6KQT9VQHWvswY3cc?preview">Playground</a> </body> </html> src/client/main.ts import { mat4 } from "gl-matrix"; import AmmoModule from "ammojs-typed"; let Ammo: typeof AmmoModule; let gl: WebGLRenderingContext; let output: HTMLDivElement; function init() { const canvas = document.getElementById("renderCanvas") as HTMLCanvasElement; gl = canvas.getContext("webgl"); gl.clearColor(0.2, 0.2, 0.2, 1); gl.clear(gl.COLOR_BUFFER_BIT); output = document.getElementById("output") as HTMLDivElement; const vec = new Ammo.btVector3(1, 2, 3); output.innerHTML = `vec = (${vec.x()}, ${vec.y()}, ${vec.z()})<br>`; const matrix = mat4.create(); output.innerHTML += `matrix = [${matrix}]`; } function main() { AmmoModule().then((api) => { Ammo = api; init(); }); } // Debug main(); // Release // window.onload = () => main(); src/client/RequireConfig.ts requirejs.config({ baseUrl: "js", paths: { "gl-matrix": "https://cdn.jsdelivr.net/npm/[email protected]/gl-matrix-min", "ammojs-typed": "https://dl.dropboxusercontent.com/s/e5iytx67noqoew7/ammo" } }); requirejs(["main"], () => { }); tsconfigs/tsconfig.json { "compilerOptions": { "target": "ES5", "outDir": "../public/js", "allowSyntheticDefaultImports": true, "esModuleInterop": true }, "include": [ "../src/client/**/*.ts" ] } tsconfigs/tsconfig.debug.json { "extends": "./tsconfig.json", "compilerOptions": { "module": "AMD", "sourceMap": true, "types": [ "requirejs", "gl-matrix", "ammojs-typed" ], "moduleResolution": "node" } } tsconfigs/tsconfig.release.json { "extends": "./tsconfig.json", "compilerOptions": { "module": "CommonJS", "sourceMap": false, "types": [ "node" ] }, "exclude": [ "../src/client/RequireConfig.ts" ] }
-
hi, found regression with alpha12 version (works well, on 10 and 11). PBR metalines materials is almost black on galaxy 8+ with webgl 1.0 PG (dont know how to force webgl 1.0 in playground) looks like light or env texture is not applied here. could be some change in these components ? Phone: Galaxy 8+ OS: Android 7.0 Browser: Chrome 67.0.3396.87 WebGl: 1.0
-
@Sebavan Hi, checked new examples of PBR , but found some issues. It doesn't work in safari mac, probably because it uses webgl1, works great in other browsers but they have webgl2. Example On safari sphere is just black. Dont get any errors just some warnings from webgl: [Log] BJS - [08:31:35]: Babylon.js engine (v3.0) launched (babylon.js, line 3) [Warning] WebGL: INVALID_OPERATION: texImage2D: type HALF_FLOAT_OES but ArrayBufferView is not NULL (babylon.js, line 5, x54) [Warning] WebGL: INVALID_FRAMEBUFFER_OPERATION: readPixels: attachment type is not correct for attachment (babylon.js, line 6) [Warning] WebGL: INVALID_FRAMEBUFFER_OPERATION: readPixels: attachment type is not correct for attachment (babylon.js, line 6) [Warning] WebGL: INVALID_FRAMEBUFFER_OPERATION: readPixels: attachment type is not correct for attachment (babylon.js, line 6) [Warning] WebGL: INVALID_FRAMEBUFFER_OPERATION: readPixels: attachment type is not correct for attachment (babylon.js, line 6) [Warning] WebGL: INVALID_FRAMEBUFFER_OPERATION: readPixels: attachment type is not correct for attachment (babylon.js, line 6) [Warning] WebGL: INVALID_FRAMEBUFFER_OPERATION: readPixels: attachment type is not correct for attachment (babylon.js, line 6) [Warning] WebGL: drawElements: texture bound to texture unit 0 is not renderable. It maybe non-power-of-2 and have incompatible texture filtering or is not 'texture complete', or it is a float/half-float type with linear filtering and without the relevant float/half-float linear extension enabled. (babylon.js, line 5, x196) [Warning] WebGL: too many errors, no more errors will be reported to the console for this context. (babylon.js, line 5)
